<template>
<div class="wrap vehicleAdd">
  <div class="navBar">
    <van-nav-bar
        :title="id ? '修改车辆信息' : '添加车辆'"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="back"
    />
  </div>
  <div class="addContentWrap">
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>行驶证首页</span>
    </div>
    <van-uploader
      v-model="vehicleLicenseFrontList"
      :after-read="vehicleLicenseFrontHandler"
      @oversize="onOversize"
      :max-size="5 * 1024 * 1024"
      max-count="1"
      :preview-size="54"
      accept="image "
    />
  </div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>行驶证副页</span>
    </div>
    <van-uploader
      v-model="vehicleLicenseBackList"
      :after-read="vehicleLicenseBackHandler"
      @oversize="onOversize"
      :max-size="5 * 1024 * 1024"
      max-count="1"
      :preview-size="54"
      accept="image "
    />
  </div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>行驶证车辆照片页</span>
    </div>
    <van-uploader
      v-model="vehicleLicenseCarPhotoList"
      :after-read="vehicleLicenseCarHandler"
      @oversize="onOversize"
      :max-size="5 * 1024 * 1024"
      max-count="1"
      :preview-size="54"
      accept="image "
    />
  </div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>车头照</span>
    </div>
    <van-uploader
      v-model="vehicleFrontPhotoList"
      :after-read="vehicleFrontPhotoHandler"
      @oversize="onOversize"
      :max-size="5 * 1024 * 1024"
      max-count="1"
      :preview-size="54"
      accept="image "
    />
  </div>

  <cell-group label="车牌号" placeholder="车牌号" disabled v-model="carNum" />
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>车辆类别</span>
    </div>
<!--
    <select
        id="mySelect"
        class="mySelect"
        v-model="selectedOption"
        multiple
    >
      <option
          v-for="item in typeList"
          :key="item"
          :value="item"
          :disabled="isOptionDisabled(item)"
      >
        {{ item }}
      </option>
    </select>
-->
    <el-select
        multiple
        :multiple-limit="isMultiple ? 2 : 1"
        v-model="selectedOption"
        :disabled="vehicleInfoDisabled"
        value-key="name"
        class="elSelect"
        collapse-tags="collapse-tags"
        placeholder="请选择"  style="width: 55%"
    >
      <el-option
          v-for="item in vehicleTypes"
          :key="item.name"
          :label="item.name"
          :value="item.value"
          :disabled="!item.disabled ? false : true"
      >
      </el-option>
    </el-select>

  </div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>车辆属性</span>
    </div>
    <el-select
      v-model="virtualVehicle"
      value-key="name"
      class="elSelect"
      collapse-tags="collapse-tags"
      :disabled="vehicleInfoDisabled"
      placeholder="请选择"  style="width: 55%"
    >
      <el-option
        v-for="item in virtualVehicleOptions"
        :key="item.name"
        :label="item.name"
        :value="item.value"
      >
      </el-option>
    </el-select>

  </div>
  <div class="lineBot"></div>
  <div class="itemContent">
    <div class="titleType">
      <span>牌照</span>
    </div>
    <el-select
      v-model="vehicleLicense"
      disabled
      value-key="name"
      class="elSelect"
      collapse-tags="collapse-tags"
      placeholder="请选择"  style="width: 55%"
    >
      <el-option
        v-for="item in vehicleLicenseOptions"
        :key="item.name"
        :label="item.name"
        :value="item.value"
      >
      </el-option>
    </el-select>

  </div>
  <div class="lineBot"></div>
  <!--<div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>是否参与聚合</span>
    </div>
    <div class="isJoin">
      <van-radio-group v-model="isJoin" @change="isChange"  class="joinWrap">
        <van-radio :name="1" style="margin-right: 26px">
          参与
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio :name="0">
          不参与
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
  </div>
  <div class="lineBot"></div>-->
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>车辆状态</span>
    </div>
    <div class="isJoin">
      <van-radio-group v-model="vehicleStatus"  :class="{ 'disabled-tree': vehicleInfoDisabled }" :disabled="vehicleInfoDisabled" @change="isVehicleChange"  class="joinWrap">
        <van-radio :name="1" style="margin-right: 14px">
          启用
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio :name="2" style="margin-right: 14px">
          停用
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio :name="12" disabled>
          否-服务商停用
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
  </div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>有无投保救援职业责任险或货运险</span>
    </div>
    <div class="isJoin">
      <van-radio-group v-model="hasLiabilityInsurance" @change="isChange" :disabled="disabledShow" class="joinWrap">
        <van-radio :name="1" style="margin-right: 26px">
          有
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio :name="0">
          无
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
  </div>
  <div class="item_content_btn" v-if="[2,3].includes(this.liabilityInsuranceAudit)">
    <span @click="goContinueInsurance">续保更新</span>
  </div>
  <span style="color: red">如有投保，选“有”，未投保选“无”，不必上传交强险或者商业险等其他保单</span>
  <div class="lineBot"></div>
  <template v-if="hasLiabilityInsurance == 1">
    <div class="itemContent">
      <div class="titleType">
        <img class="startImg" src="@/assets/start.png" />
        <span style="line-height: 20px">请上传救援职业责任险或货运险保单PDF或者关键信息页截图</span>
      </div>
      <van-uploader
        v-model="insurancePictureFiles"
        :after-read="insurancePictureFilesHandler"
        :disabled="disabledShow"
        :deletable="!disabledShow"
        max-count="1"
        :preview-size="54"
        @click-preview="clickPreview"
      />
    </div>
    <div class="lineBot"></div>
    <div class="itemContent">
      <div class="titleType">
        <img class="startImg" src="@/assets/start.png" />
        <span>承保保司</span>
      </div>
      <el-select
        v-model="insuranceCorp"
        value-key="name"
        class="elSelect"
        collapse-tags="collapse-tags"
        :disabled="disabledShow"
        placeholder="请选择"  style="width: 55%"
      >
        <el-option
          v-for="item in insuranceOptions"
          :key="item.name"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="lineBot"></div>
    <div class="itemContent">
      <div class="titleType">
        <img class="startImg" src="@/assets/start.png" />
        <span>保险有效期</span>
      </div>
      <el-input style="width: 55%" readonly @focus="showDateHandler"  v-model="dateVal"  placeholder="请选择发布日期" :class="{'customSel':true,'customInput':true , 'has-value': dateVal }" >
        <template #suffix>
          <i
            v-if="dateVal && !disabledShow"
            class="el-icon-circle-close el-input__icon"
            @click="dateVal = ''"
          ></i>
        </template>
      </el-input>
    </div>
    <div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
    <div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')">
      <div class="titleType">
        <img class="startImg" src="@/assets/start.png" />
        <span>保费</span>
      </div>
      <van-field
          type="number"
          class="vanIpt"
          v-model="liabilityInsuranceAmount"
          input-align="right"
      >
        <template slot="right-icon" >
          <span style="white-space: nowrap;">元</span>
        </template>
      </van-field>
    </div>
    <div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
    <div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')">
      <div class="titleType">
        <img class="startImg" src="@/assets/start.png" />
        <span>保额</span>
      </div>
      <div style="display:flex;align-items: center;justify-content: flex-end">
        <el-select
            v-model="liabilityInsuranceQuota"
            value-key="name"
            class="elSelect"
            collapse-tags="collapse-tags"
            placeholder="请选择"  style="width: 55%"
        >
          <el-option
              v-for="item in liabilityQuotaOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value"
          >
          </el-option>
        </el-select><span style="margin-right: 16px;opacity: .5;">万元</span>
      </div>
