<template>
  <view class="upload-pic">
    <view class="pic-title">{{ title }}</view>
    <view class="pic-wrapper" :style ="{'justify-content' :type === 'invoiceImg' ? 'center': '' }">
      <view class="left" @tap="btnShow = true">
        <!-- 操作面板 -->
        <view v-if="type === 'invoiceImg' && !img" :class="{'isInvoice' : type === 'invoiceImg' }">点击上传</view>
        <view class="upload-btn" :class="{ active: btnShow }">
          <text @tap.stop="updateImg" class="upload-img">{{
            img ? '修改' : '上传'
          }}</text>
          <text @tap.stop="deleteImg" class="delete" v-if="img">删 除</text>
          <text @tap.stop="btnShow = false" class="upload-cancel">取 消</text>
        </view>
        <!-- 获取到的图片 -->
        <img class="img" :src="img" v-if="img" />
        <!-- 正面 -->
        <img
          src="https://image.jxc4.com/image/d40844356c5d03975cca9f9bff6e3aeb.png"
          v-if="type === 'idCardFront' && !img"
        />
        <!-- 背面 -->
        <img
          class="img"
          src="https://image.jxc4.com/image/388f6e26316128c33591f6b1ce6aaed0.png"
          v-if="type === 'idCardBack' && !img"
        />
        <!-- 手持 -->
        <img
          class="img"
          src="https://image.jxc4.com/image/1f173d964970abb13921431a2c2cde02.png"
          v-if="type === 'idCardHand' && !img"
        />
        <!-- 营业执照 -->
        <img
          class="img"
          src="https://image.jxc4.com/image/06ba0d91dd8bae128776358af0e3b0b1.png"
          v-if="type === 'licence' && !img"
        />
        <img
          class="img"
          src="https://image.jxc4.com/image/ab82b2445366d3579b7064987787f3b6.png"
          v-if="type === 'licence2Image' && !img"
        />
      </view>
      <view
        class="right"
        v-if="type !== 'invoiceImg'"
        :class="{
          'card-front': type === 'idCardFront',
          'card-back': type === 'idCardBack',
          'card-hand': type === 'idCardHand',
          licence: type === 'licence',
          licence2: type === 'licence2Image',
        }"
      ></view>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
/**
 * @dsec 京西上传图片
 * @param {title}-title 文字提示
 * @param {type}-上传类型
 * @param {img}-回显图片地址
 * @return {imgChange}-type: delet 删除图片 type: upload：上传图片
 */
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

/**
 * props
 */
interface UploadImgType {
  title: string
  type: string
  img: string
}
defineProps<UploadImgType>()

/**
 * emit
 */
interface EmitType {
  img: string
  type: string
}
const emit = defineEmits<{
  (e: 'imgChange', data: EmitType): void
}>()

/**
 * 遮罩层
 */
const btnShow = ref<boolean>(false)
onShow(() => {
  btnShow.value = false
})

/**
 * 删除图片
 */
function deleteImg() {
  uni.jxConfirm({
    title: '提示',
    content: '确定要删除此图片吗',
    success: () => {
      emit('imgChange', { img: '', type: 'delet' })
      btnShow.value = false
    },
  })
}

/**
 * 修改图片
 */
function updateImg() {
  uni.jxConfirm({
    title: '相机/相册权限说明',
    content: '便于您使用该功能拍照上传您的照片/图片用于同步第三方平台信息等场景中使用相机或读取相册文件内容',
    success() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original'],
        sourceType: ['album', 'camera'],
        success(res) {
          emit('imgChange', { img: res.tempFilePaths[0], type: 'upload' })
          btnShow.value = false
        },
      })
    }
  })
}
</script>
  
<style lang="scss" scoped>
.isInvoice {
  width: 340rpx;
  height: 255rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-pic {
  padding: 20rpx;
  .pic-title {
    font-size: 34rpx;
    font-weight: 400;
    padding-bottom: 20rpx;
  }
  .pic-wrapper {
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      width: 340rpx;
      height: 255rpx;
    }
    .left {
      border: 1rpx dotted rgba(204, 204, 204, 1);
      overflow: hidden;
      position: relative;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      border: 1rpx solid rgba(204, 204, 204, 1);
    }
  }
  .upload-btn {
    position: absolute;
    z-index: 999;
    background: rgba(black, 0.1);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-out;
    transform: scale(0);
  }
  .active {
    transform: scale(1);
    background: rgba(black, 0.5);
  }
  .upload-img,
  .upload-cancel,
  .delete {
    color: white;
    font-size: 36rpx;
    padding: 10rpx 0;
    width: 100%;
    text-align: center;
    font-weight: 500;
  }

  .card-front {
    background: url(https://image.jxc4.com/3a286c49546a99e0f407d16de94d95c4.png)
      center center no-repeat;
    background-size: cover;
  }

  .card-back {
    background: url(https://image.jxc4.com/52f76d4e63391befba9e16869ac1242c.png)
      center center no-repeat;
    background-size: cover;
  }

  .card-hand {
    background: url(https://image.jxc4.com/24231d9fbe5b7c1479bd3c7f82e08835.png)
      center center no-repeat;
    background-size: cover;
  }

  .licence {
    background: url(https://image.jxc4.com/6ba62da13b7e71134af379b8e177a52a.png)
      center center no-repeat;
    background-size: cover;
  }

  .licence2 {
    background: url(https://image.jxc4.com/a8488f4de2066bf08028b5c562927916.png)
      center center no-repeat;
    background-size: cover;
  }

  .upload-wrapper {
    height: calc(100vh - 300rpx);
  }
}
</style>
  