<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>
<!--        <radio-group @change="radioChange"  class="flexWrap">
          <label class="flexWrap labelWrap" v-for="(item, index) in options" :key="item.value">
            <div class="flexWrap center"><radio :value="item.value" :checked="index == inSure" />{{item.name}}</div>
          </label>
        </radio-group>-->
      </div>
      <div class="photoWrap" v-if="inSure == 1">
        <template v-if="urlList.length>0">
          <div v-for="(item,index) in urlList" :key="index" @click="chooseHandler('urlList',index)">
            <img class="photo_item" mode="widthFix" :src="item.replace(/http:\/\//g, 'https://')" />
          </div>
        </template>
        <div v-if="urlList.length < 3" @click="chooseHandler('urlList')" 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>
      </div>
    </template>
    <template v-else>
      <div class="photo_title">
        <span class="star">*</span>
        <span>{{title}}</span>
      </div>
      <div class="photo_img flex flex_between">
        <div @click="chooseHandler('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.replace(/http:\/\//g, 'https://')" />
            <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
          </template>
          <div></div>
        </div>
        <div v-if="rightUrl" @click="chooseHandler('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.replace(/http:\/\//g, 'https://')" />
            <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
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,
      },
      inSure:{
        type:String || Number,
      }
    },
    data() {
      return {
        form: {
          leftImg: '',
          rightImg: '',
          urlList:[],
          isInsure:-1,
        },
        options:[{value:0,name:'否'},{value:1,name:'是'}],
      }
    },
    mounted() {
      console.log("inSure",this.inSure)
    },
    methods: {
      radioChange(e){
        // this.form.isInsure=e?.detail?.value
        if(this.form.isInsure==0){
          this.form.urlList=[]
          this.$emit('urlList', this.form.urlList)
        }
        this.$emit('insureHandle',e?.detail?.value)
      },
      showFun() {
        if( localStorage.getItem('infoVerify') == 8 || localStorage.getItem('infoVerify') == 12 ) {
          return false
        }
        return  true
      },
      async chooseHandler(type,i) {
        console.log("type,i",type,i,baseUrl)
        return
        // #ifdef MP-WEIXIN
        // await this.weChatImage(type,i)
        // #endif
        // #ifndef MP-WEIXIN
        // await this.commonImage(type,i)
        // #endif

      },
   /*   commonImage(type,index) {
        uni.chooseImage({
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({
              url: baseUrl + '/order/uploadImage', //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: 'file',
              success: async (uploadFileRes) => {
                if (type=='urlList' && (index==0 || index)){
                  this.$set( this.form.urlList,index,JSON.parse(uploadFileRes.data).data)
                } else if(type=='urlList'){
                  this.form[type].push(JSON.parse(uploadFileRes.data).data)
                }else {
                  this.form[type] = JSON.parse(uploadFileRes.data).data
                }
                this.$emit(type, this.form[type])
              },
              fail: () => {
                  this.$toast('上传失败')
              }
            });
          },
          fail: (res) => {
            console.log('选择照片出错', res)
            //   this.$toast('选择照片出错，请重试')
          }
        })
      },
      weChatImage(type,index) {
        uni.chooseMedia({
          sourceType: ['album', 'camera'],
          mediaType: ['image'],
          count: 1,
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFiles[0].tempFilePath;
            uni.uploadFile({
              url: baseUrl + '/order/uploadImage', //仅为示例，非真实的接口地址
              filePath: tempFilePaths,
              name: 'file',
              success: async (uploadFileRes) => {
                if (type=='urlList' && (index==0 || index)){
                  this.$set( this.form.urlList,index,JSON.parse(uploadFileRes.data).data)
                }else if(type=='urlList'){
                  this.form[type].push(JSON.parse(uploadFileRes.data).data)
                }else{
                  this.form[type] = JSON.parse(uploadFileRes.data).data
                }
                this.$emit(type, this.form[type])
              },
              fail: () => {
                  this.$toast('上传失败')
              }
            });
          },
          fail: (res) => {
            console.log('选择照片出错', res)
            //   this.$toast('选择照片出错，请重试')
          }
        })
      }
   */
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/common.scss";
  .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>