<!--      <van-field
          type="number"
          class="vanIpt"
          v-model="liabilityInsuranceQuota"
          input-align="right"
      >
        <template slot="right-icon" >
          <span style="white-space: nowrap;">万元 </span>
        </template>
      </van-field>-->
    </div>

    <!--    <div class="lineBot"></div>
    <div class="itemContent">
      <div class="titleType">
        <img class="startImg" src="@/assets/start.png" />
        <span>保单号(救援)</span>
      </div>
      <van-field
          class="vanIpt"
          style="width: 72%"
          v-model="insuranceCode"
          input-align="right"
      >  </van-field>
    </div>
    <div class="lineBot"></div>
    <div class="itemContent">
      <div class="titleType"> <span>保单号(中道物流)</span> </div>
      <van-field
          class="vanIpt"
          style="width: 65%"
          v-model="insuranceCodeZd"
          input-align="right"
      >  </van-field>
    </div>
    <div class="lineBot"></div>-->
  </template>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>选择服务种类</span>
    </div>
  </div>
  <div class="serviceType">
    <el-tree
      show-checkbox
      node-key="id"
      ref="tree"
      :highlight-current="true"
      :expand-on-click-node="false"
      :class="{ 'disabled-tree': vehicleInfoDisabled }"
      :data="supplierServiceList"
      :props="defaultProps">
    </el-tree>
      <!--<div class="trailerService" v-for="(item,index) in supplierServiceList" :key="index">
        <div class="serviceline"  @click="loadAll(index)">
          <img  :ref="'serviceline' + index" :src="imageUrl" style="width: 20px;height: 15px" >
          <span  class="service">{{ item.name }}:</span>
          <span class="line"></span>
        </div>
        <div :ref="'checkboxGroup' + index"  class="checkbox-group">
          <van-checkbox-group  v-model="serviceIds" v-for="(item2,index2) in item.children" :key="index2" class="radioWrap">
            <van-checkbox class="item" :name="item2.id">{{item2.name }}</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>-->
  </div>
  <two-common-btn class="btn" @cancelClick="back" @submitClick="submitBtn" />
  <van-calendar v-model="showDatePicker"  :min-date="minDate"
                :max-date="maxDate" type="range" @confirm="onConfirm" />

</div>
  <van-popup ref="success"  v-model="approvalDialogShow">
    <div class="pop_wrap">
      <div class="pop_title">车辆提交审批</div>
      <div class="pop_content">
        <div class="iptWrap" v-if="vehicleInfoChange">
          <div>车辆和服务备注</div>
          <el-input placeholder="请输入车辆和服务备注" type="textarea" show-word-limit maxlength="200"
                    v-model="approvalForm.serviceRemark"></el-input>
        </div>
        <div  class="iptWrap" v-if="insuranceChange">
          <div>保单备注</div>
          <el-input placeholder="请输入保单备注" type="textarea" show-word-limit maxlength="200"
                    v-model="approvalForm.insuranceRemark"></el-input>
        </div>
      </div>
      <div class="tip_button_wrap">
        <div class="continue close" @click="closeApproval">取消</div>
        <div class="continue" :class="{'loading': loading}" @click="submitApprovalHandle">提交审批</div>
      </div>
    </div>
  </van-popup>

</div>
</template>

<script>
  // uploadImage
  import {Dialog} from "vant";
  import {formatDate1} from "@/utils/common"
