<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>
    <div class="uploadSlotWrap">
      <van-uploader
        ref="licenseFrontUploader"
        v-model="vehicleLicenseFrontList"
        :after-read="vehicleLicenseFrontHandler"
        @delete="vehicleLicenseFrontDelete"
        max-count="1"
        :preview-size="54"
        accept="image/*"
      />
      <div class="slotClickMask" @click="onLicenseSlotClick('front')"></div>
    </div>
  </div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>行驶证副页</span>
    </div>
    <div class="uploadSlotWrap">
      <van-uploader
        ref="licenseBackUploader"
        v-model="vehicleLicenseBackList"
        :after-read="vehicleLicenseBackHandler"
        @delete="vehicleLicenseBackDelete"
        max-count="1"
        :preview-size="54"
        accept="image/*"
      />
      <div class="slotClickMask" @click="onLicenseSlotClick('back')"></div>
    </div>
  </div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>行驶证车辆照片页</span>
    </div>
    <div class="uploadSlotWrap">
      <van-uploader
        ref="licenseCarUploader"
        v-model="vehicleLicenseCarPhotoList"
        :after-read="vehicleLicenseCarHandler"
        @delete="vehicleLicenseCarPhotoDelete"
        max-count="1"
        :preview-size="54"
        accept="image/*"
      />
      <div class="slotClickMask" @click="onLicenseSlotClick('car')"></div>
    </div>
  </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"
      @delete="vehicleFrontPhotoDelete"
      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"
        :popper-append-to-body="false"
        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>
    <div class="virtualVehicleField">
      <el-select
        v-model="virtualVehicle"
        value-key="name"
        class="elSelect"
        collapse-tags="collapse-tags"
        :disabled="vehicleInfoDisabled || virtualVehicleLocked"
        placeholder="请选择"  style="width: 55%"
      >
        <el-option
          v-for="item in virtualVehicleOptions"
          :key="item.name"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="matchRoleArrow" :class="{expanded: matchRoleExpand}"
            @click="matchRoleExpand = !matchRoleExpand">▾</span>
    </div>
  </div>
  <div v-if="matchRoleExpand" class="matchRolePanel">
    匹配角色：{{ virtualVehicleMatchRole || '—' }}
  </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 || vehicleStatusDisabled }" :disabled="vehicleInfoDisabled || vehicleStatusDisabled" @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, ImagePreview} from "vant";
  import {formatDate1} from "@/utils/common"
