<template>
  <van-uploader
      v-model="filesList"
      :after-read="handleFileRead"
      :before-delete="deleteHandle"
      @click-upload="clickUpload"
      :preview-size="103"
      accept="image "
      :max-count="multiple ? 6 : 1"
  >
    <div class="upload">
      <img class="icon" src="@/assets/secondHandCar/upload.png"/>
      <span class="text">{{ displayText }}</span>
    </div>
    <template v-if="text.includes('其他照片')" #preview-cover="{ index }">
      <div class="preview-cover van-ellipsis">{{ index + 1 }}/6</div>
    </template>
  </van-uploader>
</template>

<script>
import {unifiedOCRWithCompress, uploadImage} from "@/api/mine";

export default {
  name: "uploadCommon",
  props: {
    text: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    files: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      filesList: ''
    }
  },
  mounted() {
    this.filesList = this.files || []; // 确保 filesList 是数组
  },
  watch: {
    files: {
      immediate: true, // 立即执行一次
      handler(newVal) {
        this.filesList = newVal || []; // 同步更新 filesList
      },
    },
    filesList: {
      handler(newVal) {
        this.$emit("update:files", newVal);
      },
      deep: true, // 深度监听
    },
  },
  computed: {
    displayText() {
      if (this.text === "其他照片0/6") {
        return `其他照片 ${this.filesList.length}/${this.multiple ? 6 : 1}`;
      }
      return this.text;
    },
  },
  methods: {
    async deleteHandle(file, detail) {
      console.log("file, detail", file, detail);
      this.filesList = this.filesList.filter((item) => item !== file);
      console.log("this.filesList =", this.filesList)
      // 根据 text 的不同，通知父组件删除对应的数据
      if (this.text === "行驶证照片") {
        this.$emit("delete1"); // 通知父组件删除行驶证数据
      } else if (this.text === "车辆45度照") {
        this.$emit("delete2"); // 通知父组件删除车辆45度照数据
      } else {
        console.log("delete3", file)
        this.$emit("delete3", file, detail.index); // 通知父组件删除其他照片数据
      }
      return true;
    },
    clickUpload(){
      console.log("是否点击了上传照片组件",this.text)
    },
    async handleFileRead(file) {
      const formData = new FormData();
      console.log("file.file",file.file)
      if(!file.file){
        this.$toast('获取文件失败，请重新上传')
      }
      formData.append("file", file.file);
      let res = await uploadImage(formData);
      // 为文件添加唯一标识符
      file.uid = Date.now(); // 使用时间戳作为唯一标识符
      if (this.text == '行驶证照片') {
        // 行驶证识别
        let result = await unifiedOCRWithCompress({
          ocrType: 3,
          imageUrl: res.data,
          cardSide: 'FRONT'
        });
        let data = {url: res?.data, info: {...result?.data?.frontInfo}}
        this.$emit('success1', data)
      } else if (this.text == '车辆45度照') {
        let result = await unifiedOCRWithCompress({
          ocrType: 10,
          imageUrl: res.data,
          cardSide: 'FRONT'
        });
        let num = this.getVehicleLicense(result.data.color)
        let data = {url: res?.data, colorStr: result.data.color, colorStatus: num, plateType: result.data.number}
        this.$emit('success2', data)
      } else {
        this.$emit('success3', {url: res?.data, uid: file.uid})
      }
    },
    getVehicleLicense(color) {
      let vehicleLicense = ''
      if (color == '蓝') {
        vehicleLicense = 1
      } else if (color == '黄') {
        vehicleLicense = 2
      } else if (color == '临牌') {
        vehicleLicense = 4
      } else if (color.includes('绿')) {
        vehicleLicense = 3
      } else {
        vehicleLicense = 5
      }
      return vehicleLicense
    },
  }
}
</script>

<style scoped lang="scss">
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

::v-deep .van-uploader {
  margin-bottom: 5px;
}

.upload {
  position: relative;
  width: 103px;
  height: 70px;
  background: #F1F6FF;
  box-shadow: 0px 0px 2px 0px rgba(235, 235, 235, 0.38);
  border-radius: 4px;
  border: 1px solid #B8CBE9;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 14px;
  padding-bottom: 3px;

  .icon {
    width: 30px;
    height: 30px;
  }

  .text {
    width: 80px;
    background: #5A6FFF;
    border-radius: 7px;
    opacity: 0.9;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    color: #FFFFFF;
  }
}

::v-deep .van-uploader__preview {
  margin: 0 4px 4px 0;
}

::v-deep .van-uploader__input-wrapper {
  margin: 0 4px 4px 0;
}

::v-deep .van-uploader__preview-image {
  height: 70px !important;
  border-radius: 4px !important;
}

::v-deep .van-uploader__preview-delete {
  background-image: url('@/assets/secondHandCar/delete.png'); /* 替换为你的图片路径 */
  background-size: cover;
  background-color: transparent;
  border: none;
  width: 15px;
  height: 15px;
}

::v-deep .van-uploader__preview-delete-icon {
  display: none !important; /* 强制隐藏伪元素 */
}
</style>