import {myMixins} from "@/utils/myMixins"
import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage, ocrHandler,
  userOperationPermissions,saveSupplierApproval} from "@/api/mine"
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
import CellGroup from "@/components/cellGroup.vue";
export default {
  name: "vehicleAdd",
  mixins:[myMixins],
  data(){
    return{
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      minDate: new Date(1970, 0, 1),  // 设置最小可选日期（1970年1月1日）
      maxDate: new Date(2099, 11, 31), // 设置最大可选日期（2099年12月31日）
      checkList: [],
      virtualVehicle: '',
      vehicleStatus: '',
      showDatePicker: false,
      dateVal: '',
      trailerService: '',//拖车服务
      isJoin:'',//是否参与
      hasLiabilityInsurance: '',   // 有无责任险
      liabilityInsuranceAudit: '',
      activeIcon: require('@/assets/check.png'),
      inactiveIcon: require('@/assets/uncheck.png'),
      // result: [],
      checked: true,
      carNum:"",//车牌号
      typeList:[],//车辆类型列表
      selectedOption:[],//车辆类型
      id:'',//车辆Id
      supplierId:'',//服务商Id
      serviceIds:[],//车辆服务种类,
      supplierServiceList:[],
      oldSupplierServiceList:[],
      show:false,
      imageUrl: require('@/assets/arr_right.png'),
      vehicleLicenseFrontList: [],
      vehicleLicenseBackList: [],
      vehicleLicenseCarPhotoList: [],
      vehicleFrontPhotoList: [],
      insurancePictureFiles: [],
      vehicleLicenseFront: '',  // 行驶证首页
      vehicleLicenseBack: '',   // 行驶证副页
      vehicleLicenseCarPhoto: '',  // 行驶证车辆照片
      vehicleFrontPhoto: '',    // 车头照
      insurancePicturePhoto: '',    // 保单照片
      vehicleLicenseInfo: {},
      vehicleLicenseBackOcrFlag: false,   // 行驶证副页 修改时默认不需要 ocr识别
      isMultiple: false,     // 是否支持多选
      vehicleLicense:'',//牌照
      vehicleFrontLicensePlate:'',//车头照车牌号码
      insuranceCorp: '',
      auditStatus: '',
      permissonList:[],
      vehicleTypes:[{
        name: '小修车',
        value: 1
      },{
        name: '一般平板车',
        value: 2
      },{
        name: '落地平板车',
        value: 3
      },{
        name: '地库车',
        value: 4
      },
        {
          name:'牵引车',
          value: 5 },
        {
          name:'随车吊平板车',
          value:6},
        {
          name:'充电车',
          value: 7 },
        {
          name:'吊车',
          value: 8 },
        {
          name:'公车',
          value: 9 },
        {
          name:'箱式拖车',
          value: 10 },

      ],
      vehicleLicenseOptions: [{
        name: '蓝牌',
        value: 1
      }, {
        name: '黄牌',
        value: 2
      }, {
        name: '新能源',
        value: 3
      }, {
        name: '临牌',
        value: 4
      }, {
        name: '其他',
        value: 5
      }],
      virtualVehicleOptions: [{
        name: '自有车辆',
        value: 1
      }, {
        name: '挂靠车辆',
        value: 2
      }, {
        name: '虚拟车辆',
        value: 3
      }, {
        name: '借入车辆',
        value: 4
      }],
      insuranceOptions: [{
        name: '太平洋',
        value: 1
      }, {
        name: '人保',
        value: 2
      }, {
        name: '平安',
        value: 3
      }, {
        name: '中华联合',
        value: 4
      }, {
        name: '大地',
        value: 5
      }, {
        name: '阳光',
        value: 6
      }, {
        name: '太平',
        value: 7
      }, {
        name: '人寿',
        value: 8
      }, {
        name: '永安',
        value: 9
      }, {
        name: '华安',
        value: 10
      }, {
        name: '申能',
        value: 11
      }, {
        name: '大家',
        value: 12
      }, {
        name: '富德',
        value: 13
      }, {
        name: '其他',
        value: 14
      }],
      liabilityQuotaOptions:[{value:10},{value:20},{value:30},{value:50},{value:70},{value:80},{value:100},{value:200}],
      approvalForm:{
        type:2,
        supplierId:'',
        vehicleId:'',
        serviceChange:null,
        serviceRemark:'',
        insuranceChange:null,
        insuranceRemark:'',
        vehicleOtherChange:null,
        vehicleOtherRemark:'',
      },
      originData:{},//记录更改之前的数据
      changedFields: [], // 用于存储变更过的字段
      approvalDialogShow:false,
      vehicleInfoChange:false,
      insuranceChange:false,
      loading: false,
      liabilityInsuranceAmount:'',
      liabilityInsuranceQuota:'',
      insuranceCode:'',
      insuranceCodeZd:'',
    }
  },
  computed: {
    vehicleInfoDisabled() {
      return [1,2].includes(this.auditStatus)
    },
    disabledShow() {
      if (this.id) {
        return !this.permissonList.includes('hasInsuranceAudit') && [2,3].includes(this.liabilityInsuranceAudit)
      } else {
        return false
      }
    }
  },
  watch:{
    selectedOption(newVal){
      if(newVal == 4){
        this.isMultiple = true
        this.vehicleTypes[2].disabled=true
        this.vehicleTypes[5].disabled=true
        this.vehicleTypes[6].disabled=true
        this.vehicleTypes[7].disabled=true
        this.vehicleTypes[8].disabled=true
        this.vehicleTypes[9].disabled=true
      }else{
        this.isMultiple = false
        this.vehicleTypes[2].disabled=false
        this.vehicleTypes[5].disabled=false
        this.vehicleTypes[6].disabled=false
        this.vehicleTypes[7].disabled=false
        this.vehicleTypes[8].disabled=false
        this.vehicleTypes[9].disabled=false
      }
      if (newVal == 1 || newVal == 7 || newVal == 9){
        let arr = []
        this.supplierServiceList.forEach((item)=>{
          if(!(item.name == '拖车服务' || item.name == '大型车救援')){
            arr.push(item)
          }
        })
        this.supplierServiceList = arr
      }else{
        this.supplierServiceList = this.oldSupplierServiceList
      }
      this.setDefault();
    },
  },
  async mounted() {
    this.id=this.$route.params?.id
    this.approvalForm.supplierId=this.$route.params?.supplierId
    await this.getSupplierServiceTree();
    await this.getTypeList();
    if( this.id){
      await this.vehicleInfo()
    }else{
      this.originData={
        vehicleType:'',
        vehicleStatus:'',
        virtualVehicle:'',
        serviceIds:[],
        hasLiabilityInsurance:'',
        insuranceCorp:'',
        liabilityInsuranceStartTime:'',
        liabilityInsuranceEndTime:'',
        insurancePicturePhoto:''
      }
    }
  },
  methods:{
    showDateHandler() {
      if( this.id ) {   // 修改
        if( this.permissonList.includes('hasInsuranceAudit') ) {
          this.showDatePicker = true
        }
      } else {
        this.showDatePicker = true
      }

    },
    async getPermissions(){
      let res = await userOperationPermissions();
      this.permissonList = res.data
    },
    goContinueInsurance() {
      this.$router.push({
        name:'continueInsurance',
        params:{
          id: this.id
        }
      })
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.showDatePicker = false;
      this.dateVal = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      console.log('this.dateVal',this.dateVal)
      let timeObj = this.formatDateTimeRange(this.dateVal)
      console.log('timeObj',timeObj)

    },
    formatDateTimeRange(str) {
      const [startStr, endStr] = str.split(' - ').map(s => s.trim());
      const startDate = new Date(startStr);
      const startTime = `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')} 00:00:00`;
      const endDate = new Date(endStr);
      const endTime = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')} 23:59:59`;
      return {
        startTime,
        endTime
      };
    },
    setDefault() {
      if( this.vehicleLicenseInfo?.vehicleType?.includes('小型') || this.vehicleLicenseInfo?.vehicleType?.includes('微型') || this.vehicleLicenseInfo?.vehicleType?.includes('普通') || this.vehicleLicenseInfo?.vehicleType?.includes('摩托') ) {
        this.vehicleTypes.map(item => {
          if( item.value == 1 || item.value == 9 ) {
            item.disabled = false;
          } else {
            item.disabled = true;
          }
        })
        this.$forceUpdate();
      } else if( this.vehicleLicenseInfo?.vehicleType?.includes('载货') || this.vehicleLicenseInfo?.vehicleType?.includes('中型') || this.vehicleLicenseInfo?.vehicleType?.includes('重型')) {
        this.vehicleTypes.map(item => {
          if( item.value == 1 || item.value == 9 ) {
            item.disabled = true;
          } else {
            item.disabled = false;
          }
        })
      } else {
        this.vehicleTypes.map(item => {
          item.disabled = false;
        })
        this.$forceUpdate();
      }
    },
    getVehicleLicense(color) {
      if( color == '蓝' ) {
        this.vehicleLicense = 1
      } else if(color == '黄') {
        this.vehicleLicense = 2
      } else if(color == '临牌') {
        this.vehicleLicense = 4
      } else if(color.includes('绿')) {
        this.vehicleLicense = 3
      } else {
        this.vehicleLicense = 5
      }
    },
    onOversize() {
      this.$toast(`文件大小不能超过5M`)
    },
    async vehicleLicenseFrontHandler(file) {    // 上传 行驶证首页
      const formData = new FormData();
      formData.append("file" , file.file);
      let res = await uploadImage(formData)
      this.vehicleLicenseFront = res.data;
      await this.vehicleOcrHandler();
    },
    async vehicleLicenseBackHandler(file) {     // 上传 行驶证副页
      this.vehicleLicenseBackOcrFlag = true;
      const formData = new FormData();
      formData.append("file" , file.file);
      let res = await uploadImage(formData);
      this.vehicleLicenseBack = res.data;
      await this.vehicleBackOcrHandler();
    },
    async vehicleLicenseCarHandler(file) {     // 上传 行驶证车辆照片
      const formData = new FormData();
      formData.append("file" , file.file);
      let res = await uploadImage(formData);
      this.vehicleLicenseCarPhoto = res.data;
    },
    async vehicleFrontPhotoHandler(file) {     // 上传 车头照
      const formData = new FormData();
      formData.append("file" , file.file);
      let res = await uploadImage(formData);
      this.vehicleFrontPhoto = res.data;
      await this.ocrCarFrontHandler()
    },
    clickPreview(){
      console.log(' this.insurancePicturePhoto', this.insurancePicturePhoto)
      if(this.insurancePicturePhoto && this.insurancePicturePhoto.indexOf('.pdf') !== -1){
        let url=this.insurancePicturePhoto?.split(',')[0]
        window.open(url.replace("http://", "https://"))
      }
    },
    async insurancePictureFilesHandler(file) {
      const formData = new FormData();
      formData.append("file" , file.file);
      let res = await uploadImage(formData);
      this.insurancePicturePhoto = res.data;
      console.log('insurancePictureFilesHandler',this.insurancePictureFiles)
    },
    async ocrCarFrontHandler() {     // 车辆正面 orc 识别
      let res = await ocrHandler({
        ocrType: 10,
        imageUrl: this.vehicleFrontPhoto,
        cardSide: 'FRONT'
      });
      this.vehicleFrontLicensePlate=res.data?.number
      this.getVehicleLicense(res.data.color)
    },
    async vehicleOcrHandler() {     // 行驶证首页 ocr 识别
      this.vehicleLicenseInfo.licensePlateNumber = '';
      this.vehicleLicenseInfo.vehicleType = '';
      this.vehicleLicenseInfo.owner = '';
      this.vehicleLicenseInfo.address = '';
      this.vehicleLicenseInfo.useNature = '';
      this.vehicleLicenseInfo.model = '';
      this.vehicleLicenseInfo.vinCode = '';
      this.vehicleLicenseInfo.engineNumber = '';
      this.vehicleLicenseInfo.registrationDate = '';
      this.vehicleLicenseInfo.issueDate = '';
      this.vehicleLicenseInfo.issueAuthority = '';
      let res = await ocrHandler({
        ocrType: 3,
        imageUrl: this.vehicleLicenseFront,
        cardSide: 'FRONT'
      })
      if ( res?.data?.frontInfo ) {
        let frontInfo = res?.data?.frontInfo;
        this.carNum = frontInfo?.plateNo;
        this.vehicleLicenseInfo.licensePlateNumber = frontInfo?.plateNo;
        this.vehicleLicenseInfo.vehicleType = frontInfo?.vehicleType;
        this.vehicleLicenseInfo.owner = frontInfo?.owner;
        this.vehicleLicenseInfo.address = frontInfo?.address;
        this.vehicleLicenseInfo.useNature = frontInfo?.useCharacter;
        this.vehicleLicenseInfo.model = frontInfo?.model;
        this.vehicleLicenseInfo.vinCode = frontInfo?.vin;
        this.vehicleLicenseInfo.engineNumber = frontInfo?.engineNo;
        this.vehicleLicenseInfo.registrationDate = frontInfo?.registerDate;
        this.vehicleLicenseInfo.issueDate = frontInfo?.issueDate;
        this.vehicleLicenseInfo.issueAuthority = frontInfo?.seal;
        this.setDefault();
        this.checkDisabledItems();
      }
    },
    checkDisabledItems() {
      let _arr = [];
      this.selectedOption.map(item => {
        let _tempArr = this.vehicleTypes.filter(_item => _item.disabled && _item.value == item);
        _arr = [..._arr, ..._tempArr]
      })
      if (_arr.length > 0) {
        this.$toast(`车辆类别数据不合法：${_arr.map(item => item.name).join('、')}`)
        return false
      }
      return  true
    },
    async vehicleBackOcrHandler() {     // 行驶证副页 ocr 识别
      this.vehicleLicenseInfo.recordNumber = '';
      this.vehicleLicenseInfo.passengerCapacity = '';
      this.vehicleLicenseInfo.totalWeight = '';
      this.vehicleLicenseInfo.curbWeight = '';
      this.vehicleLicenseInfo.permittedWeight = '';
      this.vehicleLicenseInfo.overallDimension = '';
      this.vehicleLicenseInfo.tractionWeight = '';
      this.vehicleLicenseInfo.backPlateNo = '';     // 行驶证副页 车牌号，仅用来判断 ocr 识别是否成功
      this.vehicleLicenseInfo.energySign = '';
      this.vehicleLicenseInfo.marks = ''
      let res = await ocrHandler({
        ocrType: 3,
        imageUrl: this.vehicleLicenseBack,
        cardSide: 'BACK'
      })
      if(res?.data?.backInfo) {
        let backInfo = res?.data?.backInfo;
        this.vehicleLicenseInfo.recordNumber = backInfo?.fileNo;
        this.vehicleLicenseInfo.passengerCapacity = backInfo?.allowNum;
        this.vehicleLicenseInfo.totalWeight = backInfo?.totalMass;
        this.vehicleLicenseInfo.curbWeight = backInfo?.curbWeight;
        this.vehicleLicenseInfo.permittedWeight = backInfo?.loadQuality;
        this.vehicleLicenseInfo.overallDimension = backInfo?.externalSize;
        this.vehicleLicenseInfo.tractionWeight = backInfo?.TotalQuasiMass;
        this.vehicleLicenseInfo.backPlateNo = backInfo?.plateNo;
        this.vehicleLicenseInfo.energySign = backInfo?.fuelType;
        this.vehicleLicenseInfo.marks = backInfo?.marks
      }
      console.log('this.vehicle', this.vehicleLicenseInfo)
    },
    loadAll(i){
      // console.log(i)
      this.show = !this.show
      const refName='checkboxGroup' + i;
      const element1 = this.$refs[refName]; // 通过动态属性名访问引用this.$refs.checkboxGroup.style.display = 'block';
      const refName1='serviceline' + i;
      const element = this.$refs[refName1];
      if(this.show){
        element1[0].style.display = 'block'
        element[0].src= require('@/assets/arr_bot.png')
      }else {
        element1[0].style.display = 'none'
        element[0].src= require('@/assets/arr_right.png')
      }
    },
    async getTypeList() {
        let result=await vehicleTypeList();
        this.typeList=[]
        if(result.code === 200){
          for (const key in result.data){
            // console.log("keys",result.data[key])
            this.typeList.push({name:result.data[key],disabled:false,value:(key+1)})
            // this.typeList.push(result.data[key])

          }
        }
    },
    async getSupplierServiceTree(){
      let res = await supplierServiceTree();
      this.supplierServiceList=res.data
      this.oldSupplierServiceList=this.supplierServiceList
    },
    async vehicleInfo(){
      let res= await  getInfoById({
        vehicleId:this.id
      })
      let result=res.data;
      console.log("result",result)
      this.id=result.vehicleId
      this.approvalForm.vehicleId=this.id
      this.carNum=result.plateNumber
      this.isJoin=result.hasPolymerization.code
      this.selectedOption=result.vehicleType?.split(',').map((item)=>{
        return Number(item);
      });
      this.auditStatus = result.auditStatus;
      this.virtualVehicle = result.virtualVehicle;
      this.$refs.tree.setCheckedKeys(result.serviceIds)
      this.vehicleStatus = result.vehicleStatus
      this.vehicleLicenseFront = result.vehicleLicenseFront;
      this.vehicleLicenseBack = result.vehicleLicenseBack;
      this.vehicleFrontPhoto = result.vehicleFrontPhoto;
      this.insurancePicturePhoto = result.insurancePicturePhoto;
      this.vehicleLicenseInfo = result.vehicleLicenseInfo;
      this.vehicleLicenseCarPhoto = result.vehicleLicenseCarPhoto;
      this.vehicleLicense = result.vehicleLicense;
      this.vehicleFrontLicensePlate = result.vehicleFrontLicensePlate;
      this.hasLiabilityInsurance = result.hasLiabilityInsurance
      this.insuranceCorp = result.insuranceCorp;
      this.liabilityInsuranceAudit = result.liabilityInsuranceAudit
      if(this.insurancePicturePhoto) {
        this.insurancePictureFiles = [{url: this.insurancePicturePhoto?.split(',')[0]}]
      }
      console.log('this.insurancePictureFiles',this.insurancePictureFiles)
      if( this.vehicleLicenseFront ) {
        this.vehicleLicenseFrontList = [{ url : this.vehicleLicenseFront }];
      }
      if(this.vehicleLicenseBack) {
        this.vehicleLicenseBackList = [{ url : this.vehicleLicenseBack }];
      }
      if(this.vehicleFrontPhoto) {
        this.vehicleFrontPhotoList = [{ url : this.vehicleFrontPhoto }];
      }
      if(this.vehicleLicenseCarPhoto) {
        this.vehicleLicenseCarPhotoList = [{ url : this.vehicleLicenseCarPhoto }];
      }
      if(this.vehicleLicenseCarPhoto) {
        this.vehicleLicenseCarPhotoList = [{ url : this.vehicleLicenseCarPhoto }];
      }
      if( result.liabilityInsuranceEndTime && result.liabilityInsuranceStartTime ) {
        this.dateVal =  formatDate1(result.liabilityInsuranceStartTime) + ' - ' + formatDate1(result.liabilityInsuranceEndTime)
      }
      this.originData={
        vehicleType:result.vehicleType,
        vehicleStatus:result.vehicleStatus,
        virtualVehicle:result.virtualVehicle,
        serviceIds:result.serviceIds,
        hasLiabilityInsurance:result.hasLiabilityInsurance,
        insuranceCorp:result.insuranceCorp,
        liabilityInsuranceStartTime:result.liabilityInsuranceStartTime,
        liabilityInsuranceEndTime:result.liabilityInsuranceEndTime,
        insurancePicturePhoto:result.insurancePicturePhoto
      }
    },
    isChange(e){
      this.hasLiabilityInsurance=e
      if (e === 0) {
        Dialog.confirm({
          title: '提醒',
          message: '有救援职业责任险车辆会提升案件聚合能力和接单能力。',
          confirmButtonText: '我已知晓', // 确认按钮文字，默认为“确认”
          showCancelButton: false // 是否显示取消按钮，默认为 true。如果不需要取消按钮，可以设置为 false。
        })
        .then(() => { /* 确认后的操作 */ })
        .catch(() => { /* 取消后的操作 */ });
      }
    },
    isVehicleChange(e) {
      this.vehicleStatus=e
    },
/*    async submitAuditHandle(){//提交审核
      let urls=[]
      this.insurancePictureFiles?.forEach(item => urls.push(item.url))
      let time =this.dateVal ? this.formatDateTimeRange(this.dateVal) : ''
      // let time1=time.endTime?.split(' ')
      let newFormValue={
        vehicleStatus:this.vehicleStatus,
        virtualVehicle:this.virtualVehicle,
        serviceIds:this.$refs.tree.getCheckedKeys(true) || [],
        vehicleType:this.selectedOption?.join(',') || '',
        hasLiabilityInsurance:this.hasLiabilityInsurance,
        insuranceCorp:this.insuranceCorp,
        insurancePicturePhoto:urls?.join(','),
        // liabilityInsuranceStartTime:time.startTime ? time.startTime : '',
        liabilityInsuranceEndTime:time.endTime ? time.endTime  : '',
      }
      console.log('newFormValue',newFormValue)
      let oldFormValue={...this.originData,}
      console.log('oldFormValue',oldFormValue)

      this.compareObjects(newFormValue,oldFormValue);
      if( this.changedFields &&  this.changedFields.length>0){
        const arr1Set = new Set(this.changedFields);
        const change1=['vehicleStatus','virtualVehicle','vehicleType','serviceIds']
        const change2=['hasLiabilityInsurance','insurancePicturePhoto','insuranceCorp','liabilityInsuranceStartTime','liabilityInsuranceEndTime']
        const serviceChangeItems = change1.filter(item => arr1Set.has(item));
        console.log('serviceChangeItems',serviceChangeItems)
        if(serviceChangeItems?.length>0){
          this.vehicleInfoChange=true
          this.approvalForm.serviceChange={}
          change1.forEach(key => {
            this.approvalForm.serviceChange[key] = this[key];
            if(key=='serviceIds'){
              this.approvalForm.serviceChange[key]=this.$refs.tree.getCheckedKeys(true)
            }
            if(key=='vehicleType'){
              this.approvalForm.serviceChange[key]=this.selectedOption?.join(',') || ''
            }
          });
        }else {
          this.vehicleInfoChange=false
          this.approvalForm.serviceChange=null
        }
        const insuranceChangeItems = change2.filter(item => arr1Set.has(item));
        console.log('insuranceChangeItems',insuranceChangeItems)
        if(insuranceChangeItems?.length>0){
          this.insuranceChange=true
          this.approvalForm.insuranceChange={}
          change2.forEach(key => {
            this.approvalForm.insuranceChange[key] =this[key];
            let time =this.dateVal ? this.formatDateTimeRange(this.dateVal) : ''
            if(key=='liabilityInsuranceStartTime' && time && time.startTime){
              this.approvalForm.insuranceChange[key]=time.startTime
            }
            if(key=='liabilityInsuranceEndTime' && time && time.endTime){
              // let time1=time.endTime?.split(' ')
              this.approvalForm.insuranceChange[key]= time.endTime
            }
            if(key=='insurancePicturePhoto' && this.insurancePictureFiles?.length>0){
              let urls=[]
              this.insurancePictureFiles?.forEach(item => urls.push(item.url))
              this.approvalForm.insuranceChange[key]=urls?.join(',')
            }
          });
        }else {
          this.insuranceChange=false
          this.approvalForm.insuranceChange=null
        }
      }
      if((this.vehicleInfoChange || this.insuranceChange) && this.id){
        // this.approvalDialogShow=true
        this.submitApprovalHandle()
        console.log('11111',this.approvalForm.serviceChange)
        console.log('2222',this.approvalForm.insuranceChange)
      }else {
        this.approvalDialogShow=false
       await this.submitBtn();
      }
    },*/
    async submitApprovalHandle(){//提交审批-走接口
      if(this.vehicleInfoChange){
        if(!(this.selectedOption.length > 0)){
          this.$toast('车辆类别不能为空')
          return
        }
        let res = this.checkDisabledItems();
        if(!res) {
          return false
        }
        if( !this.virtualVehicle ) {
          this.$toast('车辆属性不能为空')
          return
        }
        if( !this.vehicleStatus ) {
          this.$toast('车辆状态不能为空')
          return
        }
       /* if(!this.approvalForm.serviceRemark){
          this.$toast('车辆和服务备注不能为空')
          return
        }*/
      }
      if(this.insuranceChange){
        if(this.hasLiabilityInsurance === null || this.hasLiabilityInsurance === undefined || this.hasLiabilityInsurance === '') {  // 有职业责任险，就需要有保单照片
          this.$toast('救援职业责任险不能为空')
          return
        }
        if(!this.insurancePicturePhoto && this.hasLiabilityInsurance == 1) {  // 有职业责任险，就需要有保单照片
          this.$toast('保单照片不能为空')
          return
        }
        if(this.selectedOption?.length==1 && this.selectedOption.includes(1)){//选择小修车时需清除原本的拖车服务类型
          let data=this.oldSupplierServiceList.filter(item => item.name ==='拖车服务')
          this.serviceIds = this.serviceIds.filter(item => !data[0].children.some(obj => obj.id === item));
        }
        if(!this.insuranceCorp && this.hasLiabilityInsurance == 1) {  // 有职业责任险，就需要有保单照片
          this.$toast('承保保司不能为空')
          return
        }
        if(!this.dateVal && this.hasLiabilityInsurance == 1) {  // 有职业责任险，就需要有保单照片
          this.$toast('保单有效期不能为空')
          return
        }
       /* if(!this.approvalForm.insuranceRemark){
          this.$toast('保单备注不能为空')
          return
        }*/
      }
      try {
        this.loading = true;
        await saveSupplierApproval({...this.approvalForm})
      } finally {
        this.loading = false;
      }
      this.$toast('提交审批成功')
      this.closeApproval()
      setTimeout(()=>{
        this.$router.back();
      },2000)
    },
    compareObjects(newObj, oldObj) {
      this.changedFields=[]
      for (let key in newObj) {
        if( Array.isArray(newObj[key])){
          if(newObj[key]?.length != oldObj[key]?.length){
            this.changedFields.push(key);
          }else {
            // console.log('newObj[key]',newObj[key])
            if(newObj[key][0]?.id){
              let flag=newObj[key].every((item, index) => item.id == oldObj[key][index]?.id);
              // console.log('flag',flag)
              if(!flag){
                this.changedFields.push(key);
              }
            }else{
              let flag=newObj[key].every((value, index) => value == oldObj[key][index]);
              if(!flag){
                this.changedFields.push(key);
              }
            }
          }
        }else{
          let isEqual = (
              (newObj[key] == null && oldObj[key] == 0) ||
              (newObj[key] == 0 && oldObj[key] == null) ||
              (newObj[key] == oldObj[key])
          );
          if (!isEqual) {
            this.changedFields.push(key);
          }
        }
      }
    },
    closeApproval(){
      this.approvalForm.serviceRemark=''
      this.approvalForm.insuranceRemark=''
      this.approvalForm.vehicleOtherRemark=''
      this.approvalDialogShow=false
      this.vehicleInfoChange=false
      this.insuranceChange=false
    },
    back() {
      this.$router.push({
        name:'vehicleManage',
        params:{
          id: this.id
        }
      })
    },
    async submitBtn(){
      if( !this.vehicleLicenseFront ) {
        this.$toast('行驶证主页照片不能为空')
        return
      }
      if( !this.vehicleLicenseBack ) {
        this.$toast('行驶证副页照片不能为空')
        return
      }
      if( !this.vehicleLicenseCarPhoto ) {
        this.$toast('行驶证车辆照片页不能为空')
        return
      }
      if( !this.vehicleFrontPhoto ) {
        this.$toast('车头照片不能为空')
        return
      }
      if( !this.vehicleLicenseInfo.licensePlateNumber ) {
        this.$toast('行驶证主页识别失败')
        return
      }
      if(this.vehicleLicenseBackOcrFlag && !this.vehicleLicenseInfo.backPlateNo ) {
        this.$toast('行驶证副页识别失败')
        return
      }
      if(!(this.selectedOption.length > 0)){
        this.$toast('车辆类别不能为空')
        return
      }
      let res = this.checkDisabledItems();
      if(!res) {
        return false
      }
      if( !this.virtualVehicle ) {
        this.$toast('车辆属性不能为空')
        return
      }
      if( !this.vehicleStatus ) {
        this.$toast('车辆状态不能为空')
        return
      }
      if(this.hasLiabilityInsurance === null || this.hasLiabilityInsurance === undefined || this.hasLiabilityInsurance === '') {  // 有职业责任险，就需要有保单照片
        this.$toast('救援职业责任险不能为空')
        return
      }
      if(!this.insurancePicturePhoto && this.hasLiabilityInsurance == 1) {  // 有职业责任险，就需要有保单照片
        this.$toast('保单照片不能为空')
        return
      }
      if(this.selectedOption?.length==1 && this.selectedOption.includes(1)){//选择小修车时需清除原本的拖车服务类型
        let data=this.oldSupplierServiceList.filter(item => item.name ==='拖车服务')
        this.serviceIds = this.serviceIds.filter(item => !data[0].children.some(obj => obj.id === item));
      }
      if(!this.insuranceCorp && this.hasLiabilityInsurance == 1) {  // 有职业责任险，就需要有保单照片
        this.$toast('承保保司不能为空')
        return
      }
      if(!this.dateVal && this.hasLiabilityInsurance == 1) {  // 有职业责任险，就需要有保单照片
        this.$toast('保单有效期不能为空')
        return
      }
      if( this.hasLiabilityInsurance == 1){
        if(this.permissonList.includes('hasInsuranceAudit') && !this.liabilityInsuranceAmount && this.liabilityInsuranceAmount!=0){
          this.$toast('保费不能为空')
          return
        }
        if(this.permissonList.includes('hasInsuranceAudit') && !this.liabilityInsuranceQuota){
          this.$toast('保额不能为空')
          return
        }
       /* if(!this.insuranceCode){
          this.$toast('保单号(救援)不能为空')
          return
        }*/
      }
      let timeObj;
      if(this.dateVal) {
        timeObj = this.formatDateTimeRange(this.dateVal)
      }
      this.serviceIds = this.$refs.tree.getCheckedKeys(true)
      // console.log('1122',this.vehicleStatus)
      // return
      await saveVehicle({
          vehicleId:this.id ? this.id : '',
          plateNumber:this.carNum ? this.carNum :'',
          vehicleType:this.selectedOption?.length>0 ? this.selectedOption.join(',') : '',
          // hasPolymerization:this.isJoin,
          serviceIds:this.serviceIds ? this.serviceIds : [],
          vehicleLicenseFront: this.vehicleLicenseFront,
          vehicleLicenseBack: this.vehicleLicenseBack,
          vehicleFrontPhoto: this.vehicleFrontPhoto,
          vehicleLicenseInfo: this.vehicleLicenseInfo,
          vehicleLicenseCarPhoto: this.vehicleLicenseCarPhoto,
          vehicleLicense: this.vehicleLicense,
          vehicleFrontLicensePlate:this.vehicleFrontLicensePlate,
          hasLiabilityInsurance: this.hasLiabilityInsurance,
          insurancePicturePhoto: this.hasLiabilityInsurance == 1 ? this.insurancePicturePhoto : '',
          insuranceCorp: this.hasLiabilityInsurance == 1 ? this.insuranceCorp : '',
          liabilityInsuranceStartTime: this.hasLiabilityInsurance == 1 ? (timeObj?.startTime || '' ) : '',
          liabilityInsuranceEndTime: this.hasLiabilityInsurance == 1 ? (timeObj?.endTime || '') : '',
          virtualVehicle: this.virtualVehicle,
          canSubmitApproval:true,
          vehicleStatus:this.vehicleStatus,
          liabilityInsuranceAmount:this.liabilityInsuranceAmount,
          liabilityInsuranceQuota:this.liabilityInsuranceQuota,
          insuranceCode:this.insuranceCode,
          insuranceCodeZd:this.insuranceCodeZd,
        })
        if(this.id){
          this.$toast('修改成功')
        }else{
          this.$toast('添加成功')
        }
        setTimeout(()=>{
          this.$router.back();
        },2000)
      }
  },
  components:{
    CellGroup,
    TwoCommonBtn
  }
}
</script>

