<template>
  <div class="photo_wrap">
    <template  v-if="title.indexOf('责任险/货物') !== -1">
      <div class="photo_title custom-title">
        <span><span class="star">*</span>{{title}}</span>
        <van-radio-group @change="radioChange" v-model="form.isInsure" class="flexWrap">
          <van-radio :name="0">否</van-radio>
          <van-radio :name="1">是</van-radio>
        </van-radio-group>
      </div>
      <div class="photoWrap" v-if="inSure == 1">
          <van-uploader  :after-read="(file) => afterRead(file,'urlList')" class="customUploadMul" @click-upload="(event)=>clickUpload(event,'urlList')">
<!--            -->
<!--            :max-count="3"  v-model="fileList" multiple  :deletable="true" -->
            <template v-if="urlList.length > 0">
              <div v-for="(item, index) in urlList" :key="index" class="uploaded-item">
                <img class="photo_item" mode="widthFix" :src="item.replace(/http:\/\//g, 'https://')" />
              </div>
            </template>
            <template v-if="urlList.length < 3 && showFun()">
              <div class="tipWrap">
                <img class="photo_item" mode="widthFix" src="@/assets/authentication/carInfo_icon5.png"/>
                <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
                <span class="picNum">({{ urlList.length }}/3)</span>
              </div>
            </template>
          </van-uploader>
      </div>
    </template>
    <template v-else>
      <div class="photo_title">
        <span class="star">*</span>
        <span>{{title}}</span>
      </div>
      <div class="photo_img flex flex_between">
        <van-uploader v-if="leftUrl"  :after-read="(file) => afterRead(file,'leftImg')" class="customUpload"   @click-upload="(event)=>clickUpload(event,'leftImg')">
          <template v-if="form.leftImg">
            <img class="photo_item" mode="widthFix" :src="form.leftImg.replace(/http:\/\//g, 'https://')" />
          </template>
          <template v-else>
            <img class="photo_item"   mode="widthFix" :src="leftUrl" />
            <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
          </template>
        </van-uploader>
        <van-uploader v-if="rightUrl"  :after-read="(file) => afterRead(file,'rightImg')" class="customUpload"  @click-upload="(event)=>clickUpload(event,'rightImg')">
          <template v-if="form.rightImg">
            <img class="photo_item" mode="widthFix" :src="form.rightImg.replace(/http:\/\//g, 'https://')" />
          </template>
          <template v-else>
            <img class="photo_item" mode="widthFix" :src="rightUrl" />
            <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
          </template>
        </van-uploader>
      </div>
    </template>
  </div>
</template>

<script>
import {uploadImage} from "@/api/mine";
import { ImagePreview } from 'vant';

