<template>
  <view
    class="upload_content"
    :style="{
      borderTop: props.borderTop ? '1rpx solid #eee' : ''
    }"
  >
    <view class="id_card_title">上传身份证<text v-if="props?.required"> * </text></view>
    <view class="upload_body">
      <view>
        <view class="upload_item" @click="handleUpload(1)" :style="props?.styles">
          <view v-if="!frontImg?.url" class="upload_item_icon">
            <image  class="icon" src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFF5CRRFBGXGHGKK2D6Y0BBJ.png" mode="heightFix" />
            <view class="icon_plus">
              <uni-icons  type="plus-filled" :color="getStyleColorValueInfo()" size="40"></uni-icons>
            </view>
          </view>
            
          <image v-else class="showImg" :src="frontImg?.url" mode="heightFix" />
        </view>
        <view class="item_name">证件正面</view>
      </view>
      <view>
        <view class="upload_item" @click="handleUpload(2)" :style="props?.styles">
          <view v-if="!backImg?.url" class="upload_item_icon">
            <image  class="icon" src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFF5DCHQBN9J579AVEB537D6.png" mode="heightFix" />
            <view class="icon_plus">
              <uni-icons  type="plus-filled" :color="getStyleColorValueInfo()" size="40"></uni-icons>
            </view>
          </view>
          <image v-else class="showImg" :src="backImg?.url" mode="heightFix" />
        </view>
        <view class="item_name">证件反面</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import watermark from '@/common/libraries/watermark'
import { upload } from '@/common/libraries/upload'
import {getStyleColorValueInfo} from "@/common/libraries/getPageConfig"
import { onMounted, ref, watch, defineProps, defineEmits } from 'vue'
const frontImg = ref<any>({})
const backImg = ref<any>({})
const props = defineProps([
  'valueFrontModel',
  'valueBackModel',
  'size',
  'display',
  'borderTop',
  'length',
  'required',
  'mediaType',
  'labelTitle',
  'count',
  'styles',
  'hasCover',
  'iconName',
  'iconSize'
])
const emit = defineEmits(['update:valueFrontModel', 'update:valueBackModel'])
const handleUpload = async (type: number) => {
  const res: any = await upload(1, 4, props?.mediaType || ['image'])
  console.log(res, 'res32')
  if (type === 1) {
    frontImg.value = res[0]
    emit('update:valueFrontModel', res)
  }
  if (type === 2) {
    backImg.value = res[0]
    emit('update:valueBackModel', res)
  }
}



watch(
  () => props?.valueFrontModel?.[0]?.uid,
  () => {
    frontImg.value = props?.valueFrontModel?.[0] || {}
  },
  {
    deep: true
  }
)

watch(
  () => props?.valueBackModel?.[0]?.uid,
  () => {
    backImg.value = props?.valueBackModel?.[0] || {}
  },
  {
    deep: true
  }
)

onMounted(() => {
  if (props?.valueBackModel && props?.valueBackModel?.length) {
    backImg.value = props?.valueBackModel?.[0] || {}
  }
  if (props?.valueFrontModel && props?.valueFrontModel?.length) {
    frontImg.value = props?.valueFrontModel?.[0] || {}
  }
})

const onPreviewMedia = (url?: string) => {
  console.log(url, 'url1')
  if (url) {
    uni.showLoading({
      title: '获取图片中...',
      mask: true
    })
    console.log(url, 'url2')
    uni.downloadFile({
      url: url,
      success: res => {
        const imagePath = res.tempFilePath // 下载成功的图片路径
        console.log(imagePath, 'imagePath')
        watermark.addWatermark(imagePath, '仅用于内部查看，请勿外传')
      },
      fail: err => {
        uni.showToast({
          title: '获取失败',
          duration: 1000
        })
        console.error('下载图片失败:', err)
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.upload_content {
  padding: 0 0 10rpx 0;
  .id_card_title {
    padding: 30rpx 0 20rpx 0;
    font-size: 29rpx;
    color: #333;
    text {
      color: #f00;
    }
  }
}
.upload_body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0; // 可选，增加内边距以便更好地显示滚动条
  text-align: center;
  .no_data {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120rpx;
    font-size: 25rpx;
    color: #666;
    background-color: #f8f8f8;
    border-radius: 6rpx;
  }
  .item_name {
    padding: 20rpx 0 0 0;
    font-size: 28rpx;
    color: #333;
  }
}
.upload_item {
  position: relative;
  flex-shrink: 0; // 防止子元素缩小
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330rpx;
  height: 200rpx;
  background-color: #f3f3f3;
  border: 1px solid #f3f3f3;
  border-radius: 10rpx;
  overflow: hidden;
  .upload_item_icon{
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon_plus{
      position: absolute;
      top: 0;
      left:0;
      right:0;
      bottom:0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  image.icon {
    height: 134rpx;
  }
  image.showImg {
    width: 100%;
    height: 100%;
  }
}
</style>
