<template>
  <div class="wrap">
    <div class="error_bar" v-if="errorMsg">{{ errorMsg }}</div>
    <div class="top_banner">
      <img src="@/assets/supplier/topBg.png" alt="">
    </div>
    <van-form @submit="applyAdd">
      <div class="content_wrap">
        <div class="credentials_info">
          <img class="title1" src="@/assets/supplier/title1.png" alt="">
          <div class="credentials_wrap">
            <div class="credentials_item">
              <div class="credentials_title">1.法人身份证人像页</div>
              <van-uploader
                accept="image/*"
                v-model="idFrontPhotoList"
                :after-read="idFrontPhotoHandler"
                :max-size="5 * 1024 * 1024"
                max-count="1">
                <div class="custom-background">
                  <img src="@/assets/supplier/idCardPerson.png" alt="">
                </div>
              </van-uploader>
            </div>
            <div class="credentials_item ml2">
              <div class="credentials_title">2.法人身份证国徽页</div>
              <van-uploader
                accept="image/*"
                v-model="idBackPhotoList"
                :after-read="idBackPhotoHandler"
                :max-size="5 * 1024 * 1024"
                max-count="1">
                <div class="custom-background">
                  <img src="@/assets/supplier/idCardBack.png" alt="">
                </div>
              </van-uploader>
            </div>
            <div class="credentials_item ml2">
              <div class="credentials_title">3.营业执照</div>
              <van-uploader
                accept="image/*"
                v-model="companyPhotoList"
                :after-read="companyPhotoHandler"
                :max-size="5 * 1024 * 1024"
                max-count="1">
                <div class="custom-background">
                  <img src="@/assets/supplier/companyPhoto.png" alt="">
                </div>
              </van-uploader>
            </div>
            <div class="credentials_item">
              <div class="credentials_title">4.开户许可证/基本存款账户信息</div>
              <van-uploader
                  accept="image/*"
                  v-model="licensePhotoList"
                  :after-read="licensePhotoHandler"
                  :max-size="5 * 1024 * 1024"
                  max-count="1">
                <div class="custom-background">
                  <img src="@/assets/supplier/licensePhoto.png" alt="">
                </div>
              </van-uploader>
            </div>
          </div>
        </div>
        <div class="company_info">
          <img class="title2" src="@/assets/supplier/title2.png" alt="">
          <div class="company_wrap">
              <van-field :border="true" readonly v-model="form.name" class="required" name="name" label="服务商名称" placeholder="请输入"  :rules="[{ required: true, message: '请输入服务商名称' }]" />
              <van-field :border="true" readonly v-model="form.areaName" class="required" name="areaName" label="注册地址" placeholder="请输入"  :rules="[{ required: true, message: '请输入注册地址' }]" />
              <van-field :border="true" readonly v-model="form.legalName" class="required" name="legalName" label="法人姓名" placeholder="请输入"  :rules="[{ required: true, message: '请输入法人姓名' }]" />
              <van-field :border="true" v-model="form.linkName" class="required" name="linkName" label="联系人姓名" placeholder="请输入"  :rules="[{ required: true, message: '请输入联系人姓名' }]" />
              <van-field :border="true" v-model="form.linkPhone" class="required" name="linkPhone" label="联系电话" placeholder="请输入"  :rules="phoneVerify" />
              <van-field :border="true" v-model="form.linkEmail" class="required" name="linkEmail" label="邮箱" placeholder="请输入"  :rules="emailVerify" />
              <van-field :border="true" class="required" name="serviceType" label="服务能力">
                <template #input>
                  <el-tree
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    :data="bigServiceList"
                    :props="defaultProps">
                  </el-tree>
                </template>
              </van-field>
              <van-field :border="true" v-model="form.trailCount" type="digit" class="required" name="trailCount" label="拖车数量" placeholder="请输入" :rules="countVerify" />
              <van-field :border="true" v-model="form.minorCount" type="digit" class="required" name="minorCount" label="抢修车数量" placeholder="请输入" :rules="countVerify" />
              <van-field :border="true" class="required" label="服务区域" placeholder="请选择">
                <template #input>
                  <el-cascader
                    v-model="form.serviceAreaCode"
                    :options="areaList"
                    :props="areaProps"
                    ref="areaCascader"
                    popper-class="responsive-cascader"
                    :popper-append-to-body="false"
                    filterable
                    clearable></el-cascader>
                </template>
              </van-field>
