<script setup>
  import { uploadSingleFile } from '@/utils/uploadFile'
  import { computed } from 'vue'

  const props = defineProps({
    type: {
      type: String,
      default: 'image'
    },
    /** 身份证正面 */
    isFront: {
      type: Boolean,
      default: false
    },
    /** 身份证反面 */
    isBack: {
      type: Boolean,
      default: false
    },
    limit: {
      type: String,
      default: '1'
    }
  })

  const imageValue = defineModel({
    type: [String, Array],
    default: () => []
  })

  /** 图片回显列表 */
  const fileLists = defineModel('list', {
    type: Array,
    default: () => []
  })

  /** 是否为身份证状态 */
  const isIdCard = computed(() => props.isFront || props.isBack)

  const imageStyles = computed(() => {
    let styles = {
      width: '200rpx',
      height: '200rpx',
      border: {
        color: '#00D993',
        style: 'dashed'
      }
    }
    if (isIdCard.value) {
      styles = {
        width: '295rpx',
        height: '176rpx',
        border: {
          width: '0rpx'
        }
      }
    }
    return styles
  })

  /** 上传 */
  const uploadFile = async file => {
    const url = await uploadSingleFile(file, {
      url: '/api/common/admin/upload/up/single'
    })
    imageValue.value.push(url)
  }

  const onSelect = async e => {
    if (props.limit === '1') {
      const upData = e.tempFiles.map(v => v.path)[0]
      imageValue.value = await uploadSingleFile(upData, {
        url: '/api/common/admin/upload/up/single'
      })
    } else {
      e.tempFiles.forEach(v => {
        uploadFile(v.path)
      })
    }
  }

  const onDelete = e => {
    if (props.limit === '1') {
      imageValue.value = ''
    } else {
      imageValue.value.splice(e.index, 1)
    }
  }
</script>

<template>
  <view :class="{ 'file_card-box': isIdCard }" class="cb-file-picker">
    <uni-file-picker
      v-model="fileLists"
      :file-mediatype="props.type"
      :image-styles="imageStyles"
      :limit="props.limit"
      @select="onSelect"
      @delete="onDelete"
    >
      <!-- 身份证模式 -->
      <view v-if="isIdCard">
        <image
          v-if="props.isFront"
          src="/static/images/my-index/id-front.png"
          mode="widthFix"
          class="card-img"
        ></image>
        <image
          v-if="props.isBack"
          src="/static/images/my-index/id-opposite.png"
          mode="widthFix"
          class="card-img"
        ></image>
      </view>
      <!-- 图片上传 -->
      <view v-else class="img-box">
        <uni-icons type="plusempty" size="18" color="#00D993"></uni-icons>
        <text class="name">上传</text>
      </view>
    </uni-file-picker>
    <text v-if="isIdCard" class="bottom-text">
      身份证{{ props.isFront ? '人像面' : '国徽面' }}
    </text>
  </view>
</template>

<style lang="scss" scoped>
  .cb-file-picker {
    .card-img {
      width: 295rpx;
    }
    .bottom-text {
      margin-top: 16rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .img-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        font-style: normal;
        text-transform: none;
        color: #00d993;
      }
    }
  }

  .file_card-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
