<template>
  <hs-popup-buttom-custom
    :show="props?.show"
    title="请选择添加工人的方式"
    @close="handleClose"
    mode="bottom"
    :closeable="true"
    :round="20"
  >
    <view class="popup_content">
      <template v-for="(i, index) in list" :key="`item_${index}`">
        <view v-if="i?.type === 'page'" class="popup_content_item" @click="handleToPage(i)">
          <view class="icon">
            <image :src="i?.icon" mode="widthFix" />
          </view>
          <view class="label"> {{ i?.label }} </view>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <view v-if="i?.type === 'button'" class="popup_content_item" @click="handleToPage(i)">
          <button open-type="share">
            <view class="icon">
              <image :src="i?.icon" mode="widthFix" />
            </view>
            <view class="label"> {{ i?.label }} </view>
            <uni-icons type="right" size="15"></uni-icons>
          </button>
        </view>
      </template>
    </view>
  </hs-popup-buttom-custom>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps(['show', 'items'])
const emit = defineEmits(['click', 'handleSubmit', 'handleClose'])
const handleClose = () => {
  emit('handleClose')
}

const handleToPage = (i: { url?: string }) => {
  uni.navigateTo({
    url: `${i?.url || ''}?id=${props?.items?.id}`
  })
}
const list = [
  {
    label: '自行添加',
    icon: 'https://gc-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KA0DYY140XYWKJ8EA9V8PASV.png',
    url: `/ME/decoration/add_worker/index`,
    type: 'page'
  },
  {
    label: '转发工人填写',
    icon: 'https://gc-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KA0DW555P9YEXW0VY3SCA9F4.png',
    type: 'button'
  }
]
</script>

<style lang="scss" scoped>
.popup_content {
  padding: 30rpx;
  .popup_content_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    height: 140rpx;
    font-size: 30rpx;
    color: #3d3d3d;
    button {
      padding: 0;
      margin: 0;
      width: 100%;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 140rpx;
      font-size: 30rpx;
      color: #3d3d3d;
    }
    .icon {
      width: 80rpx;
      height: 80rpx;
    }
    image {
      width: 80rpx;
      height: 80rpx;
    }
    .label {
      flex: 1;
      padding: 0 25rpx;
      text-align: left;
    }
  }
}
button:after {
  border: none !important; /* 去掉边框 */
}
</style>