<style>
  .vehicleAdd .van-field__control:disabled {
    color: #323643 !important;
    -webkit-text-fill-color: #323643 !important;
  }
</style>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.mySelect{
  @include fontWeightSize(bold,13px);
  color: #323643;
  appearance: none;
  padding-right: 16px;
  background: url('@/assets/arrow_bot.png') no-repeat right center / 15px 14px;
}
.checkbox-group {
  display: none;
}
.navBar{
  margin-bottom: 46px;
}
.wrap{
@include wh(100%,100%);
  overflow-y: auto;
}
.addContentWrap{
  margin-left: 16px;
  .item_content_btn {
    padding-right: 25px;
    text-align: right;
    span {
      display: inline-block;
      background: #354D93;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      border-radius: 4px;
      margin-bottom: 5px;
    }
  }
  .itemContent{
    @include flexColBet;
    line-height: 56px;
    box-sizing: border-box;
    padding-right: 25px;
    .titleType{
      @include fontWeightSize(bold,14px);
      color: #323643;
    }
    .isJoin{
      display: flex;
      .joinWrap{
        display: flex;
      }
      img{
        @include widHeiMar(16px,16px,6px)
      }
    }
    .startImg{
      @include widHeiMar(6px,6px,3px);
      vertical-align: super;
    }
    input{
      border: none;
      text-align: right;
      @include fontWeightSize(bold,13px);
      opacity: .5;
    }
  }
  .lineBot{
    @include wh(100%,1px);
    background: #E9E9EA;
    opacity: 0.6;
  }
  .serviceType{
    @include fontWeightSize(bold,13px);
    margin-left: 15px;
    .trailerService{
      margin-bottom: 10px;
    }
    .serviceline{
      @include flexCenter;
      margin-bottom: 10px;
    }
    .item{
     margin: 20px 0;
      @include flexCenter;
    }
    .radioWrap{
      margin-left: 10px;
    }
    .service{
      @include colorOpa(#323643,0.7);
      line-height: 18px;
      white-space: nowrap;
    }
    .line{
      display: inline-block;
      @include wh(240px,2px);
      opacity: 0.16;
      border-bottom: 1px solid;
      border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
    }
    img{
      @include widHeiMar(16px,16px,12px)
    }
  }
  .btn{
    width: 90%;
    margin: 40px 0 30px 8px;
  }
}
.elSelect ::v-deep .el-input__inner{
  border: none !important;
  text-align: right !important;
}
.disabled-tree {
  pointer-events: none;
  opacity: 0.6;
}
.pop_wrap {
  width: 340px;
  box-sizing: border-box;
  padding: 10px 15px;
  position: relative;
  .pop_title {
    font-size: 14px;
    font-weight: 500;
  }
  .pop_content {
    width: 304px;
    font-size: 14px;
    color: #4C5361;
    margin-left: 6px;
    line-height: 25px;
    .iptWrap{
      margin: 10px 0;
    }
  }
  .tip_button_wrap {
    display: flex;
    justify-content: flex-end;
    .close {
      border: 1px solid #ccc;
      color: black;
      background-color: #FFFFFF;
    }
    .continue {
      padding: 6px 10px;
      border-radius: 4px;
    }
    div:last-child{
      background-color: #3266be;
      color: #FFFFFF;
      margin-left: 8px;
      margin-right: 4px;
    }
  }
}
.loading {
  position: relative;
}

.loading::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.vanIpt{
  width: 80%;
  display: flex;
  align-items: center;
}
.vanIpt1{
  width: 72%;
}
</style>