import {myMixins} from "@/utils/myMixins"
import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage, ocrHandler,
  userOperationPermissions,saveSupplierApproval,preJudgeVirtualVehicle as preJudgeVirtualVehicleApi} 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: '',
      potentialFlag: new URLSearchParams(window.location.search).get('potentialFlag') || '',
      vehicleStatus: new URLSearchParams(window.location.search).get('potentialFlag') === '1' ? 2 : '',
      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'),
      cameraGuideType: 'front',  // 当前拍摄槽位 front/back/car
      vehicleLicenseFrontList: [],
      vehicleLicenseBackList: [],
      vehicleLicenseCarPhotoList: [],
      vehicleFrontPhotoList: [],
      insurancePictureFiles: [],
      vehicleLicenseFront: '',  // 行驶证首页
      vehicleLicenseBack: '',   // 行驶证副页
      vehicleLicenseCarPhoto: '',  // 行驶证车辆照片
      vehicleFrontPhoto: '',    // 车头照
      insurancePicturePhoto: '',    // 保单照片
      vehicleLicenseInfo: {},
      vehicleLicenseBackOcrFlag: false,   // 行驶证副页 修改时默认不需要 ocr识别
      isMultiple: false,     // 是否支持多选
      virtualVehicleLocked: false, // 车辆属性锁定（OCR所有人命中服务商信息时锁定为自有车辆）
      virtualVehicleMatchRole: '', // 车辆属性自动判定命中的匹配角色
      matchRoleExpand: false,      // 匹配角色面板展开状态
      vehicleLicense:'',//牌照
      vehicleFrontLicensePlate:'',//车头照车牌号码
      insuranceCorp: '',
      auditStatus: '',
      permissonList:[],
      vehicleTypes:[{
        name: '小修车',
        value: 1
      },{
        name: '一般平板车',
        value: 2
      },{
        name:'斜落一体平板车',
        value: 11 },{
        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: 6
      }, {
        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
      }
    },
    vehicleStatusDisabled() {
      return !this.id && this.potentialFlag === '1';
    }
  },
  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
        this.vehicleTypes[10].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
        this.vehicleTypes[10].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() {
    await this.initPage()
    this.hasInited = true // 标记首次初始化完成（keep-alive 下 activated 据此判断再次进入需重新初始化）
  },
  activated() {
    // 从拍摄页返回：取回拍照结果/降级信息，保留表单不重新初始化
    const cam = this.$store.state.camera
    if (cam.result || cam.fallback) {
      const { result, fallback } = cam
      this.$store.commit('camera/clear')
      if (result) {
        this.cameraGuideType = result.type
        this.onCameraConfirm(result)
      } else {
        this.cameraGuideType = fallback.type
        this.handleCameraFail(fallback.error)
      }
      return
    }
    // 从车辆管理等其他页面再次进入（keep-alive 缓存复用）：按当前路由重新初始化
    if (this.hasInited) {
      this.initPage()
    }
  },
  methods:{
    async initPage() {
      // 整体重置为初始 data（keep-alive 缓存复用时清空上一次的新增/修改数据，含 watcher 改过的 vehicleTypes.disabled），再按当前模式初始化
      Object.assign(this.$data, this.$options.data.call(this, this))
      this.id=this.$route.params?.id
      this.approvalForm.supplierId=this.$route.params?.supplierId
      const urlParams = new URLSearchParams(window.location.search);
      const rawId = this.$route.query.supplierId || urlParams.get('supplierId');
      this.supplierId = rawId ? Number(rawId) : '';
      await this.getSupplierServiceTree();
      await this.getTypeList();
      if( this.id){
        await this.vehicleInfo()
      }else{
        // 新增：清空 el-tree 勾选状态（缓存复用时可能残留上一辆车的服务种类勾选）
        this.$nextTick(() => {
          this.$refs.tree && this.$refs.tree.setCheckedKeys([])
        })
        this.originData={
          vehicleType:'',
          vehicleStatus:'',
          virtualVehicle:'',
          serviceIds:[],
          hasLiabilityInsurance:'',
          insuranceCorp:'',
          liabilityInsuranceStartTime:'',
          liabilityInsuranceEndTime:'',
          insurancePicturePhoto:''
        }
        // 复制新增：从 query 预填类别/属性/服务种类（id 为空，提交仍走新增分支）
        this.prefillFromQuery()
      }
    },
    // 复制新增：从 query 解析并回填车辆类别/属性/服务种类 3 项，不调任何接口；
    // 字段缺失或为空时等价普通新增兜底；其余字段（照片/OCR/责任险/保单/车辆状态）保持重置后的空值
    // 注意：SPA 内 $router.push 跳转时 $route.query 保留原始类型（copyFlag 为数字 1），
    // 整页加载/刷新时则为字符串 "1"，此处统一 String() 兼容两种来源
    prefillFromQuery() {
      const urlParams = new URLSearchParams(window.location.search);
      const copyFlag = this.$route.query.copyFlag || urlParams.get('copyFlag');
      if (String(copyFlag) !== '1') {
        return
      }
      const vehicleType = this.$route.query.vehicleType || urlParams.get('vehicleType');
      const virtualVehicle = this.$route.query.virtualVehicle || urlParams.get('virtualVehicle');
      const serviceIds = this.$route.query.serviceIds || urlParams.get('serviceIds');
      if (vehicleType) {
        this.selectedOption = String(vehicleType).split(',').map(Number)
      }
      if (virtualVehicle) {
        this.virtualVehicle = Number(virtualVehicle)
      }
      // selectedOption 赋值触发 watch（类别 disabled 重置、小修车过滤拖车服务节点、setDefault），
      // 服务树勾选必须在 watch 过滤之后执行，$nextTick 回调注册顺序保证清空勾选 → watch 过滤 → 预填勾选
      this.$nextTick(() => {
        if (serviceIds) {
          this.$refs.tree && this.$refs.tree.setCheckedKeys(String(serviceIds).split(',').map(Number))
        }
      })
    },
    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) {
      color = color || ''
      if( color == '蓝' ) {
        this.vehicleLicense = 1
      } else if(color == '黄') {
        this.vehicleLicense = 2
      } else if(color == '临牌') {
        this.vehicleLicense = 4
      } else if(color.includes('黄绿')) {
        this.vehicleLicense = 6
      } else if(color.includes('绿')) {
        this.vehicleLicense = 3
      } else {
        this.vehicleLicense = 5
      }
    },
    onOversize() {
      this.$toast(`文件大小不能超过5M`)
    },
    // 将 base64 dataURL 转为 Blob，用于 APP WebView 只返回 content 的场景
    dataURLToBlob(dataURL) {
      const arr = dataURL.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    blobToDataURL(blob) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.onerror = () => reject(new Error('读取压缩图片失败'));
        reader.readAsDataURL(blob);
      });
    },
    compressImage(file, maxSize = 5 * 1024 * 1024) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
          const img = new Image();
          img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const originWidth = img.width;
            const originHeight = img.height;

            const tryQuality = (quality = 0.9) => {
              canvas.width = originWidth;
              canvas.height = originHeight;
              ctx.clearRect(0, 0, originWidth, originHeight);
              ctx.drawImage(img, 0, 0, originWidth, originHeight);
              canvas.toBlob((blob) => {
                if (!blob) return reject(new Error('压缩失败'));
                if (blob.size <= maxSize || quality <= 0.1) {
                  if (blob.size <= maxSize) {
                    resolve(blob);
                  } else {
                    tryResolution();
                  }
                  return;
                }
                tryQuality(quality - 0.1);
              }, 'image/jpeg', quality);
            };

            const tryResolution = (scale = 0.9, quality = 0.8) => {
              const width = Math.floor(originWidth * scale);
              const height = Math.floor(originHeight * scale);
              canvas.width = width;
              canvas.height = height;
              ctx.clearRect(0, 0, width, height);
              ctx.drawImage(img, 0, 0, width, height);
              canvas.toBlob((blob) => {
                if (!blob) return reject(new Error('压缩失败'));
                if (blob.size <= maxSize || scale <= 0.1) {
                  if (blob.size <= maxSize) {
                    resolve(blob);
                  } else {
                    reject(new Error('超过5M'));
                  }
                  return;
                }
                tryResolution(scale - 0.1, quality);
              }, 'image/jpeg', quality);
            };

            tryQuality();
          };
          img.onerror = () => reject(new Error('图片加载失败'));
          img.src = e.target.result;
        };
        reader.onerror = () => reject(new Error('文件读取失败'));
        reader.readAsDataURL(file);
      });
    },
    async compressFileItem(fileItem, maxSize = 5 * 1024 * 1024) {
      let rawFile = fileItem?.file;
      const rawContent = fileItem?.content;

      // 打印可序列化的基础信息，VConsole 中对象会显示为空，但 name/size/type 能看到
      console.log('rawFile info:', {
        name: rawFile?.name,
        size: rawFile?.size,
        type: rawFile?.type,
        constructor: rawFile?.constructor?.name
      });
      console.log('rawContent prefix:', typeof rawContent === 'string' ? rawContent.slice(0, 60) : rawContent);

      // 部分 APP WebView 返回的文件对象异常或为空，但 content 是 base64，此时用 content 兜底
      if ((!rawFile || !(rawFile instanceof File) || rawFile.size === 0) &&
          typeof rawContent === 'string' && rawContent.startsWith('data:')) {
        try {
          const blob = this.dataURLToBlob(rawContent);
          const ext = blob.type === 'image/png' ? 'png' : 'jpg';
          rawFile = new File([blob], `upload_${Date.now()}.${ext}`, { type: blob.type || 'image/jpeg' });
          console.log('fallback file from content, size:', rawFile.size);
        } catch (e) {
          console.error('content to file error:', e);
          throw new Error('文件解析失败，请重新上传');
        }
      }

      if (!rawFile) {
        throw new Error('未获取到文件，请重新上传');
      }

      if (rawFile.size <= maxSize) return rawFile;
      const blob = await this.compressImage(rawFile, maxSize);
      if (blob.size > maxSize) {
        throw new Error('超过5M');
      }
      const fileName = (rawFile.name || 'image').replace(/\.[^.]+$/, '') + '.jpg';
      const compressedFile = new File([blob], fileName, { type: 'image/jpeg' });
      fileItem.file = compressedFile;
      fileItem.size = compressedFile.size;
      fileItem.content = await this.blobToDataURL(blob);
      const mb1 = (compressedFile.size / 1024 / 1024).toFixed(2);
      console.log(`压缩后为：${mb1}M`)
      return compressedFile;
    },
    isCameraSupported() {   // 是否支持 getUserMedia（不支持则降级系统选择器）
      return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) && window.isSecureContext !== false
    },
    onLicenseSlotClick(type) {   // 行驶证三槽位点击：已有图片→预览，无图片→跳拍摄页（不支持相机则降级系统选择器）
      this.cameraGuideType = type
      const listMap = {
        front: 'vehicleLicenseFrontList',
        back: 'vehicleLicenseBackList',
        car: 'vehicleLicenseCarPhotoList'
      }
      const item = (this[listMap[type]] || [])[0]
      const src = item && (item.url || item.content)
      if (src) {
        // 已有图片：预览（删除按钮在拦截层之上，可删除后重拍）
        ImagePreview({ images: [src], closeable: true })
        return
      }
      // 无图片：拍照
      if (!this.isCameraSupported()) {
        // 不支持 getUserMedia（如 iOS 微信、非 HTTPS、老 WebView）：直接调系统选择器
        this.triggerNativeUpload(type)
        return
      }
      this.$router.push({ name: 'cameraGuide', query: { type } })
    },
    isCameraPermissionError(e) {   // 是否为相机权限类错误
      return !!(e && (e.name === 'NotAllowedError' || e.name === 'SecurityError' || e.name === 'PermissionDeniedError'))
    },
    handleCameraFail(e) {   // 相机不可用统一处理：权限类弹确认框，其他异常提示后由用户点击触发相册（保证点击手势有效）
      if (this.isCameraPermissionError(e)) {
        Dialog.confirm({
          title: '提示',
          message: '相机权限未开启，无法使用拍摄引导。是否重新尝试开启相机？',
          confirmButtonText: '重新尝试',
          cancelButtonText: '从相册选择',
          confirmButtonColor: '#354D93',
        }).then(() => {
          // 重新走前置探测，探测通过才打开拍摄引导
          this.onLicenseSlotClick(this.cameraGuideType)
        }).catch(() => {
          this.triggerNativeUpload(this.cameraGuideType)
        })
      } else {
        Dialog.alert({
          title: '提示',
          message: '当前设备无法调用相机拍摄，请从相册选择照片上传。',
          confirmButtonText: '从相册选择',
          confirmButtonColor: '#354D93',
        }).then(() => {
          this.triggerNativeUpload(this.cameraGuideType)
        })
      }
    },
    triggerNativeUpload(type) {  // 主动触发对应 uploader 的原生文件选择
      const refMap = { front: 'licenseFrontUploader', back: 'licenseBackUploader', car: 'licenseCarUploader' }
      this.$nextTick(() => {
        const uploader = this.$refs[refMap[type]]
        const input = uploader && uploader.$el && uploader.$el.querySelector('.van-uploader__input')
        if (input) input.click()
      })
    },
    onCameraConfirm({ blob, dataURL }) {   // 拍摄确认：构造 {file, content} 走现有压缩→上传→OCR 链路
      const type = this.cameraGuideType
      const file = new File([blob], `vehicle_license_${type}_${Date.now()}.jpg`, { type: 'image/jpeg' })
      const fileItem = { file, content: dataURL }
      const handlerMap = {
        front: 'vehicleLicenseFrontHandler',
        back: 'vehicleLicenseBackHandler',
        car: 'vehicleLicenseCarHandler'
      }
      const listMap = {
        front: 'vehicleLicenseFrontList',
        back: 'vehicleLicenseBackList',
        car: 'vehicleLicenseCarPhotoList'
      }
      // 写回 uploader 的 v-model 列表，使槽位缩略图回显
      this[listMap[type]] = [fileItem]
      this[handlerMap[type]](fileItem)
    },
    async vehicleLicenseFrontHandler(file) {    // 上传 行驶证首页
      console.log('file',file)
      try {
        const uploadFile = await this.compressFileItem(file);
        console.log('uploadFile',uploadFile)
        if (uploadFile.size > 5 * 1024 * 1024) {
          this.onOversize();
          return;
        }
        const formData = new FormData();
        formData.append("file" , uploadFile);
        let res = await uploadImage(formData)
        this.vehicleLicenseFront = res.data;
        await this.vehicleOcrHandler();
      } catch (e) {
        console.error('upload compress error:', e);
        if (e && e.message === '超过5M') {
          this.onOversize();
        } else {
          this.$toast(e && e.message ? e.message : '上传失败，请重试');
        }
      }
    },
    async vehicleLicenseBackHandler(file) {     // 上传 行驶证副页
      try {
        this.vehicleLicenseBackOcrFlag = true;
        const uploadFile = await this.compressFileItem(file);
        if (uploadFile.size > 5 * 1024 * 1024) {
          this.onOversize();
          return;
        }
        const formData = new FormData();
        formData.append("file" , uploadFile);
        let res = await uploadImage(formData);
        this.vehicleLicenseBack = res.data;
        await this.vehicleBackOcrHandler();
      } catch (e) {
        console.error('upload compress error:', e);
        if (e && e.message === '超过5M') {
          this.onOversize();
        } else {
          this.$toast(e && e.message ? e.message : '上传失败，请重试');
        }
      }
    },
    async vehicleLicenseCarHandler(file) {     // 上传 行驶证车辆照片
      try {
        const uploadFile = await this.compressFileItem(file);
        if (uploadFile.size > 5 * 1024 * 1024) {
          this.onOversize();
          return;
        }
        const formData = new FormData();
        formData.append("file" , uploadFile);
        let res = await uploadImage(formData);
        this.vehicleLicenseCarPhoto = res.data;
      } catch (e) {
        console.error('upload compress error:', e);
        if (e && e.message === '超过5M') {
          this.onOversize();
        } else {
          this.$toast(e && e.message ? e.message : '上传失败，请重试');
        }
      }
    },
    async vehicleFrontPhotoHandler(file) {     // 上传 车头照
      try {
        const uploadFile = await this.compressFileItem(file);
        if (uploadFile.size > 5 * 1024 * 1024) {
          this.onOversize();
          return;
        }
        const formData = new FormData();
        formData.append("file" , uploadFile);
        let res = await uploadImage(formData);
        this.vehicleFrontPhoto = res.data;
        await this.ocrCarFrontHandler()
      } catch (e) {
        console.error('upload compress error:', e);
        if (e && e.message === '超过5M') {
          this.onOversize();
        } else {
          this.$toast(e && e.message ? e.message : '上传失败，请重试');
        }
      }
    },
    vehicleLicenseFrontDelete() {              // 删除 行驶证首页
      this.vehicleLicenseFront = '';
    },
    vehicleLicenseBackDelete() {               // 删除 行驶证副页
      this.vehicleLicenseBack = '';
      this.vehicleLicenseBackOcrFlag = false;
    },
    vehicleLicenseCarPhotoDelete() {           // 删除 行驶证车辆照片
      this.vehicleLicenseCarPhoto = '';
    },
    vehicleFrontPhotoDelete() {                // 删除 车头照
      this.vehicleFrontPhoto = '';
    },
    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.preJudgeVirtualVehicle();
        this.vehicleLicenseInfo.address = frontInfo?.address;
        this.vehicleLicenseInfo.useNature = frontInfo?.useCharacter;
        this.vehicleLicenseInfo.model = frontInfo?.model;
        this.vehicleLicenseInfo.vinCode = String(frontInfo?.vin || '').toUpperCase().replace(/O/g, '0');
        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 preJudgeVirtualVehicle() {
      const wasLocked = this.virtualVehicleLocked;
      this.virtualVehicleLocked = false;
      this.virtualVehicleMatchRole = '';
      // 之前命中自有自动填入的值，本次未命中/识别失败则清空（自有车辆不可手动选），由操作人员手动选择 2/3/4
      if (wasLocked && this.virtualVehicle === 1) {
        this.virtualVehicle = '';
      }
      const owner = (this.vehicleLicenseInfo.owner || '').trim();
      if (!owner) {
        return;
      }
      try {
        const res = await preJudgeVirtualVehicleApi({
          owner,
          supplierId: this.supplierId || undefined  // 车辆归属服务商ID，自录场景为空由后端取当前用户服务商
        });
        if (res?.data?.locked) {
          this.virtualVehicleLocked = true;
          this.virtualVehicleMatchRole = res.data.matchRole || '';
          this.virtualVehicle = 1;
        }
      } catch (e) {
        // 预判失败不影响保存，选择器保持可编辑
      }
    },
    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({ supplierId: this.supplierId });
      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.virtualVehicleMatchRole = result.virtualVehicleMatchRole || '';
      this.virtualVehicleLocked = !!(result.virtualVehicleMatchRole && result.virtualVehicle === 1);
      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.back();
      /*if( this.supplierId ) {
        this.$router.back();
      } else {
        this.$router.push({
          name:'vehicleManage',
          params:{
            id: this.id
          }
        })
      }*/

    },
    validatePlateNumber(value) {
      if (!value) {
        return { valid: false, message: '请输入车牌号' }
      }
      const provinceList = ['京','津','冀','晋','蒙','辽','吉','黑','沪','苏','浙','皖','闽','赣','鲁','豫','鄂','湘','粤','桂','琼','渝','川','贵','云','藏','陕','甘','青','宁','新']
      const firstChar = value.charAt(0)
      if (!provinceList.includes(firstChar)) {
        return { valid: false, message: '车牌号首位必须是省级简称（京/沪/津/渝/冀/晋/辽/吉/黑/苏/浙/皖/闽/赣/鲁/豫/鄂/湘/粤/琼/川/贵/云/陕/甘/青/蒙/桂/藏/宁/新）' }
      }
      if (!/^[\u4e00-\u9fa5][A-Z0-9]+$/.test(value)) {
        return { valid: false, message: '车牌号只能包含汉字、字母和数字' }
      }
      if (![7, 8].includes(value.length)) {
        return { valid: false, message: `车牌号必须为 7 位或 8 位（当前 ${value.length} 位）` }
      }
      return { valid: true, message: '' }
    },
    validateVinNo(value) {
      const normalizedValue = String(value || '').toUpperCase()
      if (!normalizedValue) {
        return { valid: false, message: '车架号识别错误，请重新拍照上传。' }
      }
      if (!/^[A-NP-Z0-9]{17}$/.test(normalizedValue)) {
        if (normalizedValue.includes('O')) {
          return { valid: false, message: '车架号识别错误，请重新拍照上传。' }
        }
        if (!/^[A-NP-Z0-9]+$/.test(normalizedValue)) {
          return { valid: false, message: '车架号识别错误，请重新拍照上传。' }
        }
        return { valid: false, message: `车架号识别错误，请重新拍照上传。` }
      }
      return { valid: true, message: '' }
    },
    async submitBtn(){
      const plateResult = this.validatePlateNumber(this.carNum)
      if (!plateResult.valid) {
        Dialog.alert({ message: plateResult.message })
        return
      }
      const vinCode = String(this.vehicleLicenseInfo.vinCode || '')
      const vinResult = this.validateVinNo(vinCode)
      if (!vinResult.valid) {
        Dialog.alert({ message: vinResult.message })
        return
      }
      this.vehicleLicenseInfo.vinCode = vinCode
      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 : '',
          supplierId: this.supplierId || undefined,
          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";
/* 行驶证三槽位透明点击拦截层 */
.uploadSlotWrap{
  position: relative;
  display: inline-block;
  .slotClickMask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  /* 已上传图片的删除按钮置于拦截层之上，保证可删除重传 */
  ::v-deep .van-uploader__preview-delete{
    z-index: 11;
  }
}
.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;
  ::v-deep .van-nav-bar--fixed {
    z-index: 9999 !important;
  }
}
.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;
}
/* 车辆属性-匹配角色溯源 */
.virtualVehicleField {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .matchRoleArrow {
    margin-left: 6px;
    cursor: pointer;
    color: #909399;
    user-select: none;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    padding: 4px;
    transition: transform .2s;
    &.expanded {
      transform: rotate(180deg);
      color: #354D93;
    }
  }
}
.matchRolePanel {
  margin: 0 25px 6px 0;
  padding: 4px 10px;
  font-size: 12px;
  color: #606266;
  background: #f4f4f5;
  border-radius: 4px;
  line-height: 1.6;
  text-align: right;
}
.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>