/*let baseUrl=''
if (window.location.href.includes('www.sinoassist.com')) {
  baseUrl = 'https://www.sinoassist.com'
} else {
  baseUrl = 'https://crm1.sino-assist.com'
}*/
export default {
    name: "photoItem",
    props: {
      title: {
        type: String,
      },
      leftUrl: {
        type: String,
        default: require('@/assets/authentication/person_header.png')
      },
      rightUrl: {
        type: String,
      },
      show: {

      },
      urlList: {
        type: Array,
        default: ()=>[]
      },
      inSure:{
        type:Number,
      }
    },
    data() {
      return {
        form: {
          leftImg: '',
          rightImg: '',
          urlList:[],
          isInsure:'',
        },
        options:[{value:0,name:'否'},{value:1,name:'是'}],
      }
    },
    mounted() {
      setTimeout(()=>{
        this.form.isInsure=this.inSure
        // this.form.isInsure=1
      },1500)
    },
    methods: {
      clickUpload(event,type){
        if (!this.showFun()) {
          let url=[]
          if (type=='leftImg'){
            url=[this.leftUrl?.replace(/http:\/\//g, 'https://')]
          }else if(type=='rightImg'){
            url= [this.rightUrl?.replace(/http:\/\//g, 'https://')]
          }else{
            url=this.urlList?.map(item => item?.replace(/http:\/\//g, 'https://'))
          }
           ImagePreview({
            images: url,
            closeable: true,
            showIndex:false
          });
          console.log(url)
          event.stopPropagation(); // 阻止事件冒泡
          event.preventDefault(); // 阻止默认上传行为（如果支持）
          return false; // 阻止后续逻辑
        }
        // 默认行为（允许上传）
      },
      async afterRead(file,type){ // 支持多文件上传
        const formData = new FormData();
        formData.append("file" , file.file);
        let res = await uploadImage(formData)
        if (type=='urlList'){
          console.log("this.urlList",this.urlList?.length)
          if(this.urlList?.length==3){
            const updatedList = [...this.urlList];
            updatedList[2] = res?.data?.replace(/http:\/\//g, 'https://');
            this.form.urlList = updatedList;
          }else{
            this.form.urlList=[res?.data?.replace(/http:\/\//g, 'https://'),...this.urlList]
          }
          const uniqueUrls =  this.form.urlList?.reduce((acc, url) => {
            if (!acc.includes(url)) {
              acc.push(url);
            }
            return acc;
          }, []);
          this.$emit(type, uniqueUrls)
        }else{
          this.form[type] = res.data
          this.$emit(type, this.form[type])
        }
      },
      radioChange(val){
        this.$emit('insureHandle',val)
        if(this.form.isInsure==0){
          this.form.urlList=[]
          this.$emit('urlList', this.form.urlList)
        }
      },
      showFun() {
        if( localStorage.getItem('infoVerify') == 8 || localStorage.getItem('infoVerify') == 12 ) {
          return false
        }
        return  true
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/common.scss";
  .customUpload{
    width: calc(50% - 3px);
    ::v-deep .van-uploader__input-wrapper{
      width: 100% !important;
    }
  }
  .customUploadMul{
    width: 100%;
    ::v-deep .van-uploader__input-wrapper{
      width: 100% !important;
      display: flex;
      flex-wrap: wrap;
     /* ::v-deep .van-uploader__preview{
        width: 100% !important;
      }*/
    }
    .uploaded-item,.tipWrap{
      width: calc(50% - 3px);
    }
    ::v-deep .van-uploader__preview{
      width: calc(50% - 3px);
      margin: 0 0 8px 0;
      .van-uploader__preview-image{
        width: 100% !important;
      }
    }
    ::v-deep .van-uploader__preview:nth-child(odd){
     margin-right: 5px !important;
    }
  }
  .photo_wrap {
    padding: 20px 12px 22px 17px;
    background: #FFFFFF;
    margin-bottom: 10px;
    .photo_title {
      font-size: 14px;
      padding-left: 10px;
      margin-bottom: 5px;
      .star {
        color: red;
        margin-right: 3px;
      }
    }
    .custom-title{
      display: flex;
      justify-content: space-between;
      .flexWrap{
        display:flex;
        ::v-deep .van-radio__icon{
          //width: 24px;
          transform: scale(0.8);
          transform-origin: center; /* 保持中心点不变 */
        }
      }
      .labelWrap{
        margin-left: 10px;
      }
      .center{
        align-items: center;
        justify-content: center;
      }
    }
    .photoWrap{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .tipWrap{
        position: relative;
        display: flex;
        flex-wrap: wrap;
      }
      .picNum{
        position: absolute;
        z-index: 111;
        color: #206FFF ;
        top: 3px;
        right: 3px;
        font-size: 11px;
      }
      div:nth-child(2n+1) {
        margin-right: 4px;
      }
      div {
        //width: calc(50% - 3px);
        position: relative;
        .photo_item {
          width: 100%;
          height: 95px !important;
        }
        .camera {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 35px;
          height: 34px;
        }
      }
    }
    .photo_img {
      width: 100%;
      div {
        width: calc(50% - 3px);
        position: relative;
        .photo_item {
          width: 100%;
          height: 95px !important;
        }
        .camera {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 35px;
          height: 34px;
        }
      }
    }
  }
</style>
<style>
.van-image-preview{
  z-index: 9999999999 !important;
}
</style>