<!--            <div class="wei_code_wrap" v-if="form.name && !id">
              <div class="wei_title">请先添加企业微信，保证申请流程正常进行。</div>
              <div class="wei_code_bg">
                <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
              </div>
            </div>-->
          </div>
        </div>
      </div>
      <div class="btn_wrap">
        <van-button class="btn" block type="info" :native-type="'submit'">提交申请</van-button>
      </div>
    </van-form>
    <van-popup
      v-model="areaShow"
      position="bottom"
    >
      <van-area title="服务区域" :area-list="areaList" :columns-num="3"  closeable="true" :value="form.areaCode ? String(form.areaCode) : ''"
                @cancel="areaShow = false" @confirm="confirmHandle"/>
    </van-popup>
  </div>
</template>

<script>
  import {leftCopy} from  "@/utils/common"
  import QRCode from 'qrcode'
  import { uploadImage, ocrHandler, unifiedOCRWithCompress, getArea, saveSupplier, getSupplierInfo, getOrCodeInfo, getContactQrCodeResult } from "@/api/mine"
  import {myMixins} from "@/utils/myMixins"
  import {Dialog} from "vant";
  export default {
    name: "supplierAdd",
    mixins:[myMixins],
    data() {
      return {
        clickFlag: true,
        errorMsg: '',
        phoneVerify: [{ required: true, message: '请输入联系电话' }, { validator: value => { return /^1[3456789]\d{9}$/.test(value) }, message: '联系电话格式不正确' }],
        emailVerify: [{ required: true, message: '请输入邮箱' }, { validator: value => { return  /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(value) }, message: '邮箱格式不正确' }],
        countVerify: [{ required: true, message: '请输入数量' }, { validator: value => /^\d+$/.test(value) && Number(value) >= 0, message: '请输入大于等于0的整数' }],
        id:'', //车辆Id
        idBackPhotoList: [],
        idBackPhoto: '',
        idFrontPhotoList: [],
        idFrontPhoto: '',
        companyPhotoList: [],
        licensePhotoList: [],
        companyPhoto: '',
        licensePhoto:'',
        form: {
          name: '',
          legalName: '',
          areaName: '',
          linkName: '',
          linkPhone: '',
          serviceType: '',
          trailCount: '',
          minorCount: '',
          serviceAreaCode: [],
          linkEmail:'',
          person:'',
          accountInfoDTO:{
            dutyParagraph:'',
            accountNumber:'',
            accountName:'',
            accountType:'',
            invoiceType:'',
            settlementType:'',
            shouldRate:'',
            realRate:'',
            unitName:'',
            bankNo:'',
            billingPhone:'',
            billingAddress:'',
            billHead:'',
            companyType:'',
          }
        },
        qrCodeUrl: '',
        qrCode: '',
        areaShow: false,
        areaList: [],
        supplierServiceList: [],
        bigServiceList: [{
          id: 1002,
          title: '拖车服务'
        }, {
          id: 1003,
          title: '抢修服务'
        }, {
          id: 1004,
          title: '困境救援'
        }],
        defaultProps: {
          children: 'children',
          label: 'title',
        },
        areaProps: { multiple: true, checkStrictly: true,  value: 'id',label: 'title', emitPath: false},
        configId: '',
        wechatId: '',
      }
    },
    async mounted() {
      const urlParams = new URLSearchParams(window.location.search);
      const lastRoute = localStorage.getItem('lastRoute');
      this.id = this.$route.query.id || urlParams.get('id');
      if (lastRoute && !this.id) {
        const { name, query } = JSON.parse(lastRoute);
        this.$router.replace({ name, query });
        return;
      }

      await this.getAreaTree();
      if(this.id) {
        await this.getInfoHandler();
      }

      // await this.getSupplierServiceTree();
    },
    methods: {
      async QrCodeHandler() {
        await this.QrCodeInfo()
        await this.getQrCode();
      },
      async QrCodeInfo() {
        let res = await getOrCodeInfo({
          name: this.form.name
        });
        this.configId = res?.configId;
        this.qrCode = res?.qrCode
      },
      async getInfoHandler() {
        let res = await getSupplierInfo({
          id: this.id
        });
        let _data = res?.data
        leftCopy(this.form, {..._data})
        this.idFrontPhoto = _data?.idCardFrontUrl;
        this.idBackPhoto = _data?.idCardBackUrl;
        this.companyPhoto = _data?.businessLicense;
        this.licensePhoto = _data?.accountUrl;
        this.wechatId = _data?.wechatId;
        this.form.person = _data.legalName;
        if( _data.failReason ) {
          this.showError(_data.failReason)
        }
        if(this.idFrontPhoto) {
          this.idFrontPhotoList = [{ url : this.idFrontPhoto }];
        }
        if(this.idBackPhoto) {
          this.idBackPhotoList = [{ url : this.idBackPhoto }];
        }
        if(this.companyPhoto) {
          this.companyPhotoList = [{ url : this.companyPhoto }];
        }
        if(this.licensePhoto){
          this.licensePhotoList= [{ url : this.licensePhoto }];
        }
        if( _data.service ) {
          this.$refs.tree.setCheckedKeys(_data.service.split(','))
        }
        if(_data?.serviceAreaCode) {
          this.$set(this.form, 'serviceAreaCode', _data?.serviceAreaCode.split(',').map(item => Number(item)));
        }
      },
      showError(msg) {
        this.errorMsg = msg;
      },
      async applyAdd() {
        this.errorMsg = '';
        if( !this.idFrontPhoto ) {
          this.showError('法人身份证人像页未上传')
          return
        }
        if( !this.idBackPhoto ) {
          this.showError('法人身份证国徽页未上传')
          return
        }
        if( !this.companyPhoto ) {
          this.showError('营业执照未上传')
          return
        }
        if(this.form.person != this.form.legalName){
          this.showError('身份证法人姓名和营业执照法人不一致')
          return
        }
        if( !this.licensePhoto ) {
          this.showError('开户许可证未上传')
          return
        }
        if( !(this.$refs.tree.getCheckedKeys().length > 0) ) {
          this.showError('服务能力不能为空')
          return
        }
        if( !(this.form.serviceAreaCode.length > 0) ) {
          this.showError('服务区域不能为空')
          return
        }
        if( this.$refs.tree.getCheckedKeys().length > 0 ) {
          let _node = this.$refs.areaCascader.getCheckedNodes();
          let checkArr = [];
          _node.map(item => { checkArr.push(item.data.id) });
          const payload = {
            id: this.id,
            ...this.form,
            accountInfoJson: JSON.stringify(this.form.accountInfoDTO),
            accountInfoDTO: {},
            idCardFrontUrl: this.idFrontPhoto,
            idCardBackUrl: this.idBackPhoto,
            businessLicense: this.companyPhoto,
            accountUrl: this.licensePhoto,
            service: this.$refs.tree.getCheckedKeys().join(','),
            serviceAreaCode: checkArr.join(','),
            wechatId: this.wechatId,
          };
          localStorage.setItem('supplierAddForm', JSON.stringify(payload));
          this.goPage('addWechat', { potentialFlag: 1 });
        }
      },
      async QrCodeResult() {    //获取添加企微结果
        let res = await getContactQrCodeResult({
          configId: this.configId
        });
        this.wechatId = res?.data?.wechatId
      },
      async saveHandler() {
        if( this.clickFlag ) {
          try {
            this.clickFlag = false
            let _node = this.$refs.areaCascader.getCheckedNodes();
            let checkArr = [];
            _node.map(item => {
              checkArr.push(item.data.id)
            })
            let res = await saveSupplier({
              id: this.id,
              ...this.form,
              accountInfoJson:JSON.stringify(this.form.accountInfoDTO),
              accountInfoDTO:{},
              idCardFrontUrl: this.idFrontPhoto,
              idCardBackUrl: this.idBackPhoto,
              businessLicense: this.companyPhoto,
              accountUrl:this.licensePhoto,
              service: this.$refs.tree.getCheckedKeys().join(',') ,
              serviceAreaCode: checkArr.join(','),
            });
            console.log('rererere', res)
            if( res?.noToast ) {    // 服务商已存在
              this.showError('当前服务商已存在')
              if( res?.code != 0 ) {
                Dialog.alert({
                  title: '提示',
                  message: "该服务商已存在，查看信息"
                }).then(async () => {
                  const target = { name: 'supplierAddResult', query: { id: res?.code } };
                  localStorage.setItem('lastRoute', JSON.stringify(target));
                  this.goPage('supplierAddResult', { id : res?.code })
                  setTimeout(() => {
                    this.clickFlag = true
                  }, 1000)
                });
              }
            } else {
              Dialog.alert({
                title: '提示',
                message: "操作成功"
              }).then(async () => {
                const target = { name: 'supplierAddResult', query: { id: res?.data } };
                localStorage.setItem('lastRoute', JSON.stringify(target));
                this.goPage('supplierAddResult', { id : res?.data })
                setTimeout(() => {
                  this.clickFlag = true
                }, 1000)
              });
            }
          } catch (e) {
            this.showError(e)
          } finally {
            setTimeout(() => {
              this.clickFlag = true
            }, 1000)
          }
        }
      },
      async getAreaTree() {
        let res = await getArea();
        let result = res?.data
        result?.map(item=>{
          if( item.parentId == 0 ) {
            this.$set(item , 'disabled' ,true)
          } else {
            this.$set(item , 'disabled' ,false)
          }
        })
        this.areaList = result;
      },
      /*async getSupplierServiceTree(){
        let res = await supplierServicePartTree({
          serviceTypes: '1002,1003,1004',
          treeType: 2
        });
        this.supplierServiceList=res.data
        this.bigServiceList = [];
        res.data.map(item => {
          let obj = {...item, children: null}
          this.bigServiceList.push(obj)
        })
      },*/
      confirmHandle(val){
        this.region=[]
        val?.forEach(item => this.region.push(item.name))
        let code=[]
        val?.forEach(item => code.push(item.code))
        this.form.areaCode=code[code.length - 1]
        this.areaShow=false
      },
      async getQrCode() {
        try {
          this.qrCodeUrl = await QRCode.toDataURL(this.qrCode, {
            width: 150,
            margin: 2,
            color: {
              dark: '#000000',
              light: '#FFFFFF'
            },
          })
        } catch (error) {
          console.error('生成二维码失败:', error)
        }
      },
      async idBackPhotoHandler(file) {
        const formData = new FormData();
        formData.append("file" , file.file);
        let res = await uploadImage(formData);
        this.idBackPhoto = res.data
      },
      async idFrontPhotoHandler(file) {
        const formData = new FormData();
        formData.append("file" , file.file);
        let res = await uploadImage(formData);
        this.idFrontPhoto = res.data;
        await this.idCardOcrHandler();
      },
      async idCardOcrHandler() {    // 身份证正面 ocr识别
        this.form.legalName = '';
        let res = await ocrHandler({
          ocrType: 1,
          imageUrl: this.idFrontPhoto,
          cardSide: 'FRONT'
        })
        // 身份证法人名称
        this.form.legalName = res?.data?.name
      },
      async companyPhotoHandler(file) {
        const formData = new FormData();
        formData.append("file" , file.file);
        let res = await uploadImage(formData);
        this.companyPhoto = res.data
        await this.companyOcrHandler()
      },
      async companyOcrHandler() {    // 营业照 ocr识别
        this.form.name = '';
        this.form.areaName = '';
        let res = await unifiedOCRWithCompress({
          ocrType: 7,
          imageUrl: this.companyPhoto,
          cardSide: 'FRONT'
        })
        this.form.name = res?.data?.name;
        this.form.areaName = res?.data?.address
        this.form.accountInfoDTO.dutyParagraph=res?.data?.regNum
        this.form.accountInfoDTO.unitName = res?.data?.name
        this.form.accountInfoDTO.companyType=res?.data?.type
        // 营业执照法人名称
        this.form.person = res?.data?.person
        // await this.QrCodeHandler();
      },
      async licensePhotoHandler(file){// 开户许可证
        const formData = new FormData();
        formData.append("file" , file.file);
        let res = await uploadImage(formData);
        this.licensePhoto = res.data
        await this.licenseOcrHandler()
      },
      async licenseOcrHandler(){// 开户许可证ocr识别
        let res = await ocrHandler({
          ocrType: 15,
          imageUrl: this.licensePhoto,
        })
        this.form.accountInfoDTO.accountNumber=res?.data?.accountNumber || ''
        this.form.accountInfoDTO.accountName = res?.data?.accountBank || ''
      },
    },
    computed: {
      regionText() {
        return this.region.length ? `${this.region[0]}/${this.region[1]}/${this.region[2]}` : '请选择所在地区';
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "@/styles/mixin.scss";
  @import "@/styles/common.scss";
  .wrap{
    @include wh(100%,100%);
    box-sizing: border-box;
    padding-bottom: 100px;
    overflow-y: auto;
  }
  .error_bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #e53935;
    color: #ffffff;
    font-size: 14px;
    padding: 10px 16px;
    text-align: center;
    line-height: 1.5;
  }
.top_banner {
  width: 100%;
  img {
    width: 100%;
    height: 169px;
  }
}
.content_wrap {
  padding: 0 20px;
}
.credentials_info {
  //height: 170px;
}
.credentials_wrap {
  display: flex;
  width: 100%;
  margin-top: 10px;
  flex-wrap: wrap;
  .credentials_item {
    width: 32%;
    text-align: center;
    .credentials_title {
      font-size: 12px;
      color: #4A4A4A;
      padding: 10px 0;
    }
    .custom-background img {
      width: 97px;
      height: 64px;
    }
  }
  .ml2 {
    margin-left: 2%;
  }
}
::v-deep .van-uploader__preview-image {
  width: 97px;
  height: 64px;
}
.title1 {
  width: 106px;
  height: 19px;
  margin-top: 25px;
}
.title2 {
  width: 90px;
  height: 18px;
  margin-top: 25px;
  margin-bottom: 10px;
}
.van-cell.required::before{
  content: "＊";
  position: absolute;
  color: #F00;
  left: 0px;
  top: .25rem;
  font-size: .3rem;
}
  .wei_code_wrap {
    margin-top: 10px;
    .wei_title {
      font-size: 15px;
      color: #FF553B;
      text-align: center;
    }
    .wei_code_bg {
      width: 163px;
      height: 173px;
      background-image: url("~@/assets/supplier/weiCodeBg.png");
      background-size: 100% 100%;
      margin: 8px auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .btn_wrap {
    width: 100%;
    padding: 15px 0;
    position: fixed;
    bottom: 0;
    background: #F7F7F9;
    box-shadow: 0px -7px 24px 0px rgba(0, 0, 0, 0.11);
    z-index: 10000 !important;
    .btn {
      width: calc(100% - 80px);
      margin-left: 40px;
      height: 46px;
      background: #0E76F4;
      border-radius: 5px;
      font-size: 15px;
      color: #FFFFFF;
      text-align: center;
      line-height: 46px;
    }
  }
  /*::v-deep .el-cascader {
    width: 100% !important;
  }

  ::v-deep .el-input__inner {
    width: 100% !important;
    border: none !important;
    padding-left: 0 !important;
    background: transparent !important;
  }

  ::v-deep .el-input {
    width: 100% !important;
  }

  ::v-deep .el-input__suffix {
    right: 0 !important;
  }*/
</style>
<style>
  .responsive-cascader .el-cascader-menu {
    min-width: 100px !important;
  }
  .responsive-cascader .el-cascader-panel {
    font-size: 12px !important;
  }
  .responsive-cascader .el-cascader-node {
    padding-left: 5px !important;
    padding-right: 4px !important;
  }
 /* !* 级联选择器下拉框样式 *!
  .responsive-cascader {
    width: 90vw !important;
    max-width: 400px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .responsive-cascader .el-cascader-panel {
    display: flex !important;
    width: 100% !important;
    max-height: 60vh !important;
  }



  .responsive-cascader .el-cascader-node {
    padding: 12px 16px !important;
    font-size: 12px !important;
    height: 20px !important;
    !*min-height: 44px !important;*!
    display: flex !important;
    align-items: center !important;
  }

  .responsive-cascader .el-cascader-node__label {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
  }

  !* 移动端触摸优化 *!
  .responsive-cascader .el-cascader-node {
    padding: 6px 6px !important;
  }

  !* 选中状态 *!
  .responsive-cascader .el-cascader-node.in-active-path,
  .responsive-cascader .el-cascader-node.is-active {
    color: #1989fa !important;
    background-color: #f2f8ff !important;
  }

  !* 移动端适配 *!
  @media (max-width: 768px) {
    .responsive-cascader {
      width: 95vw !important;
      max-width: none !important;
    }

    .responsive-cascader .el-cascader-menu {
      width: 33.33% !important;
      flex: none !important;
    }

    .responsive-cascader .el-cascader-node__label {
      font-size: 13px !important;
    }
  }*/


</style>
