tenant-Platform/src/views/additionalOrder/additional/index.vue

<template>
  <div class="addtional">
    <el-descriptions title="补录订单业务员信息" class="white-p24 border-6">
      <el-descriptions-item>
        <template #default>
          <el-form :model="form">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="业务员：">
                  <el-input v-model="form.name" placeholder="输入业务员工姓名，手机号，工号查找" @click="handleFocus"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工号类型：">
                  <!--                  <el-select v-model="form.type">
                    <el-option label="业务员" value="A"></el-option>
                    <el-option label="代理人" value="B"></el-option>
                  </el-select>-->
                  <el-input v-model="form.type" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="归属：">
                  <el-cascader clearable style="width: 100%" v-model="form.deptId" :options="institutionList"
                    :props="tableProps"></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <div class="tap">
      <a class="anchor-item" :class="{ 'active': tapIndex === item.href }" v-for="(item, index) in taps"
        :href="`#${item.href}`" @click.prevent="handleTap(item, index)">
        <img :src="tapIndex === item.href ? item.active : item.img" />
        {{ item.text }}
      </a>
    </div>
    <el-collapse v-model="activeName" class="content-box" ref="collapse">
      <el-form ref="AdditionalFormRefs" :model="additionalForm" :rules="additionalRules">
        <div id="car">
          <el-collapse-item disabled name="car">
            <template #title>
              <span class="title" :ref="(el) => setSectionRef(el, 0)" id="car">
                车辆信息
                <span class="switch" @click.stop="handleSwitch('car')">
                  <span :class="{ 'write': carSwitch, 'identify': !carSwitch }">证件识别</span>
                  <span :class="{ 'identify': carSwitch, 'write': !carSwitch }">手动填写</span>
                </span>
              </span>
            </template>
            <div v-if="carSwitch" class="flex p-r-20px">
              <div class="w-340px">
                <el-form-item label="行驶证主页" class="white-m-p24">
                  <el-upload v-if="!xszFront" drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'xszf')">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传图识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'xszf')">
                    <div class="upload-box">
                      <img class="upload-image" :src="xszFront" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('xszf')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('xszf')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="行驶证副页" class="white-m-p24">
                  <el-upload v-if="!xszBack" drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'xszb')">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传图识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'xszb')">
                    <div class="upload-box">
                      <img class="upload-image" :src="xszBack" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('xszb')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('xszb')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="flex-1">
                <el-row :gutter="20">
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车牌" prop="licenseNo">
                      <el-input v-model="additionalForm.licenseNo" placeholder="输入车牌号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车牌识别代码" prop="vinNo">
                      <el-input v-model="additionalForm.vinNo" placeholder="请输入车辆识别代码">
                        <template #append>
                          <el-button icon="Search" @click="handleCarType(1)" />
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="品牌型号" prop="brandName">
                      <el-input v-model="additionalForm.brandName" placeholder="请输入品牌型号">
                        <template #append>
                          <el-button icon="Search" @click="handleCarType(2)" />
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="发动机" prop="engineNo">
                      <el-input v-model="additionalForm.engineNo" placeholder="请输入发动机号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="年款" prop="carYear">
                      <el-input v-model="additionalForm.carYear" placeholder="请输入年款"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="座位数" prop="seatCount">
                      <el-input v-model="additionalForm.seatCount" placeholder="请输入座位数">
                        <template #append>
                          <span>座</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="整备质量" prop="completeKerbMass">
                      <el-input v-model="additionalForm.completeKerbMass" placeholder="输入整备质量">
                        <template #append>
                          <span>千克（KG）</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="核定载质量" prop="limitLoad">
                      <el-input v-model="additionalForm.limitLoad" placeholder="请输入核定载质量">
                        <template #append>
                          <span>千克（KG）</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="排量" prop="displacement">
                      <el-input v-model="additionalForm.displacement" placeholder="请输入排量">
                        <template #append>
                          <span>升（L）</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="功率" prop="powerScale">
                      <el-input v-model="additionalForm.powerScale" placeholder="输入功率">
                        <template #append>
                          <span>千瓦（KW）</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="新车购置价" prop="purchasePrice">
                      <el-input v-model="additionalForm.purchasePrice" placeholder="请输入新车购置价">
                        <template #append>
                          <span>元</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="使用性质" prop="carNatureCode">
                      <el-select v-model="additionalForm.carNatureCode" placeholder="请选择">
                        <el-option v-for="(item, index) in optionObj.car_nature_code" :label="item.label"
                          :value="item.value" :key="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车辆用途" prop="vehicleUseCode">
                      <el-select v-model="additionalForm.vehicleUseCode" placeholder="请选择">
                        <el-option v-for="(item, index) in optionObj.vehicle_use_code" :label="item.label"
                          :value="item.value" :key="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车辆类型" prop="carTypeCode">
                      <el-select v-model="additionalForm.carTypeCode" placeholder="请选择">
                        <el-option v-for="(item, index) in optionObj.car_type_code" :label="item.label"
                          :value="item.value" :key="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="能源种类" prop="energyTypeCode">
                      <el-select v-model="additionalForm.energyTypeCode" placeholder="请选择">
                        <el-option v-for="(item, index) in optionObj.energy_type_code" :label="item.label"
                          :value="item.value" :key="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!--                  <el-col class="col-m-b-6" :span="8">
                                                  <el-form-item label="所属性质" prop="propertyCode">
                                                    <el-select v-model="additionalForm.propertyCode" placeholder="请选择">
                                                      <el-option label="性质1" value="1" key="1"></el-option>
                                                    </el-select>
                                                  </el-form-item>
                                                </el-col>-->
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="registerDate" label="注册日期">
                      <div id="registerDate" style="width: 100%">
                        <el-date-picker v-model="additionalForm.registerDate" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 100%"
                          @focus="inParkingDataFocus('registerDate', 'registerDate')" />
                      </div>

                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="issueDate" label="发证日期">
                      <div id="issueDate" style="width: 100%">
                        <el-date-picker v-model="additionalForm.issueDate" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 100%"
                          @focus="inParkingDataFocus('issueDate', 'issueDate')" />
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <el-row v-else :gutter="20">
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="车辆是否上牌？" prop="isRegistered">
                  <el-radio-group v-model="additionalForm.isRegistered">
                    <el-radio value="1">是</el-radio>
                    <el-radio value="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item :disabled="additionalForm.isRegistered == 1" label="车牌" prop="licenseNo">
                  <el-input v-model="additionalForm.licenseNo" minlength="7" maxlength="8"
                    placeholder="输入车牌号"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="车牌识别代码" prop="vinNo">
                  <el-input v-model="additionalForm.vinNo" placeholder="请输入车辆识别代码">
                    <template #append>
                      <el-button icon="Search" @click="handleCarNumber" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="品牌型号" prop="brandName">
                  <el-input v-model="additionalForm.brandName" placeholder="请输入品牌型号">
                    <template #append>
                      <el-button icon="Search" @click="handleCarCode" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="发动机号" prop="engineNo">
                  <el-input v-model="additionalForm.engineNo" placeholder="请输入发动机号"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="年款" prop="carYear">
                  <el-input v-model="additionalForm.carYear" placeholder="请输入年款"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="座位数" prop="seatCount">
                  <el-input v-model="additionalForm.seatCount" placeholder="请输入座位数">
                    <template #append>
                      <span>座</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="整备质量" prop="completeKerbMass">
                  <el-input v-model="additionalForm.completeKerbMass" placeholder="输入整备质量">
                    <template #append>
                      <span>千克（KG）</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="核定载质量" prop="limitLoad">
                  <el-input v-model="additionalForm.limitLoad" placeholder="请输入核定载质量">
                    <template #append>
                      <span>千克（KG）</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="排量" prop="displacement">
                  <el-input v-model="additionalForm.displacement" placeholder="请输入排量">
                    <template #append>
                      <span>升（L）</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="功率" prop="powerScale">
                  <el-input v-model="additionalForm.powerScale" placeholder="输入功率">
                    <template #append>
                      <span>千瓦（KW）</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="新车购置价" prop="purchasePrice">
                  <el-input v-model="additionalForm.purchasePrice" placeholder="请输入新车购置价">
                    <template #append>
                      <span>元</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="使用性质" prop="carNatureCode">
                  <el-select v-model="additionalForm.carNatureCode" placeholder="请选择">
                    <el-option v-for="(item, index) in optionObj.car_nature_code" :label="item.lable"
                      :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="车辆用途" prop="vehicleUseCode">
                  <el-select v-model="additionalForm.vehicleUseCode" placeholder="请选择">
                    <el-option v-for="(item, index) in optionObj.vehicle_use_code" :label="item.label"
                      :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="车辆类型" prop="carTypeCode">
                  <el-select v-model="additionalForm.carTypeCode" placeholder="请选择">
                    <el-option v-for="(item, index) in optionObj.car_type_code" :label="item.label" :value="item.value"
                      :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="能源种类" prop="energyTypeCode">
                  <el-select v-model="additionalForm.energyTypeCode" placeholder="请选择">
                    <el-option v-for="(item, index) in optionObj.energy_type_code" :label="item.label"
                      :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <!--              <el-col class="col-m-b-6" :span="6">
                                      <el-form-item class="white-m-p24" label="所属性质" prop="propertyCode">
                                        <el-select v-model="additionalForm.propertyCode" placeholder="请选择">
                                          <el-option label="性质1" value="1" key="1"></el-option>
                                        </el-select>
                                      </el-form-item>
                                    </el-col>-->
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="注册日期" prop="registerDate">
                  <div id="registerDate1" style="width: 100%">
                    <el-date-picker v-model="additionalForm.registerDate" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 100%"
                      @focus="inParkingDataFocus('registerDate1', 'registerDate')" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="发证日期" prop="issueDate">
                  <div id="issueDate1" style="width: 100%">
                    <el-date-picker v-model="additionalForm.issueDate" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 100%"
                      @focus="inParkingDataFocus('issueDate1', 'issueDate')" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <template #icon="{ isActive }">
              <span class="icon" @click="setActiveNames('car', isActive)">
                <span class="icon-ele">
                  {{ isActive ? '收起' : '展开' }}
                </span>
                <el-icon v-if="isActive" color="#333">
                  <ArrowDownBold />
                </el-icon>
                <el-icon v-else color="#333">
                  <ArrowUpBold />
                </el-icon>
              </span>
            </template>
          </el-collapse-item>
        </div>
        <div id="ower">
          <el-collapse-item disabled name="ower">
            <template #title>
              <span class="title" :ref="(el) => setSectionRef(el, 1)" id="ower">
                车主信息
                <span class="switch" @click.stop="handleSwitch('ower')">
                  <span :class="{ 'write': owerSwitch, 'identify': !owerSwitch }">证件识别</span>
                  <span :class="{ 'identify': owerSwitch, 'write': !owerSwitch }">手动填写</span>
                </span>
              </span>
            </template>
            <div v-if="owerSwitch" class="flex p-r-20px">
              <div class="w-340px" v-if="additionalForm.personType1 === '1'">
                <el-form-item label="身份证正面页" class="white-m-p24">
                  <el-upload v-if="!sfzFront" drag @change="uploadImage($event, 'sfzf')" :auto-upload="false"
                    :show-file-list="false">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传人像面识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'sfzf')">
                    <div class="upload-box">
                      <img class="upload-image" :src="sfzFront" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('sfzf')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('sfzf')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="身份证背面页" class="white-m-p24">
                  <el-upload v-if="!sfzBack" drag @change="uploadImage($event, 'sfzb')" :auto-upload="false"
                    :show-file-list="false">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传国徽面识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'sfzb')">
                    <div class="upload-box">
                      <img class="upload-image" :src="sfzBack" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('sfzb')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('sfzb')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="w-340px" v-if="additionalForm.personType1 === '2'">
                <el-form-item label="营业执照" class="white-m-p24">
                  <el-upload v-if="!yyzzFront" drag @change="uploadImage($event, 'yyzz')" :auto-upload="false"
                    :show-file-list="false">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传营业执照</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'yyzz')">
                    <div class="upload-box">
                      <img class="upload-image" :src="yyzzFront" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('yyzz')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('yyzz')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="flex-1">
                <el-row :gutter="20">
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车主类型" prop="personType1">
                      <el-select v-model="additionalForm.personType1" placeholder="请选择">
                        <el-option label="个人" value="1" key="1"></el-option>
                        <el-option label="法人" value="2" key="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车主姓名" prop="name1">
                      <el-input v-model="additionalForm.name1"
                        @change="additionalForm.taxpayerIdentifier === '01' ? additionalForm.taxpayerName = additionalForm.name1 : ''"
                        placeholder="输入车主姓名"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车主手机号" prop="mobile1">
                      <el-input v-model="additionalForm.mobile1" placeholder="请输入车主手机号" maxlength="11"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="地址" prop="addr1">
                      <el-input v-model="additionalForm.addr1" placeholder="请输入地址"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="additionalForm.personType1 === '1'" class="col-m-b-6" :span="8">
                    <el-form-item label="证件号码" prop="identifyNumber1">
                      <el-input v-model="additionalForm.identifyNumber1"
                        @blur="additionalForm.taxpayerIdentifier === '01' ? additionalForm.identifyNumber = additionalForm.identifyNumber1 : ''"
                        placeholder="请输入证件号码" @change="getAgeByIdCard($event, additionalForm)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-else class="col-m-b-6" :span="8">
                    <el-form-item label="统一社会信用代码" prop="identifyNumber1">
                      <el-input v-model="additionalForm.identifyNumber1" placeholder="请输入证件号码"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="identifyValidDate1" label="有效期起期">
                      <div id="identifyValidDate1" style="width: 100%">
                        <el-date-picker v-model="additionalForm.identifyValidDate1" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 100%"
                          @focus="inParkingDataFocus('identifyValidDate1', 'identifyValidDate1')" />
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="identifyValidEndDate1" label="有效期止期">
                      <div id="identifyValidEndDate1"
                        style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                        <el-date-picker v-model="additionalForm.identifyValidEndDate1" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 80%"
                          @focus="inParkingDataFocus('identifyValidEndDate1', 'identifyValidEndDate1')" />
                        <el-button type="primary" @click="longTime(1)">长期</el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8" v-if="additionalForm.personType1 === '1'">
                    <el-form-item label="年龄" prop="age1">
                      <el-input v-model.number="additionalForm.age1" placeholder="请输入年龄"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col class="col-m-b-6" :span="8" v-if="additionalForm.personType1 === '1'">
                    <el-form-item label="性别" prop="gender1">
                      <el-select v-model="additionalForm.gender1" placeholder="请选择">
                        <el-option label="男" value="男" key="1"></el-option>
                        <el-option label="女" value="女" key="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="电子邮箱" prop="email1">
                      <el-input v-model="additionalForm.email1" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" v-if="additionalForm.personType1 === '2'">
                    <el-form-item label="投保人座机" prop="telephone">
                      <el-input v-model="additionalForm.telephone1" placeholder="请输入投保人座机"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8" v-if="additionalForm.personType1 === '2'">
                    <el-form-item label="投保人联系人" prop="person">
                      <el-input v-model="additionalForm.person1" placeholder="请输入投保人联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" v-if="additionalForm.personType1 === '2'">
                    <el-form-item label="联系人证件号码" prop="age">
                      <el-input v-model.number="additionalForm.age1" placeholder="请输入联系人证件号码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" v-if="additionalForm.personType1 === '2'">
                    <el-form-item prop="identifyValidEndDate" label="有效期止期">
                      <el-date-picker v-model="additionalForm.identifyValidEndDate1" type="date" placeholder="请选择"
                        value-format="YYYY-MM-DD" style="width: 100%" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8" v-if="additionalForm.personType1 === '2'">
                    <el-form-item label="注册资金" prop="money">
                      <el-input v-model="additionalForm.registeredCapital1" placeholder="请输入注册资金">
                        <template #append>
                          <span>元</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <el-row v-else :gutter="20">
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="车主类型" prop="personType1">
                  <el-select v-model="additionalForm.personType1" placeholder="请选择">
                    <el-option label="个人" value="1" key="1"></el-option>
                    <el-option label="法人" value="2" key="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="车主姓名" prop="name1">
                  <el-input v-model="additionalForm.name1"
                    @change="additionalForm.taxpayerIdentifier === '01' ? additionalForm.taxpayerName = additionalForm.name1 : ''"
                    placeholder="输入车主姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="车主手机号" prop="mobile1">
                  <el-input v-model="additionalForm.mobile1" placeholder="请输入车主手机号" maxlength="11">
                    <template #append>
                      <el-button icon="Search" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="地址" prop="addr1">
                  <el-input v-model="additionalForm.addr1" placeholder="请输入地址"></el-input>
                </el-form-item>
              </el-col>

              <el-col v-if="additionalForm.personType1 === '1'" class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="证件号码" prop="identifyNumber1">
                  <el-input v-model="additionalForm.identifyNumber1"
                    @blur="additionalForm.taxpayerIdentifier === '01' ? additionalForm.identifyNumber = additionalForm.identifyNumber1 : ''"
                    placeholder="请输入证件号码" @change="getAgeByIdCard($event, additionalForm);"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-else class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="统一社会信用代码" prop="identifyNumber1">
                  <el-input v-model="additionalForm.identifyNumber1" placeholder="请输入证件号码"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item prop="identifyValidDate1" label="有效期2起期">
                  <div id="identifyValidDate2" style="width: 100%">
                    <el-date-picker v-model="additionalForm.identifyValidDate1" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 100%"
                      @focus="inParkingDataFocus('identifyValidDate2', 'identifyValidDate2')" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item prop="identifyValidEndDate1" label="有效期2止期">
                  <div id="identifyValidEndDate2"
                    style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                    <el-date-picker v-model="additionalForm.identifyValidEndDate1" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 80%"
                      @focus="inParkingDataFocus('identifyValidEndDate2', 'identifyValidEndDate2')" />
                    <el-button type="primary" @click="longTime(1)">长期</el-button>
                  </div>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="年龄" prop="age1">
                  <el-input v-model.number="additionalForm.age1" placeholder="请输入年龄"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="性别" prop="gender1">
                  <el-select v-model="additionalForm.gender1" placeholder="请选择">
                    <el-option label="男" value="男" key="1"></el-option>
                    <el-option label="女" value="女" key="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="电子邮箱" prop="email1">
                  <el-input v-model="additionalForm.email1" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <template #icon="{ isActive }">
              <span class="icon" @click="setActiveNames('ower', isActive)">
                <span class="icon-ele">
                  {{ isActive ? '收起' : '展开' }}
                </span>
                <el-icon v-if="isActive" color="#333">
                  <ArrowDownBold />
                </el-icon>
                <el-icon v-else color="#333">
                  <ArrowUpBold />
                </el-icon>
              </span>
            </template>
          </el-collapse-item>
          <el-collapse-item disabled name="ower1">
            <template #title>
              <span class="title">
                投保人信息
                <span class="ordinary" :class="{ 'active': item.checked }" v-for="(item, index) in btns.ower1"
                  :key="item" @click.stop="handleChange(item, 'ower1')">
                  {{ item.text }}
                </span>
                <span class="switch" v-if="!btns.ower1Show" @click.stop="handleSwitch('ower1')">
                  <span :class="{ 'write': ower1Switch, 'identify': !ower1Switch }">证件识别</span>
                  <span :class="{ 'identify': ower1Switch, 'write': !ower1Switch }">手动填写</span>
                </span>
              </span>
            </template>
            <div v-if="ower1Switch && !btns.ower1Show" class="flex p-r-20px">
              <div class="w-340px">
                <el-form-item label="身份证正面页" class="white-m-p24">
                  <el-upload v-if="!sfz1Front" drag @change="uploadImage($event, 'sfzf1')" :auto-upload="false"
                    :show-file-list="false">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传人像面识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'sfzf1')">
                    <div class="upload-box">
                      <img class="upload-image" :src="sfz1Front" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('sfzf1')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('sfzf1')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="身份证背面页" class="white-m-p24">
                  <el-upload v-if="!sfz1Back" drag @change="uploadImage($event, 'sfzb1')" :auto-upload="false"
                    :show-file-list="false">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传国徽面识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'sfzb1')">
                    <div class="upload-box">
                      <img class="upload-image" :src="sfz1Back" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('sfzb1')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('sfzb1')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="flex-1">
                <el-row :gutter="20">
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="投保人类型" prop="personType2">
                      <el-select v-model="additionalForm.personType2" placeholder="请选择">
                        <el-option label="个人" value="1" key="1"></el-option>
                        <el-option label="法人" value="2" key="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="投保人姓名" prop="name2">
                      <el-input v-model="additionalForm.name2" placeholder="输入车主姓名"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--                  <el-col class="col-m-b-6" :span="8">
                                                  <el-form-item label="投保人类型" prop="b">
                                                    <el-select v-model="additionalForm.b" placeholder="请选择">
                                                      <el-option label="类型1" value="1" key="1"></el-option>
                                                    </el-select>
                                                  </el-form-item>
                                                </el-col>-->
                  <el-col v-if="additionalForm.personType2 === '1'" class="col-m-b-6" :span="8">
                    <el-form-item label="证件号码" prop="identifyNumber2">
                      <el-input v-model="additionalForm.identifyNumber2" placeholder="请输入证件号码"
                        @change="getAgeByIdCard($event, additionalForm)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-else class="col-m-b-6" :span="8">
                    <el-form-item label="统一社会信用代码" prop="identifyNumber2">
                      <el-input v-model="additionalForm.identifyNumber2" placeholder="请输入证件号码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="年龄" prop="age2">
                      <el-input v-model.number="additionalForm.age2" placeholder="请输入年龄"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="性别" prop="gender2">
                      <el-select v-model="additionalForm.gender2" placeholder="请选择">
                        <el-option label="男" value="男" key="1"></el-option>
                        <el-option label="女" value="女" key="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车主手机号" prop="mobile2">
                      <el-input v-model="additionalForm.mobile2" placeholder="请输入车主手机号" maxlength="11"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="地址" prop="addr2">
                      <el-input v-model="additionalForm.addr2" placeholder="请输入地址"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="电子邮箱" prop="email2">
                      <el-input v-model="additionalForm.email2" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="identifyValidDate2" label="有效期2起期">
                      <div id="identifyValidDate3" style="width: 100%">
                        <el-date-picker v-model="additionalForm.identifyValidDate2" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 100%"
                          @focus="inParkingDataFocus('identifyValidDate3', 'identifyValidDate3')" />
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="identifyValidEndDate2" label="有效期2止期">
                      <div id="identifyValidEndDate3"
                        style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                        <el-date-picker v-model="additionalForm.identifyValidEndDate2" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 80%"
                          @focus="inParkingDataFocus('identifyValidEndDate3', 'identifyValidEndDate3')" />
                        <el-button type="primary" @click="longTime(2)">长期</el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <el-row v-if="!ower1Switch && !btns.ower1Show" :gutter="20">
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="车主类型" prop="personType2">
                  <el-select v-model="additionalForm.personType2" placeholder="请选择">
                    <el-option label="个人" value="1" key="1"></el-option>
                    <el-option label="法人" value="2" key="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="投保人姓名" prop="name2">
                  <el-input v-model="additionalForm.name2" placeholder="输入车主姓名"></el-input>
                </el-form-item>
              </el-col>
              <!--              <el-col class="col-m-b-6" :span="6">
                                      <el-form-item label="投保人类型" prop="b">
                                        <el-select v-model="additionalForm.b" placeholder="请选择">
                                          <el-option label="类型1" value="1" key="1"></el-option>
                                        </el-select>
                                      </el-form-item>
                                    </el-col>-->
              <el-col v-if="additionalForm.personType2 === '1'" class="col-m-b-6" :span="6">
                <el-form-item label="证件号码" prop="identifyNumber2">
                  <el-input v-model="additionalForm.identifyNumber2" placeholder="请输入证件号码"
                    @change="getAgeByIdCard($event, additionalForm)"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-else class="col-m-b-6" :span="6">
                <el-form-item label="统一社会信用代码" prop="identifyNumber2">
                  <el-input v-model="additionalForm.identifyNumber2" placeholder="请输入证件号码"></el-input>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="年龄" prop="age2">
                  <el-input v-model.number="additionalForm.age2" placeholder="请输入年龄"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="性别" prop="gender2">
                  <el-select v-model="additionalForm.gender2" placeholder="请选择">
                    <el-option label="男" value="男" key="1"></el-option>
                    <el-option label="女" value="女" key="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="车主手机号" prop="mobile2">
                  <el-input v-model="additionalForm.mobile2" placeholder="请输入车主手机号" maxlength="11"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="地址" prop="addr2">
                  <el-input v-model="additionalForm.addr2" placeholder="请输入地址"></el-input>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="电子邮箱" prop="email2">
                  <el-input v-model="additionalForm.email2" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" prop="identifyValidDate2" label="有效期2起期">
                  <div id="identifyValidDate4" style="width: 100%">
                    <el-date-picker v-model="additionalForm.identifyValidDate2" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 100%"
                      @focus="inParkingDataFocus('identifyValidDate4', additionalForm.identifyValidDate2)" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item prop="identifyValidEndDate2" label="有效期2止期">
                  <div id="identifyValidEndDate4"
                    style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                    <el-date-picker v-model="additionalForm.identifyValidEndDate2" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 80%"
                      @focus="inParkingDataFocus('identifyValidEndDate4', additionalForm.identifyValidEndDate2)" />
                    <el-button type="primary" @click="longTime(2)">长期</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <template #icon="{ isActive }">
              <span class="icon" @click="setActiveNames('ower1', isActive)">
                <span class="icon-ele">
                  {{ isActive ? '收起' : '展开' }}
                </span>
                <el-icon v-if="isActive" color="#333">
                  <ArrowDownBold />
                </el-icon>
                <el-icon v-else color="#333">
                  <ArrowUpBold />
                </el-icon>
              </span>
            </template>
          </el-collapse-item>
          <el-collapse-item disabled name="ower2">
            <template #title>
              <span class="title">
                被投保人信息
                <span class="ordinary" :class="{ 'active': item.checked }" v-for="(item, index) in btns.ower2"
                  :key="item" @click.stop="handleChange(item, 'ower2')">{{ item.text }}</span>
                <span class="switch" v-if="!btns.ower2show" @click.stop="handleSwitch('ower2')">
                  <span :class="{ 'write': ower2Switch, 'identify': !ower2Switch }">证件识别</span>
                  <span :class="{ 'identify': ower2Switch, 'write': !ower2Switch }">手动填写</span>
                </span>
              </span>
            </template>
            <div v-if="ower2Switch && !btns.ower2show" class="flex p-r-20px">
              <div class="w-340px">
                <el-form-item label="身份证正面页" class="white-m-p24">
                  <el-upload v-if="!sfz2Front" drag @change="uploadImage($event, 'sfzf2')" :auto-upload="false"
                    :show-file-list="false">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传人像面识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'sfzf2')">
                    <div class="upload-box">
                      <img class="upload-image" :src="sfz2Front" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('sfzf2')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('sfzf2')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="身份证背面页" class="white-m-p24">
                  <el-upload v-if="!sfz2Back" drag @change="uploadImage($event, 'sfzb2')" :auto-upload="false"
                    :show-file-list="false">
                    <div class="upload-box">
                      <div class="icon-box">
                        <el-icon style="font-size: 20px">
                          <Camera />
                        </el-icon>
                        <p>传国徽面识别</p>
                      </div>
                    </div>
                  </el-upload>
                  <el-upload v-else drag :auto-upload="false" :show-file-list="false"
                    @change="uploadImage($event, 'sfzb2')">
                    <div class="upload-box">
                      <img class="upload-image" :src="sfz2Back" />
                      <div class="btns">
                        <span style="margin-right: 20px" @click.stop="handleViewImage('sfzb2')"><el-icon>
                            <ZoomIn />
                          </el-icon>查看大图</span>
                        <span @click.stop="handleDelImage('sfzb2')"><el-icon>
                            <Delete />
                          </el-icon>删除</span>
                      </div>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="flex-1">
                <el-row :gutter="20">
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="被投保人类型" prop="personType3">
                      <el-select v-model="additionalForm.personType3" placeholder="请选择">
                        <el-option label="个人" value="1" key="1"></el-option>
                        <el-option label="法人" value="2" key="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="投保人姓名" prop="name3">
                      <el-input v-model="additionalForm.name3" placeholder="输入车主姓名"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--                  <el-col class="col-m-b-6" :span="8">
                                                  <el-form-item label="投保人类型" prop="b">
                                                    <el-select v-model="additionalForm.b" placeholder="请选择">
                                                      <el-option label="类型1" value="1" key="1"></el-option>
                                                    </el-select>
                                                  </el-form-item>
                                                </el-col>-->
                  <el-col v-if="additionalForm.personType3 === '1'" class="col-m-b-6" :span="8">
                    <el-form-item label="证件号码" prop="identifyNumber3">
                      <el-input v-model="additionalForm.identifyNumber3" placeholder="请输入证件号码"
                        @change="getAgeByIdCard($event, additionalForm)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-else class="col-m-b-6" :span="8">
                    <el-form-item label="统一社会信用代码" prop="identifyNumber3">
                      <el-input v-model="additionalForm.identifyNumber3" placeholder="请输入证件号码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="年龄" prop="age3">
                      <el-input v-model.number="additionalForm.age3" placeholder="请输入年龄"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="性别" prop="gender3">
                      <el-select v-model="additionalForm.gender3" placeholder="请选择">
                        <el-option label="男" value="男" key="1"></el-option>
                        <el-option label="女" value="女" key="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="车主手机号" prop="mobile3">
                      <el-input v-model="additionalForm.mobile3" placeholder="请输入车主手机号" maxlength="11"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="地址" prop="addr3">
                      <el-input v-model="additionalForm.addr3" placeholder="请输入地址"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item label="电子邮箱" prop="email3">
                      <el-input v-model="additionalForm.email3" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="identifyValidDate3" label="有效期3起期">
                      <div id="identifyValidDate5" style="width: 100%">
                        <el-date-picker v-model="additionalForm.identifyValidDate3" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 100%"
                          @focus="inParkingDataFocus('identifyValidDate5', additionalForm.identifyValidDate3)" />
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col class="col-m-b-6" :span="8">
                    <el-form-item prop="identifyValidEndDate3" label="有效期3止期">
                      <div id="identifyValidEndDate5"
                        style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                        <el-date-picker v-model="additionalForm.identifyValidEndDate3" type="date" placeholder="请选择"
                          value-format="YYYY-MM-DD" style="width: 80%"
                          @focus="inParkingDataFocus('identifyValidEndDate5', additionalForm.identifyValidEndDate3)" />
                        <el-button type="primary" @click="longTime(3)">长期</el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <el-row v-if="!ower2Switch && !btns.ower2show" :gutter="20">
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="被投保人类型" prop="personType3">
                  <el-select v-model="additionalForm.personType3" placeholder="请选择">
                    <el-option label="个人" value="1" key="1"></el-option>
                    <el-option label="法人" value="2" key="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="投保人姓名" prop="name3">
                  <el-input v-model="additionalForm.name3" placeholder="输入车主姓名"></el-input>
                </el-form-item>
              </el-col>
              <!--              <el-col class="col-m-b-6" :span="6">
                                      <el-form-item label="投保人类型" prop="b">
                                        <el-select v-model="additionalForm.b" placeholder="请选择">
                                          <el-option label="类型1" value="1" key="1"></el-option>
                                        </el-select>
                                      </el-form-item>
                                    </el-col>-->
              <el-col v-if="additionalForm.personType3 === '1'" class="col-m-b-6" :span="6">
                <el-form-item label="证件号码" prop="identifyNumber3">
                  <el-input v-model="additionalForm.identifyNumber3" placeholder="请输入证件号码"
                    @change="getAgeByIdCard($event, additionalForm)"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-else class="col-m-b-6" :span="6">
                <el-form-item label="证件号码" prop="identifyNumber3">
                  <el-input v-model="additionalForm.identifyNumber3" placeholder="请输入证件号码"></el-input>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="年龄" prop="age3">
                  <el-input v-model.number="additionalForm.age3" placeholder="请输入年龄"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" label="性别" prop="gender3">
                  <el-select v-model="additionalForm.gender3" placeholder="请选择">
                    <el-option label="男" value="男" key="1"></el-option>
                    <el-option label="女" value="女" key="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="车主手机号" prop="mobile3">
                  <el-input v-model="additionalForm.mobile3" placeholder="请输入车主手机号" maxlength="11"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="地址" prop="addr3">
                  <el-input v-model="additionalForm.addr3" placeholder="请输入地址"></el-input>
                </el-form-item>
              </el-col>

              <el-col class="col-m-b-6" :span="6">
                <el-form-item label="电子邮箱" prop="email3">
                  <el-input v-model="additionalForm.email3" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item class="white-m-p24" prop="identifyValidDate3" label="有效期3起期">
                  <div id="identifyValidDate6" style="width: 100%">
                    <el-date-picker v-model="additionalForm.identifyValidDate3" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 100%"
                      @focus="inParkingDataFocus('identifyValidDate6', additionalForm.identifyValidDate3)" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col class="col-m-b-6" :span="6">
                <el-form-item prop="identifyValidEndDate3" label="有效期3止期">
                  <div id="identifyValidEndDate6"
                    style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                    <el-date-picker v-model="additionalForm.identifyValidEndDate3" type="date" placeholder="请选择"
                      value-format="YYYY-MM-DD" style="width: 80%"
                      @focus="inParkingDataFocus('identifyValidEndDate6', additionalForm.identifyValidEndDate3)" />
                    <el-button type="primary" @click="longTime(3)">长期</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <template #icon="{ isActive }">
              <span class="icon" @click="setActiveNames('ower2', isActive)">
                <span class="icon-ele">
                  {{ isActive ? '收起' : '展开' }}
                </span>
                <el-icon v-if="isActive" color="#333">
                  <ArrowDownBold />
                </el-icon>
                <el-icon v-else color="#333">
                  <ArrowUpBold />
                </el-icon>
              </span>
            </template>
          </el-collapse-item>
        </div>
        <div id="insurance">
          <el-collapse-item disabled name="insurance">
            <template #title>
              <span class="title" :ref="(el) => setSectionRef(el, 2)" id="insurance">险种信息</span>
            </template>
            <div class="white-m-p24 insuranceInfo">
              <span class="type-title">险种类型：</span>
              <div style="width: calc(100% - 80px)">
                <el-form-item label="" prop="productId">
                  <el-radio-group v-model="additionalForm.productId">
                    <el-radio v-for="item in optionObj.insuranceType" :key="item.value" :value="item.value">{{
                      item.label
                    }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-table :data="insuranceData">
                  <el-table-column label="险种名称" prop="kindName"></el-table-column>
                  <el-table-column label="保额">
                    <template #default="scope">
                      <el-select v-model="scope.row.amount" style="width: 150px">
                        <el-option v-for="(item, index) in scope.row.options" :label="item.label"
                          :value="item.value"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button link type="primary" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-popover :visible="insuranceShow" :width="400" trigger="click">
                  <template #reference>
                    <div class="addData" @click="handleInsurance">
                      <el-icon>
                        <Plus />
                      </el-icon>添加险种
                    </div>
                  </template>
                  <insuranceSelect ref="InsuranceSelectRef" @close="handleInsuranceSelect"></insuranceSelect>
                </el-popover>
              </div>
            </div>
            <div class="white-m-p24 insuranceInfo">
              <span class="type-title">车船税：</span>
              <div style="width: calc(100% - 80px)">
                <el-form-item label="" prop="taxRelifFlag">
                  <el-select v-model="additionalForm.taxRelifFlag" style="width: 350px">
                    <el-option label="正常缴税" value="1" key="1"></el-option>
                    <el-option label="免税" value="2" key="2"></el-option>
                    <el-option label="减税" value="3" key="3"></el-option>
                    <el-option label="完税" value="4" key="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-row :gutter="20">
                  <el-col v-if="additionalForm.taxRelifFlag === '1'" :span="6">
                    <el-form-item label="纳税人识别号" prop="identifyNumber">
                      <el-input v-model="additionalForm.identifyNumber" placeholder="请输入纳税人识别号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="additionalForm.taxRelifFlag === '1'" :span="6">
                    <el-form-item label="纳税人名称" prop="taxpayerName">
                      <el-input v-model="additionalForm.taxpayerName" placeholder="请输入纳税人名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="additionalForm.taxRelifFlag === '1'" :span="6">
                    <el-form-item label="证件类型" prop="taxpayerIdentifier">
                      <el-select v-model="additionalForm.taxpayerIdentifier" placeholder="请选择">
                        <el-option v-for="(item, index) in optionObj.taxpayerIdentifier" :label="item.label"
                          :value="item.value" :key="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col v-if="additionalForm.taxRelifFlag === '2' || additionalForm.taxRelifFlag === '3'" :span="6">
                    <el-form-item label="减免税凭证号" prop="extendChar2">
                      <el-input v-model="additionalForm.extendChar2" placeholder="请输入减免税凭证号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="additionalForm.taxRelifFlag === '2' || additionalForm.taxRelifFlag === '3'" :span="6">
                    <el-form-item label="减免税原因" prop="relifReason">
                      <el-select v-model="additionalForm.relifReason" placeholder="请选择">
                        <el-option label="原因1" value="1" key="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col v-if="additionalForm.taxRelifFlag === '4'" :span="6">
                    <el-form-item label="完税凭证号" prop="paidFreeCertificate">
                      <el-input v-model="additionalForm.paidFreeCertificate" placeholder="请输入完税凭证号"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col
                    v-if="additionalForm.taxRelifFlag === '2' || additionalForm.taxRelifFlag === '3' || additionalForm.taxRelifFlag === '4'"
                    :span="6">
                    <el-form-item label="税务机关代码" prop="taxComCode">
                      <el-input v-model="additionalForm.taxComCode" placeholder="请输入税务机关代码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    v-if="additionalForm.taxRelifFlag === '2' || additionalForm.taxRelifFlag === '3' || additionalForm.taxRelifFlag === '4'"
                    :span="6">
                    <el-form-item label="税务机关名称" prop="taxComName">
                      <el-input v-model="additionalForm.taxComName" placeholder="请输入税务机关名称"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col v-if="additionalForm.taxRelifFlag === '3'" :span="6">
                    <el-form-item label="减税比例" prop="taxRelief">
                      <el-input v-model="additionalForm.taxRelief" placeholder="请输入减税比例"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col v-if="additionalForm.taxRelifFlag === '4'" :span="6">
                    <el-form-item label="完税凭证填发日期" prop="taxDocumentDate">
                      <el-date-picker v-model="additionalForm.taxDocumentDate" type="date" placeholder="请选择"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="additionalForm.taxRelifFlag === '4'" :span="6">
                    <el-form-item label="完税凭证地区" prop="taxPaidAreaCode">
                      <el-select v-model="additionalForm.taxPaidAreaCode" placeholder="请选择">
                        <el-option v-for="item in licensePlateRegion" :label="item.name" :value="item.code"
                          :key="item.code"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="white-m-p24 insuranceInfo">
              <span class="type-title">起保时间：</span>
              <div style="width: calc(100% - 80px)">
                <div class="insurance-jq">
                  <span>交强险</span>
                  <span class="checkbox" :class="{ 'cehcked': item.checked }" v-for="item in jqWork" :key="item"
                    @click="JQChange(item)">{{ item.text }}</span>
                  <div class="time">
                    <el-form-item prop="jqStart" label="">
                      <div id="jqStart" style="width: 100%">
                        <el-date-picker @change="jqChange" v-model="additionalForm.jqStart" type="datetime"
                          placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                          @focus="inParkingDataFocus('jqStart', additionalForm.jqStart)" />
                      </div>
                    </el-form-item>
                    &nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;
                    <el-form-item prop="jqEnd" label="">
                      <div id="jqEnd" style="width: 100%">
                        <el-date-picker v-model="additionalForm.jqEnd" type="datetime" placeholder="请选择"
                          value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                          @focus="inParkingDataFocus('jqEnd', additionalForm.jqEnd)" />
                      </div>
                    </el-form-item>
                  </div>
                </div>
                <div class="insurance-jq">
                  <span>商业险</span>
                  <span class="checkbox" :class="{ 'cehcked': item.checked }" v-for="item in syWork" :key="item"
                    @click="SYChange(item)">{{ item.text }}</span>
                  <div class="time">
                    <el-form-item prop="syStart" label="">
                      <div id="syStart" style="width: 100%">
                        <el-date-picker @change="syChange" v-model="additionalForm.syStart" type="datetime"
                          placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                          @focus="inParkingDataFocus('syStart', additionalForm.syStart)" />
                      </div>
                    </el-form-item>
                    &nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;
                    <el-form-item prop="syEnd" label="">
                      <div id="syEnd" style="width: 100%">
                        <el-date-picker v-model="additionalForm.syEnd" type="datetime" placeholder="请选择"
                          value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                          @focus="inParkingDataFocus('syEnd', additionalForm.syEnd)" />
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
            <template #icon="{ isActive }">
              <span class="icon" @click="setActiveNames('insurance', isActive)">
                <span class="icon-ele">
                  {{ isActive ? '收起' : '展开' }}
                </span>
                <el-icon v-if="isActive" color="#333">
                  <ArrowDownBold />
                </el-icon>
                <el-icon v-else color="#333">
                  <ArrowUpBold />
                </el-icon>
              </span>
            </template>
          </el-collapse-item>
        </div>
        <div id="quote">
          <el-collapse-item disabled name="quote">
            <template #title>
              <span class="title" :ref="(el) => setSectionRef(el, 3)" id="quote">投保信息</span>
            </template>
            <el-row :gutter="20" class="p-r-20px">
              <el-col :span="24">
                <el-form-item class="white-m-p24" label="车辆投保信息" prop="transfer">

                  <el-checkbox v-model="additionalForm.transfer" label="是否过户车" />
                  <el-checkbox v-model="additionalForm.transferBi" label="商业险是否过户" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="p-l-24px" label="保险公司" prop="companyId">
                  <el-select v-model="additionalForm.companyId" placeholder="请选择" filterable
                    @change="handleSelectCompany">
                    <el-option v-for="item in bankOption" :key="item.id" :value="item.id"
                      :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="报价协议" prop="agreementId">
                  <el-select v-model="additionalForm.agreementId" placeholder="请选择" filterable
                    @change="handleSelectAgreement">
                    <el-option v-for="item in agreementList" :key="item.id" :value="item.id"
                      :label="item.agreementTitle"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="对接人" prop="dockingPersonPhone">
                  <el-select v-model="additionalForm.dockingPersonPhone" placeholder="请选择" filterable
                    @change="handleSelectPerson">
                    <el-option v-for="item in costExternalList" :key="item.contactMobile" :value="item.contactMobile"
                      :label="item.contactPerson"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="签单时间" prop="signingTime">
                  <el-date-picker v-model="additionalForm.signingTime" type="datetime" placeholder="请选择"
                    value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="p-l-24px" label="评分" prop="score">
                  <el-input v-model="additionalForm.score" placeholder="请输入评分"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="车船税" prop="taxPremium">
                  <el-input v-model="additionalForm.taxPremium" @input="autoSumPremium()" @blur="cvalculateFees"
                    placeholder="请输入车船税">
                    <template #append>
                      <span>元</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="交强险保单号" prop="jqPolicyNo">
                  <el-input v-model="additionalForm.jqPolicyNo" placeholder="请输入交强险保单号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="交强险续保" prop="jqRenewal">
                  <el-select v-model="additionalForm.jqRenewal" placeholder="请选择">
                    <el-option label="是" value="1" key="1"></el-option>
                    <el-option label="否" value="0" key="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="p-l-24px" label="交强险保费" prop="jqPremium">
                  <el-input v-model="additionalForm.jqPremium" @input="autoSumPremium()" @blur="cvalculateFees"
                    placeholder="请输入交强险保费">
                    <template #append>
                      <span>元</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="驾意险保费" prop="jyPremium">
                  <el-input v-model="additionalForm.jyPremium" @input="autoSumPremium()" @blur="cvalculateFees"
                    placeholder="请输入驾意险保费">
                    <template #append>
                      <span>元</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>


              <el-col :span="6">
                <el-form-item label="商业险保单号" prop="syPolicyNo">
                  <el-input v-model="additionalForm.syPolicyNo" placeholder="请输入商业险保单号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商业险续保" prop="syRenewal">
                  <el-select v-model="additionalForm.syRenewal" placeholder="请选择">
                    <el-option label="是" value="1" key="1"></el-option>
                    <el-option label="否" value="0" key="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="p-l-24px" label="商业险保费" prop="syPremium">
                  <el-input v-model="additionalForm.syPremium" @input="autoSumPremium()" @blur="cvalculateFees"
                    placeholder="请输入商业险保费">
                    <template #append>
                      <span>元</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="总保费" prop="sumPremium">
                  <el-input v-model="additionalForm.sumPremium" placeholder="请输入总保费" @blur="cvalculateFees">
                    <template #append>
                      <span>元</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="驾意险保单号">
                  <el-input v-model="additionalForm.jyPolicyNo" placeholder="请输入驾意险保单号">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否现询" prop="">
                  <el-select v-model="additionalForm.isxx" placeholder="请选择" filterable @change="handleSelectIsxx">
                    <el-option :value="1" label="是"></el-option>
                    <el-option :value="0" label="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="p-l-24px" label="非现询费用" prop="">
                  <el-select v-model="additionalForm.cost" :disabled="additionalForm.isxx !== 0" placeholder="请选择"
                    filterable @change="cvalculateFees">
                    <el-option v-for="item in showCostList" :key="item.id" :value="item.id"
                      :label="item.productName"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="交强险总比例" prop="">
                  <el-input-number v-model="additionalForm.jqInlet" :disabled="additionalForm.isxx === 0" class="w-100%"
                    :precision="2" :min="1" :max="100" controls-position="right" @change="cvalculateFees">
                    <template #suffix>
                      <span>%</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商业险总比例" prop="">
                  <el-input-number v-model="additionalForm.syInlet" :disabled="additionalForm.isxx === 0" class="w-100%"
                    :precision="2" :min="1" :max="100" controls-position="right" @change="cvalculateFees">
                    <template #suffix>
                      <span>%</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="驾意险总比例" prop="">
                  <el-input-number v-model="additionalForm.jyInlet" :disabled="additionalForm.isxx === 0" class="w-100%"
                    :precision="2" :min="1" :max="100" controls-position="right" @change="cvalculateFees">
                    <template #suffix>
                      <span>%</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="补录费用" prop="" class="p-l-24px">
                  <el-select v-model="additionalForm.isrecordByLeader" placeholder="请选择" filterable
                    @change="cvalculateFees">
                    <el-option :value="true" label="代客录单费用-1"></el-option>
                    <el-option :value="false" label="内部协议费用不做-1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <template #icon="{ isActive }">
              <span class="icon">
                <el-button link type="primary" icon="Camera" @click.stop="handleUpload">影像上传</el-button>&nbsp;
                <div class="flex items-center cursor-pointer" @click="setActiveNames('quote', isActive)">
                  <span class="icon-ele flex a-c ">
                    {{ isActive ? '收起' : '展开' }}
                  </span>
                  <el-icon v-if="isActive" color="#333">
                    <ArrowDownBold />
                  </el-icon>
                  <el-icon v-else color="#333">
                    <ArrowUpBold />
                  </el-icon>
                </div>
              </span>
            </template>
          </el-collapse-item>
        </div>
        <div id="history">
          <el-collapse-item disabled name="history1">
            <template #title>
              <span class="title" :ref="(el) => setSectionRef(el, 4)" id="history">费用信息</span>
            </template>
            <table class="costTable m-[0_24px]" cellpadding="0" cellspacing="0">
              <thead>
                <tr>
                  <th>
                    <div>险种</div>
                  </th>
                  <th>
                    <div>保费</div>
                  </th>
                  <th colspan="2">
                    <div>入口费用</div>
                  </th>
                  <th colspan="2">
                    <div>出口费用</div>
                  </th>
                  <th colspan="2">
                    <div>手续费费用</div>
                  </th>
                  <th colspan="2">
                    <div>跟单费用</div>
                  </th>
                  <th colspan="2">
                    <div>加投费用（净费）</div>
                  </th>

                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>
                    <div>交强险</div>
                  </th>

                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jqPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jqInletRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jqReceivablePremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jqExportRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jqExportPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jqCommissionRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jqCommissionPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jqFollowRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jqFollowPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jqAdditionalRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jqAdditionalPremium }}</div>
                  </th>
                </tr>
                <tr>
                  <th>
                    <div>商业险</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.syPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.syInletRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.syReceivablePremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.syExportRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.syExportPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.syCommissionRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.syCommissionPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.syFollowRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.syFollowPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.syAdditionalRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.syAdditionalPremium }}</div>
                  </th>
                </tr>
                <tr>
                  <th>
                    <div>驾意险</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jyPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jyInletRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jyReceivablePremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jyExportRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jyExportPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jyCommissionRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jyCommissionPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jyFollowRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jyFollowPremium }}</div>
                  </th>

                  <th>
                    <div>{{ detailData?.costRatio?.jyAdditionalRatio }}%</div>
                  </th>
                  <th>
                    <div>￥{{ detailData?.feeOrdersVo?.jyAdditionalPremium }}</div>
                  </th>
                </tr>
                <tr>
                  <th colspan="2">
                    <div>合计：￥{{ Number(detailData?.feeOrdersVo?.totalPremium)?.toFixed(2) }}</div>
                  </th>
                  <th colspan="2">
                    <div>小计： ￥{{ Number(detailData?.feeOrdersVo?.totalReceivablePremium)?.toFixed(5) }}</div>
                  </th>
                  <th colspan="2">
                    <div>小计： ￥{{ Number(detailData?.feeOrdersVo?.totalExportPremium)?.toFixed(5) }}</div>
                  </th>
                  <th colspan="2">
                    <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqCommissionPremium) +
                      Number(detailData?.feeOrdersVo?.syCommissionPremium) +
                      Number(detailData?.feeOrdersVo?.jyCommissionPremium)).toFixed(5) }}</div>
                  </th>
                  <th colspan="2">
                    <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqFollowPremium) +
                      Number(detailData?.feeOrdersVo?.syFollowPremium) +
                      Number(detailData?.feeOrdersVo?.jyFollowPremium)).toFixed(5) }}</div>
                  </th>
                  <th colspan="2">
                    <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqAdditionalPremium) +
                      Number(detailData?.feeOrdersVo?.syAdditionalPremium) +
                      Number(detailData?.feeOrdersVo?.jyAdditionalPremium)).toFixed(5) }}</div>
                  </th>
                </tr>
              </tbody>
            </table>
            <template #icon="{ isActive }">
              <span class="icon" @click="setActiveNames('history1', isActive)">
                <span class="icon-ele">
                  {{ isActive ? '收起' : '展开' }}
                </span>
                <el-icon v-if="isActive" color="#333">
                  <ArrowDownBold />
                </el-icon>
                <el-icon v-else color="#333">
                  <ArrowUpBold />
                </el-icon>
              </span>
            </template>
          </el-collapse-item>
          <el-collapse-item disabled name="history2">
            <template #title>
              <span class="title" :ref="(el) => setSectionRef(el, 5)" id="equities">电子保单</span>
            </template>
            <div style="width: 100%">
              <el-form-item class="white-m-p24" label="交强保单">
                <el-upload v-if="!jqPolicy" :auto-upload="false" :show-file-list="false" accept=".pdf"
                  @change="uploadImage($event, 4)">
                  <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                </el-upload>
                <div class="w-full" v-else>
                  <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
                    <img style="width: 40px; height: 40px"
                      :src="jqPolicyName.includes('.png') || jqPolicyName?.includes('.jpg') || jqPolicyName?.includes('.jpeg') ? image : jqPolicyName?.includes('.pdf') ? pdf : jqPolicyName.includes('.doc') || jqPolicyName.includes('.docx') ? word : ''" />
                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ jqPolicyName }}</div>
                    <div class="flex items-center ">
                      <el-upload :auto-upload="false" :show-file-list="false" accept=".pdf"
                        @change="uploadImage($event, 4)" style="display: flex; align-items: center">
                        <el-icon class="btn-icon">
                          <Upload />
                        </el-icon>
                      </el-upload>
                      <el-icon class="btn-icon" @click="imageView(4)">
                        <View />
                      </el-icon>
                      <el-icon class="btn-icon" @click="downloadImage(4)">
                        <Download />
                      </el-icon>
                      <el-icon class="btn-icon" @click="deleteImage(4)">
                        <Delete />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="white-m-p24" label="商业保单">
                <el-upload v-if="!syPolicy" :auto-upload="false" :show-file-list="false" accept=".pdf"
                  @change="uploadImage($event, 5)">
                  <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                </el-upload>
                <div class="w-full" v-else>
                  <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
                    <img style="width: 40px; height: 40px"
                      :src="syPolicyName.includes('.png') || syPolicyName.includes('.jpg') || syPolicyName.includes('.jpeg') ? image : syPolicyName.includes('.pdf') ? pdf : syPolicyName.includes('.doc') || syPolicyName.includes('.docx') ? word : ''" />
                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ syPolicyName }}</div>
                    <div class="flex items-center ">
                      <el-upload :auto-upload="false" :show-file-list="false" accept=".pdf"
                        @change="uploadImage($event, 5)" style="display: flex; align-items: center">
                        <el-icon class="btn-icon">
                          <Upload />
                        </el-icon>
                      </el-upload>
                      <el-icon class="btn-icon" @click="imageView(5)">
                        <View />
                      </el-icon>
                      <el-icon class="btn-icon" @click="downloadImage(5)">
                        <Download />
                      </el-icon>
                      <el-icon class="btn-icon" @click="deleteImage(5)">
                        <Delete />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="white-m-p24" label="非车保单">
                <el-upload :auto-upload="false" v-if="!noPolicy" :show-file-list="false"
                  accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 6)">
                  <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                </el-upload>
                <div class="w-full" v-else>
                  <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
                    <img style="width: 40px; height: 40px"
                      :src="noPolicyName.includes('.png') || noPolicyName.includes('.jpg') || noPolicyName.includes('.jpeg') ? image : noPolicyName.includes('.pdf') ? pdf : noPolicyName.includes('.doc') || noPolicyName.includes('.docx') ? word : ''" />
                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ noPolicyName }}</div>
                    <div class="flex items-center ">
                      <el-upload :auto-upload="false" :show-file-list="false"
                        accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 6)"
                        style="display: flex; align-items: center">
                        <el-icon class="btn-icon">
                          <Upload />
                        </el-icon>
                      </el-upload>
                      <el-icon class="btn-icon" @click="imageView(6)">
                        <View />
                      </el-icon>
                      <el-icon class="btn-icon" @click="downloadImage(6)">
                        <Download />
                      </el-icon>
                      <el-icon class="btn-icon" @click="deleteImage(6)">
                        <Delete />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="white-m-p24" label="交强电子标志">
                <el-upload :auto-upload="false" v-if="!jqSign" :show-file-list="false"
                  accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 7)">
                  <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                </el-upload>
                <div class="w-full" v-else>
                  <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
                    <img style="width: 40px; height: 40px"
                      :src="jqSignName.includes('.png') || jqSignName.includes('.jpg') || jqSignName.includes('.jpeg') ? image : jqSignName.includes('.pdf') ? pdf : jqSignName.includes('.doc') || jqSignName.includes('.docx') ? word : ''" />
                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ jqSignName }}</div>
                    <div class="flex items-center ">
                      <el-upload :auto-upload="false" :show-file-list="false"
                        accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 7)"
                        style="display: flex; align-items: center">
                        <el-icon class="btn-icon">
                          <Upload />
                        </el-icon>
                      </el-upload>
                      <el-icon class="btn-icon" @click="imageView(7)">
                        <View />
                      </el-icon>
                      <el-icon class="btn-icon" @click="downloadImage(7)">
                        <Download />
                      </el-icon>
                      <el-icon class="btn-icon" @click="deleteImage(7)">
                        <Delete />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </div>
            <template #icon="{ isActive }">
              <span class="icon" @click="setActiveNames('history2', isActive)">
                <span class="icon-ele">
                  {{ isActive ? '收起' : '展开' }}
                </span>
                <el-icon v-if="isActive" color="#333">
                  <ArrowDownBold />
                </el-icon>
                <el-icon v-else color="#333">
                  <ArrowUpBold />
                </el-icon>
              </span>
            </template>
          </el-collapse-item>
        </div>
        <!-- <div id="equities">
              <el-collapse-item disabled name="equities">
                  <template #title>
                      <span class="title">权益信息</span>
                  </template>
                  <div class="equities">
                      <div class="header">
                          <span>生活服务权益</span>
                          <el-button class="choseEquities" color="#E5F3FF" size="small" @click="handleOpenEquities">选择权益</el-button>
                      </div>
                      <el-table
                        :data="equitiesData"
                        style="width: 100%"
                      >
                          <el-table-column prop="a" label="权益名称"></el-table-column>
                          <el-table-column prop="a" label="权益类型"></el-table-column>
                          <el-table-column prop="a" label="接收人"></el-table-column>
                          <el-table-column prop="a" label="发放数量"></el-table-column>
                          <el-table-column prop="a" label="价格"></el-table-column>
                      </el-table>
                      <div class="total">
                          <div class="money">
                              <div class="totalItem">
                                  <span>可用金额：</span>
                                  <span>{{ useMoney }}</span>
                              </div>
                              <div class="totalItem">
                                  <span>已使用：</span>
                                  <span>{{ usedMoney }}</span>
                              </div>
                              <div class="totalItem">
                                  <span>剩余金额：</span>
                                  <span style="color: #FF8C21">{{ lastMoney }}</span>
                              </div>
                          </div>
                      </div>
                  </div>
                  <template #icon="{ isActive }">
                    <span class="icon">
                      <span class="icon-ele">
                        {{ isActive ? '收起' : '展开' }}
                      </span>
                    </span>
                  </template>
              </el-collapse-item>
          </div> -->
      </el-form>
    </el-collapse>
    <div class="footer">
      <el-button plain type="primary" :loading="submitLoading" @click="handleSave">暂存</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleSubmit(AdditionalFormRefs)">提交</el-button>
    </div>
    <el-image-viewer v-if="showImage" :url-list="showImageUrl" @close="showImage = false" />
    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
    <el-dialog :close-on-click-modal="false" title="文件预览" v-model="fileShow">
      <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="选择业务员" v-model="salesmanShow" width="700">
      <salesmanSelect ref="SalesmanSelectRef" fromPage="10" @close="handleSalesmanSelect"></salesmanSelect>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="选择车型" v-model="carTypeShow" width="900">
      <carTypeSelect ref="CarTypeSelectRef" @close="handleCarTypeSelect"></carTypeSelect>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="影像上传" v-model="uploadShow" width="700">
      <imageData ref="ImageDataRef" @close="handleImageData"></imageData>
    </el-dialog>
    <Equities :show="equitiesShow" @close="handleEquities"></Equities>
  </div>
</template>

<script setup lang="ts">
import api from '@/api'
import car1 from '@/assets/images/additional/car1.png'
import car2 from '@/assets/images/additional/car2.png'
import ower1 from '@/assets/images/additional/ower1.png'
import ower2 from '@/assets/images/additional/ower2.png'
import quote1 from '@/assets/images/additional/quote1.png'
import quote2 from '@/assets/images/additional/quote2.png'
import insurance1 from '@/assets/images/additional/insurance1.png'
import insurance2 from '@/assets/images/additional/insurance2.png'
import history1 from '@/assets/images/additional/history1.png'
import history2 from '@/assets/images/additional/history2.png'
import equities1 from '@/assets/images/additional/equities1.png'
import equities2 from '@/assets/images/additional/equities2.png'
import image from "@/assets/images/image.png";
import pdf from "@/assets/images/pdf.png";
import word from "@/assets/images/word.png";

import { ElMessage } from 'element-plus'
import VueOfficeDocx from "@vue-office/docx";
import { useRouter, useRoute } from 'vue-router'

import salesmanSelect from './modules/salesmanSelect.vue'
import carTypeSelect from './modules/carTypeSelect.vue'
import insuranceSelect from './modules/insuranceSelect.vue'
import imageData from './modules/imageData.vue'
import { gainFocus } from "@/utils/dataformat"
import Decimal from 'decimal.js'

import agreement from "@/api/modules/agreement.ts";
import { id } from 'element-plus/es/locale/index.mjs'
// import { Search } from '@element-plus/icons-vue'

const myRouter = useRouter()
const myRoute = useRoute()

const SalesmanSelectRef = ref()
const CarTypeSelectRef = ref()
const InsuranceSelectRef = ref()
const ImageDataRef = ref()

// 使用性质，车辆用途，车辆类型，能源种类，车辆种类
let optionObj = ref({
  vehicle_use_code: [], // 车辆用途
  car_nature_code: [], // 使用性质
  energy_type_code: [], // 能源种类
  car_type_code: [], // 车辆类型
  car_kind_code: [], // 车辆种类
  taxpayerIdentifier: [], // 证件类型
  insuranceType: [], // 险种类型
})

const licensePlateRegion = ref([])

const initOption = () => {
  let list = ['vehicle_use_code', 'car_nature_code', 'energy_type_code', 'car_type_code', 'car_kind_code', 'taxpayerIdentifier']
  list.forEach(item => {
    api.additionalApi.dictDetails(item).then((res: any) => {
      if (res.code == 200) {
        if (res.data) {
          optionObj.value[item] = res.data
        }
      }
    })
  })
  api.commonApi.personInfo('insurance_type').then((res: any) => {
    if (res.code == 200) {
      optionObj.value.insuranceType = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
  api.agreementApi.getAreaLicense('0').then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.areaName,
        })
        return val;
      })
      licensePlateRegion.value = data;
    }
  });
}

// 保险公司列表
let bankOption = ref([])
const initCompany = () => {
  api.insuranceApi.leftList('').then(res => {
    if (res.code == 200) {
      bankOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 查询条件
let form = ref({})
// 归属机构
let institutionList = ref([])
const tableProps = ref({
  value: "id",
  label: "name",
  children: "children",
  checkStrictly: true,
})
// 页签
let tapIndex = ref('car')
const taps = ref([
  {
    text: '车辆信息',
    href: 'car',
    img: car1,
    active: car2
  },
  {
    text: '关系人信息',
    href: 'ower',
    img: ower1,
    active: ower2
  },
  {
    text: '选择险种',
    href: 'insurance',
    img: insurance1,
    active: insurance2
  },
  {
    text: '投保信息',
    href: 'quote',
    img: quote1,
    active: quote2
  },
  {
    text: '费用信息',
    href: 'history',
    img: history1,
    active: history2
  },
  // {
  //   text: '权益信息',
  //   href: 'equities',
  //   img: equities2,
  //   active: equities1
  // }
])
const inParkingDataFocus = (e: string, fieldName: string) => {
  gainFocus(e, additionalForm, fieldName);
}
const handleTap = (item, index) => {
  const element = document.getElementById(`${item.href}`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}
//折叠面板
let activeName = ref(['car', 'ower', 'ower1', 'ower2', 'insurance', 'quote', 'history1', 'history2', 'equities'])
// const handleChange = (val) => {
//
// }
// 开关
let carSwitch = ref(true)
let owerSwitch = ref(true)
let ower1Switch = ref(true)
let ower2Switch = ref(true)
const handleSwitch = (type) => {
  switch (type) {
    case 'car':
      carSwitch.value = !carSwitch.value
      break;
    case 'ower':
      owerSwitch.value = !owerSwitch.value
      break;
    case 'ower1':
      ower1Switch.value = !ower1Switch.value
      break;
    case 'ower2':
      ower2Switch.value = !ower2Switch.value
      break;
  }
}

let AdditionalFormRefs = ref()
// 证件识别
let additionalForm = ref({
  // 车辆信息
  licenseNo: '', // 车牌
  vinNo: '', // 车牌识别代码
  brandName: '', // 品牌型号
  engineNo: '', // 发动机号
  carYear: '', // 年款
  seatCount: '', // 座位数
  completeKerbMass: '', // 整备质量
  limitLoad: '', // 核定载质量
  displacement: '', // 排量
  powerScale: '', // 功率
  purchasePrice: '', // 新车购置价
  carNatureCode: '', // 使用性质
  vehicleUseCode: '', // 车辆用途
  carTypeCode: '', // 车辆类型
  energyTypeCode: '', // 能源种类
  // propertyCode: '', // 所属性质
  registerDate: '', // 注册日期
  issueDate: '', // 发证日期

  isRegistered: null, // 是否上牌

  // 车主信息
  personType1: '1', // 1个人2法人
  name1: '',
  mobile1: '',
  addr1: '',
  identifyNumber1: '',
  identifyValidDate1: '',
  identifyValidEndDate1: '',
  age1: '',
  gender1: '',
  email1: '',

  // 投保人信息
  personType2: '1', // 1个人2法人
  carOwner2: 0,
  name2: '',
  mobile2: '',
  addr2: '',
  identifyNumber2: '',
  identifyValidDate2: '',
  identifyValidEndDate2: '',
  age2: '',
  gender2: '',
  email2: '',

  // 被投保人信息
  personType3: '1', // 1个人2法人
  carOwner3: 0,
  name3: '',
  mobile3: '',
  addr3: '',
  identifyNumber3: '',
  identifyValidDate3: '',
  identifyValidEndDate3: '',
  age3: '',
  gender3: '',
  email3: '',

  // 险种
  productId: null,

  taxRelifFlag: '1', // 纳税类型
  identifyNumber: '', // 纳税人识别号
  organizationCode: '', // 企业纳税人识别号
  taxpayerName: '', // 纳税人名称
  taxpayerIdentifier: '01', // 证件类型

  extendChar2: '', // 减免税凭证号
  relifReason: '', // 减免税原因

  paidFreeCertificate: '', // 完税凭证号
  taxComCode: '', // 税务机关代码
  taxComName: '', // 税务机关名称
  taxRelief: '', // 减税比例
  taxDocumentDate: '', // 完税凭证填发日期
  taxPaidAreaCode: '', // 完税凭证地区

  jqStart: '', // 交强起保时间起期
  jqEnd: '', // 交强起保时间止期
  syStart: '', // 商业起保时间起期
  syEnd: '', // 商业起保时间止期

  //车辆投保信息
  transferBi: false,
  transfer: false,
  companyId: '',
  signingTime: '',
  score: '',
  taxPremium: '',
  jqPolicyNo: '',
  jqRenewal: '',
  jqPremium: '',
  jyPremium: '',
  syPolicyNo: '',
  jyPolicyNo: '',
  syRenewal: '',
  syPremium: '',
  sumPremium: '',

  // 保费信息
  agreementId: '',
  isInquiry: null,
  jqInletRatio: null,
  syInletRatio: null,
  jyInletRatio: null,
  jqExportRatio: null,
  syExportRatio: null,
  jyExportRatio: null,
})
let additionalRules = ref({
  licenseNo: [
    { required: true, message: "请输入车牌", trigger: "blur" },
    { pattern: /[\u4e00-\u9fa5\u3400-\u4DBF\u20000-\u2A6DFa-zA-Z0-9]+/, message: '车牌只允许输入汉字、字母、数字组合', trigger: 'blur' }
  ],
  vinNo: [
    { required: true, message: "请输入车牌识别代码", trigger: "change" },
    { pattern: /^[a-zA-Z0-9]{17}$/, min: 17, max: 17, message: '车辆识别代码长度为17位字母数字组合' }
  ],
  brandName: [
    { required: true, message: "请输入品牌型号", trigger: "change" }
  ],
  engineNo: [
    { required: true, message: "请输入发动机号", trigger: "blur" }
  ],
  // carYear: [
  //   { required: true, message: "请输入年款", trigger: "blur" }
  // ],
  seatCount: [
    { required: true, message: "请输入座位数", trigger: "blur" }
  ],
  completeKerbMass: [
    { required: true, message: "请输入整备质量", trigger: "blur" }
  ],
  // limitLoad: [
  //   { required: true, message: "请输入核定载质量", trigger: "blur" }
  // ],
  displacement: [
    { required: true, message: "请输入排量", trigger: "blur" }
  ],
  // powerScale: [
  //   { required: true, message: "请输入功率", trigger: "blur" }
  // ],
  purchasePrice: [
    { required: true, message: "请输入新车购置价", trigger: "blur" }
  ],
  carNatureCode: [
    { required: true, message: "请选择使用性质", trigger: "change" }
  ],
  vehicleUseCode: [
    { required: true, message: "请选择车辆用途", trigger: "change" }
  ],
  carTypeCode: [
    { required: true, message: "请选择车辆类型", trigger: "change" }
  ],
  energyTypeCode: [
    { required: true, message: "请选择能源种类", trigger: "change" }
  ],
  // propertyCode: [
  //   { required: true, message: "请选择所属性质", trigger: "change" }
  // ],
  registerDate: [
    { required: true, message: "请选择注册日期", trigger: "change" }
  ],
  issueDate: [
    { required: true, message: "请选择发证日期", trigger: "change" }
  ],

  isRegistered: [
    { required: true, message: "请选择", trigger: "change" }
  ],

  name1: [
    { required: true, message: "请输入车主姓名", trigger: "blur" }
  ],
  mobile1: [
    { required: true, message: "请输入车主手机号", trigger: "blur" }
  ],
  addr1: [
    { required: true, message: "请输入地址", trigger: "blur" }
  ],
  personType1: [
    { required: true, message: "请选择类型", trigger: "change" }
  ],
  identifyNumber1: [
    { required: true, message: "请输入证件号码", trigger: "blur" }
  ],
  identifyValidDate1: [
    { required: true, message: "请选择有效期起期", trigger: "change" }
  ],
  identifyValidEndDate1: [
    { required: true, message: "请选择有效期止期", trigger: "change" }
  ],
  age1: [
    { required: true, message: "请输入年龄", trigger: "blur" },
    { type: 'number', message: '年龄必须是数字' }
  ],
  gender1: [
    { required: true, message: "请选择性别", trigger: "change" }
  ],
  // email1: [
  //     { required: true, message: "请输入电子邮箱", trigger: "blur" }
  // ],

  name2: [
    { required: true, message: "请输入车主姓名", trigger: "blur" }
  ],
  mobile2: [
    { required: true, message: "请输入车主手机号", trigger: "blur" }
  ],
  addr2: [
    { required: true, message: "请输入地址", trigger: "blur" }
  ],
  personType2: [
    { required: true, message: "请选择类型", trigger: "change" }
  ],
  identifyNumber2: [
    { required: true, message: "请输入证件号码", trigger: "blur" }
  ],
  identifyValidDate2: [
    { required: true, message: "请选择有效期起期", trigger: "change" }
  ],
  identifyValidEndDate2: [
    { required: true, message: "请选择有效期止期", trigger: "change" }
  ],
  age2: [
    { required: true, message: "请输入年龄", trigger: "blur" },
    { type: 'number', message: '年龄必须是数字' }
  ],
  gender2: [
    { required: true, message: "请选择性别", trigger: "change" }
  ],
  // email2: [
  //     { required: true, message: "请输入电子邮箱", trigger: "blur" }
  // ],

  name3: [
    { required: true, message: "请输入车主姓名", trigger: "blur" }
  ],
  mobile3: [
    { required: true, message: "请输入车主手机号", trigger: "blur" }
  ],
  addr3: [
    { required: true, message: "请输入地址", trigger: "blur" }
  ],
  personType3: [
    { required: true, message: "请选择类型", trigger: "change" }
  ],
  identifyNumber3: [
    { required: true, message: "请输入证件号码", trigger: "blur" }
  ],
  identifyValidDate3: [
    { required: true, message: "请选择有效期起期", trigger: "change" }
  ],
  identifyValidEndDate3: [
    { required: true, message: "请选择有效期止期", trigger: "change" }
  ],
  age3: [
    { required: true, message: "请输入年龄", trigger: "blur" },
    { type: 'number', message: '年龄必须是数字' }
  ],
  gender3: [
    { required: true, message: "请选择性别", trigger: "change" }
  ],
  // email3: [
  //     { required: true, message: "请输入电子邮箱", trigger: "blur" }
  // ],

  taxRelifFlag: [
    { required: true, message: "请选择纳税类型", trigger: "change" }
  ],
  identifyNumber: [
    { required: true, message: "请输入纳税人识别号", trigger: "blur" }
  ],
  organizationCode: [
    { required: true, message: "请输入纳税人识别号", trigger: "blur" }
  ],
  taxpayerName: [
    { required: true, message: "请输入纳税人名称", trigger: "blur" }
  ],
  taxpayerIdentifier: [
    { required: true, message: "请选择证件类型", trigger: "change" }
  ],
  extendChar2: [
    { required: true, message: "请输入减免税凭证号", trigger: "blur" }
  ],
  relifReason: [
    { required: true, message: "请输入减免税原因", trigger: "blur" }
  ],
  paidFreeCertificate: [
    { required: true, message: "请输入完税凭证号", trigger: "blur" }
  ],
  taxComCode: [
    { required: true, message: "请输入税务机关代码", trigger: "blur" }
  ],
  taxComName: [
    { required: true, message: "请输入税务机关名称", trigger: "blur" }
  ],
  taxRelief: [
    { required: true, message: "请输入减税比例", trigger: "blur" }
  ],
  taxDocumentDate: [
    { required: true, message: "请选择完税凭证填发日期", trigger: "change" }
  ],
  taxPaidAreaCode: [
    { required: true, message: "请选择完税凭证地区", trigger: "change" }
  ],

  companyId: [
    { required: true, message: "请选择保险公司", trigger: "change" }
  ],
  agreementId: [
    { required: true, message: "请选择报价协议", trigger: "change" }
  ],
  dockingPersonPhone: [
    { required: true, message: "请选择对接人", trigger: "change" }
  ],
  signingTime: [
    { required: true, message: "请选择签单日期", trigger: "change" }
  ]

})
// 车牌识别
const handleCarNumber = () => {
  api.additionalApi.vinSearch(additionalForm.value.licenseNo).then((res: any) => {
    if (res.code == 200) {

    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 车架号识别
const handleCarCode = () => {
  api.additionalApi.licenseSearch(additionalForm.value.vinNo).then((res: any) => {
    if (res.code == 200) {

    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 是否同车主/同投保人
let btns = ref({
  ower1Show: true,
  ower2show: true,
  ower1: [{
    text: '同车主',
    checked: true
  }],
  ower2: [{
    text: '同投保人',
    checked: false
  }, {
    text: '同车主',
    checked: true
  }]
})
const handleChange = (item, type) => {
  switch (type) {
    case 'ower1':
      item.checked = !item.checked
      btns.value.ower1Show = btns.value.ower1.some(a => a.checked)
      if (btns.value.ower1Show) {
        additionalForm.value.personType2 = additionalForm.value.personType1 // 1个人2法人
        additionalForm.value.carOwner2 = 1
        additionalForm.value.name2 = additionalForm.value.name1
        additionalForm.value.mobile2 = additionalForm.value.mobile1
        additionalForm.value.addr2 = additionalForm.value.addr1
        additionalForm.value.identifyNumber2 = additionalForm.value.identifyNumber1
        additionalForm.value.identifyValidDate2 = additionalForm.value.identifyValidDate1
        additionalForm.value.identifyValidEndDate2 = additionalForm.value.identifyValidEndDate1
        additionalForm.value.age2 = additionalForm.value.age1
        additionalForm.value.gender2 = additionalForm.value.gender1
        additionalForm.value.email2 = additionalForm.value.email1
      } else {
        additionalForm.value.personType2 = '1'
        additionalForm.value.carOwner2 = 0
        additionalForm.value.name2 = ''
        additionalForm.value.mobile2 = ''
        additionalForm.value.addr2 = ''
        additionalForm.value.identifyNumber2 = ''
        additionalForm.value.identifyValidDate2 = ''
        additionalForm.value.identifyValidEndDate2 = ''
        additionalForm.value.age2 = ''
        additionalForm.value.gender2 = ''
        additionalForm.value.email2 = ''
      }
      break;
    case 'ower2':
      item.checked = !item.checked
      let list = btns.value.ower2.filter(a => a.text != item.text)
      list.forEach(a => a.checked = false)
      btns.value.ower2show = btns.value.ower2.some(a => a.checked)
      if (btns.value.ower2show) {
        let obj = btns.value.ower2.find(a => a.checked)
        if (obj.text === '同投保人') {
          additionalForm.value.personType3 = additionalForm.value.personType2 // 1个人2法人
          additionalForm.value.carOwner3 = 2
          additionalForm.value.name3 = additionalForm.value.name2
          additionalForm.value.mobile3 = additionalForm.value.mobile2
          additionalForm.value.addr3 = additionalForm.value.addr2
          additionalForm.value.identifyNumber3 = additionalForm.value.identifyNumber2
          additionalForm.value.identifyValidDate3 = additionalForm.value.identifyValidDate2
          additionalForm.value.identifyValidEndDate3 = additionalForm.value.identifyValidEndDate2
          additionalForm.value.age3 = additionalForm.value.age2
          additionalForm.value.gender3 = additionalForm.value.gender2
          additionalForm.value.email3 = additionalForm.value.email2
        } else {
          additionalForm.value.personType3 = additionalForm.value.personType1 // 1个人2法人
          additionalForm.value.carOwner3 = 1
          additionalForm.value.name3 = additionalForm.value.name1
          additionalForm.value.mobile3 = additionalForm.value.mobile1
          additionalForm.value.addr3 = additionalForm.value.addr1
          additionalForm.value.identifyNumber3 = additionalForm.value.identifyNumber1
          additionalForm.value.identifyValidDate3 = additionalForm.value.identifyValidDate1
          additionalForm.value.identifyValidEndDate3 = additionalForm.value.identifyValidEndDate1
          additionalForm.value.age3 = additionalForm.value.age1
          additionalForm.value.gender3 = additionalForm.value.gender1
          additionalForm.value.email3 = additionalForm.value.email1
        }
      } else {
        additionalForm.value.personType3 = '1'
        additionalForm.value.carOwner3 = 0
        additionalForm.value.name3 = ''
        additionalForm.value.mobile3 = ''
        additionalForm.value.addr3 = ''
        additionalForm.value.identifyNumber3 = ''
        additionalForm.value.identifyValidDate3 = ''
        additionalForm.value.identifyValidEndDate3 = ''
        additionalForm.value.age3 = ''
        additionalForm.value.gender3 = ''
        additionalForm.value.email3 = ''
      }
      break;
  }
}

// 险种
let insuranceRules = ref({
  taxRelifFlag: [
    { required: true, message: "请选择纳税类型", trigger: "change" }
  ],
  identifyNumber: [
    { required: true, message: "请输入纳税人识别号", trigger: "blur" }
  ],
  organizationCode: [
    { required: true, message: "请输入纳税人识别号", trigger: "blur" }
  ],
  taxpayerName: [
    { required: true, message: "请输入纳税人名称", trigger: "blur" }
  ],
  taxpayerIdentifier: [
    { required: true, message: "请选择证件类型", trigger: "change" }
  ],
  extendChar2: [
    { required: true, message: "请输入减免税凭证号", trigger: "blur" }
  ],
  relifReason: [
    { required: true, message: "请输入减免税原因", trigger: "blur" }
  ],
  paidFreeCertificate: [
    { required: true, message: "请输入完税凭证号", trigger: "blur" }
  ],
  taxComCode: [
    { required: true, message: "请输入税务机关代码", trigger: "blur" }
  ],
  taxComName: [
    { required: true, message: "请输入税务机关名称", trigger: "blur" }
  ],
  taxRelief: [
    { required: true, message: "请输入减税比例", trigger: "blur" }
  ],
  taxDocumentDate: [
    { required: true, message: "请选择完税凭证填发日期", trigger: "change" }
  ],
  taxPaidAreaCode: [
    { required: true, message: "请选择完税凭证地区", trigger: "change" }
  ],
})
// 列表
let insuranceData = ref([])
// 交强即时生效
let jqWork = ref([
  { text: '即时生效', checked: false }
])
// 根据身份证号换算年龄
const getAgeByIdCard = (idCard: any, type?: any) => {
  //获取用户身份证号码
  const userCard = idCard
  //如果用户身份证号码为undefined则返回空
  if (!userCard) {
    return ''
  }
  // 获取出生日期
  const yearBirth = userCard.substring(6, 10)
  const monthBirth = userCard.substring(10, 12)
  const dayBirth = userCard.substring(12, 14)
  // 获取当前年月日并计算年龄
  const myDate = new Date()
  const monthNow = myDate.getMonth() + 1
  const dayNow = myDate.getDate()
  let age = myDate.getFullYear() - yearBirth
  if (monthNow > monthBirth || (monthNow == monthBirth && dayNow > dayBirth)) {
    age++
  }
  // type.age = age
  return age
}
const noeYearPast = (time) => {
  let strYear: any = time.getFullYear();
  let strDay: any = time.getDate();
  let strMonth: any = time.getMonth() + 1;
  let hh: any = time.getHours();
  let minutes: any = time.getMinutes(); // 分
  let Seconds: any = time.getSeconds();
  if (hh < 10) {
    hh = "0" + hh;
  }
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (Seconds < 10) {
    Seconds = "0" + Seconds;
  }
  if (strMonth < 10) {
    strMonth = "0" + strMonth;
  }
  if (strDay < 10) {
    strDay = "0" + strDay;
  }
  let datastr =
    strYear +
    "-" +
    strMonth +
    "-" +
    strDay +
    " " +
    hh +
    ":" +
    minutes +
    ":" +
    Seconds;
  return datastr;
}
// 删除险种
const handleDelete = (item) => {
  insuranceData.value = insuranceData.value.filter(a => a.id !== item.id)
}
const oneYearPast1 = (time) => {
  //明年减一秒
  let date = new Date(time);
  date.setSeconds(date.getSeconds() - 1);
  date.setFullYear(date.getFullYear() + 1); //一年后
  date.setTime(date.getTime()); //一年后的前一天
  let strYear: any = date.getFullYear();
  let strDay: any = date.getDate();
  let strMonth: any = date.getMonth() + 1;
  let hh: any = date.getHours();
  let minutes: any = date.getMinutes(); // 分
  let Seconds: any = date.getSeconds();
  if (hh < 10) {
    hh = "0" + hh;
  }
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (Seconds < 10) {
    Seconds = "0" + Seconds;
  }
  if (strMonth < 10) {
    strMonth = "0" + strMonth;
  }
  if (strDay < 10) {
    strDay = "0" + strDay;
  }
  let datastr =
    strYear +
    "-" +
    strMonth +
    "-" +
    strDay +
    " " +
    hh +
    ":" +
    minutes +
    ":" +
    Seconds;
  return datastr;
}
//当前日期的次日
const transformTime1 = () => {
  let date = new Date();
  date.setFullYear(date.getFullYear());
  date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
  let strYear: any = date.getFullYear();
  let strDay: any = date.getDate();
  let strMonth: any = date.getMonth() + 1;
  let hh: any = date.getHours();
  if (hh < 10) {
    hh = "0" + hh;
  }
  if (strMonth < 10) {
    strMonth = "0" + strMonth;
  }
  if (strDay < 10) {
    strDay = "0" + strDay;
  }
  let datastr = strYear + "-" + strMonth + "-" + strDay + " " + "00:00:00";
  return datastr;
}
const JQChange = (item) => {
  item.checked = !item.checked
  if (jqWork.value.some(a => a.checked)) {
    let date: any = new Date();
    date.setHours(date.getHours() + 2);
    date.setMinutes(0);
    date.setSeconds(0);
    additionalForm.value.jqStart = noeYearPast(date)
    additionalForm.value.jqEnd = oneYearPast1(date)
  } else {
    additionalForm.value.jqStart = transformTime1()
    additionalForm.value.jqEnd = oneYearPast1(additionalForm.value.jqStart)
  }
}
const jqChange = (e: any) => {
  additionalForm.value.jqEnd = oneYearPast1(e)
}

// 商业即时生效
let syWork = ref([
  { text: '即时生效', checked: false }
])
const SYChange = (item) => {
  item.checked = !item.checked
  if (syWork.value.some(a => a.checked)) {
    let date: any = new Date();
    date.setHours(date.getHours() + 2);
    date.setMinutes(0);
    date.setSeconds(0);
    additionalForm.value.syStart = noeYearPast(date)
    additionalForm.value.syEnd = oneYearPast1(date)
  } else {
    additionalForm.value.syStart = transformTime1()
    additionalForm.value.syEnd = oneYearPast1(additionalForm.value.syStart)
  }
}
const syChange = (e: any) => {
  additionalForm.value.syEnd = oneYearPast1(e)
}

// 根据保险公司获取协议
let agreementList = ref([])
const handleSelectCompany = (e) => {
  api.additionalApi.getContactAgreement(e).then((res: any) => {
    if (res.code == 200) {
      agreementList.value = res.data
    } else {
      agreementList.value = []
    }
  })
}

// 根据协议获取对接人
let costExternalList = ref([])
const handleSelectAgreement = (ptlAgreementId) => {
  api.additionalApi.getCostExternalList({ ptlAgreementId }).then((res: any) => {
    if (res.code == 200) {
      costExternalList.value = res.data
      if (additionalForm.value.dockingPersonPhone) handleSelectPerson(additionalForm.value.dockingPersonPhone)
    } else {
      costExternalList.value = []
    }
  })
}

const showCostList = computed(() => {
  const arr = costList.value.filter(v => v.isInquiry === '1')
  if (additionalForm.value.productId) return arr.filter(v => v.productId === additionalForm.value.productId)
  return arr
})
// 根据对接人获取非现询费用
let costList = ref([])
const handleSelectPerson = (e) => {
  const obj = costExternalList.value.find(v => v.contactMobile === e)
  costList.value = obj?.costExternalListVo || []
}

const handleSelectIsxx = (e) => {
  if (!additionalForm.value.productId) {
    ElMessage({
      message: '请先选择险种',
      type: 'warning'
    })
    additionalForm.value.isxx = ''
    return
  }
  if (e === 1) {
    const obj = costList.value.find(v => v.productId === additionalForm.value.productId && v.isInquiry === '0')
    if (!obj) {
      ElMessage({
        message: '没有符合的现询费用',
        type: 'warning'
      })
      return
    }
    additionalForm.value.cost1 = obj.id
    cvalculateFees()
  }
}

// 根据协议获取现循
let selectList = ref([])

// 根据协议获取费用
const handleAgreementSelect = () => {
  api.additionalApi.getContactAgreementCost({
    agreementId: additionalForm.value.agreementId,
    productId: additionalForm.value.productId,
    isInquiry: additionalForm.value.isInquiry
  }).then((res: any) => {
    if (res.code == 200) {
      selectList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}


// 根据协议获取费用
const cvalculateFees = () => {
  const str = additionalForm.value.cost || additionalForm.value.cost1
  if (!str) return
  const { costExternalTypeAdds, productId } = costList.value.find(v => v.id === str)
  additionalForm.value.productId = productId
  const objInsurance = {
    '交强险': 'jq',
    '商业险': 'sy',
    '驾意险': 'jy',
  }
  for (const key in objInsurance) {
    const obj = costExternalTypeAdds.find(v => v.costType === key)
    const element = objInsurance[key];
    if (!additionalForm.value.isxx) additionalForm.value[element + 'Inlet'] = additionalForm.value[element + 'Inlet'] ?? obj?.inlet ?? null
    additionalForm.value[element + 'AddThrow'] = additionalForm.value[element + 'AddThrow'] ?? obj?.addThrow ?? null
    additionalForm.value[element + 'Export'] = additionalForm.value[element + 'Export'] ?? obj?.export ?? null
    additionalForm.value[element + 'KeepPointRatio'] = additionalForm.value[element + 'KeepPointRatio'] ?? obj?.keepPointRatio ?? null
  }
  api.additionalApi.cvalculateFees({
    agreementId: additionalForm.value.agreementId,
    ...additionalForm.value,
    mobile: realQuoteUserId.value
  }).then((res: any) => {
    if (res.code == 200) {
      detailData.value = {
        ...detailData.value,
        ...res.data
      }
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 影像上传
let uploadShow = ref(false)
let fileList = ref([])
const handleUpload = () => {
  uploadShow.value = true
  if (fileList.value) {
    nextTick(() => {
      ImageDataRef.value.initData(fileList.value, 'edit')
    })
  } else {
    let obj = {
      xszFrontResult: xszFrontResult.value,
      xszBackResult: xszBackResult.value,
      sfzFrontResult: sfzFrontResult.value,
      sfzBackResult: sfzBackResult.value,
      sfz1FrontResult: sfz1FrontResult.value,
      sfz1BackResult: sfz1BackResult.value,
      sfz2FrontResult: sfz2FrontResult.value,
      sfz2BackResult: sfz2BackResult.value
    }
    nextTick(() => {
      ImageDataRef.value.initData(obj)
    })
  }
}
const handleImageData = (data) => {
  if (data && data.length > 0) {
    fileList.value = [...data]
  }
  uploadShow.value = false
}

// 识别上传
// 行驶证
let xszFront = ref('')
let xszBack = ref('')
let sfzFront = ref('')
let sfzBack = ref('')
let sfz1Front = ref('')
let sfz1Back = ref('')
let sfz2Front = ref('')
let sfz2Back = ref('')

let yyzzFront = ref('')

let xszFrontFile = ref(null)
let xszBackFile = ref(null)
let sfzFrontFile = ref(null)
let sfzBackFile = ref(null)
let sfz1FrontFile = ref(null)
let sfz1BackFile = ref(null)
let sfz2FrontFile = ref(null)
let sfz2BackFile = ref(null)

let yyzzFrontFile = ref(null)

let xszFrontResult = ref(null)
let xszBackResult = ref(null)
let sfzFrontResult = ref(null)
let sfzBackResult = ref(null)
let sfz1FrontResult = ref(null)
let sfz1BackResult = ref(null)
let sfz2FrontResult = ref(null)
let sfz2BackResult = ref(null)

let yyzzFrontResult = ref(null)

// 保费信息
let historyRules = ref({
  a: [
    { required: true, message: "请选择报价协议", trigger: "change" }
  ],
  b: [
    { required: true, message: "请选择是否现询", trigger: "change" }
  ],
  c: [
    { required: true, message: "请选择非现询费用", trigger: "change" }
  ],
})
// 交强保单
let jqPolicyName = ref('')
let jqPolicyId = ref('')
let jqPolicy = ref('')
// 商业保单
let syPolicyName = ref('')
let syPolicyId = ref('')
let syPolicy = ref('')
// 非车保单
let noPolicyName = ref('')
let noPolicyId = ref('')
let noPolicy = ref('')
// 交强电子标志
let jqSignName = ref('')
let jqSignId = ref('')
let jqSign = ref('')
// 图片预览地址
let imageShow = ref(false)
let imageUrl = ref('')
// word
let fileShow = ref(false)
let fileUrl = ref('')

// 上传图片
const uploadImage = async (file, type) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  params.append("type", "image");

  const { code, data, msg } = await api.commonApi.fileUpload(params)
  if (code == 200) {
    let result: any = { ...data }
    switch (type) {
      case 'xszf':
        xszFront.value = result.downloadUrl
        xszFrontFile.value = files
        xszFrontResult.value = result
        // if(xszFront.value&&xszBack.value) {
        //
        // }
        const fileParams = new FormData()
        fileParams.append('image1', xszFrontFile.value)
        if (xszBackFile.value) {
          fileParams.append('image2', xszBackFile.value)
        }
        api.additionalApi.drivingPermit(fileParams).then((res: any) => {
          if (res.code == 200) {
            let data = res.data.carInfo
            additionalForm.value.licenseNo = data.plateNo // 车牌号
            additionalForm.value.vinNo = data.vin // 车架号
            additionalForm.value.brandName = data.backOcrID // 品牌型号
            additionalForm.value.engineNo = data.engine // 发动机
            // additionalForm.value.carYear = data.carYear // 年款
            additionalForm.value.seatCount = data.approvedPassengersCapacity // 座位数
            additionalForm.value.completeKerbMass = data.unladenMass // 整备质量
            additionalForm.value.limitLoad = data.limitLoad // 核定载质量
            // additionalForm.value.displacement = data.displacement // 排量
            additionalForm.value.powerScale = data.powerScale // 功率
            // additionalForm.value.purchasePrice = data.purchasePrice // 新车购置价
            additionalForm.value.carNatureCode = data.useNature // 使用性质
            additionalForm.value.vehicleUseCode = data.vehicleUse // 车辆用途
            additionalForm.value.carTypeCode = data.category // 车辆类型
            additionalForm.value.energyTypeCode = additionalForm.value.licenseNo.length == 8 ? '1' : additionalForm.value.licenseNo.length == 7 ? '0' : '' // 能源种类
            additionalForm.value.registerDate = data.registerDate // 注册日期
            additionalForm.value.issueDate = data.issueDate // 发证日期
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        break;
      case 'xszb':
        xszBack.value = result.downloadUrl
        xszBackFile.value = files
        xszBackResult.value = result
        // if(xszFront.value&&xszBack.value) {
        //
        // }
        const fileParams1 = new FormData()
        if (xszFrontFile.value) {
          fileParams1.append('image1', xszFrontFile.value)
        }
        fileParams1.append('image2', xszBackFile.value)
        api.additionalApi.drivingPermit(fileParams1).then((res: any) => {
          let data = res.data.carInfo
          additionalForm.value.licenseNo = data.plateNo
          additionalForm.value.vinNo = data.vin
          additionalForm.value.brandName = data.backOcrID
          additionalForm.value.engineNo = data.engine
          // additionalForm.value.carYear = data.backOcrID
          additionalForm.value.seatCount = data.approvedPassengersCapacity
          additionalForm.value.completeKerbMass = data.unladenMass
          additionalForm.value.limitLoad = data.limitLoad
          // additionalForm.value.displacement = data.backOcrID
          // additionalForm.value.powerScale = data.backOcrID
          // additionalForm.value.purchasePrice = data.backOcrID
          additionalForm.value.carNatureCode = data.useNature
          additionalForm.value.vehicleUseCode = data.vehicleUse
          additionalForm.value.carTypeCode = data.category
          additionalForm.value.energyTypeCode = additionalForm.value.licenseNo.length == 8 ? '1' : '0'
          additionalForm.value.registerDate =
            data.registerDate.substring(0, 4) +
            "-" +
            data.registerDate.substring(4, 6) +
            "-" +
            data.registerDate.substring(6, 8);
          additionalForm.value.issueDate =
            data.issueDate.substring(0, 4) +
            "-" +
            data.issueDate.substring(4, 6) +
            "-" +
            data.issueDate.substring(6, 8);
          api.additionalApi.vinSearch(data.vin).then((sub: any) => {
            if (res.code == 200) {

            } else {
              ElMessage({
                message: res.msg,
                type: 'warning'
              })
            }
          })
        })
        break;
      case 'sfzf':
        sfzFront.value = result.downloadUrl
        sfzFrontFile.value = files
        sfzFrontResult.value = result
        // if(sfzFrontFile.value&&sfzBackFile.value) {
        //
        // }
        const fileParams2 = new FormData()
        fileParams2.append('image1', sfzFrontFile.value)
        if (sfzBackFile.value) {
          fileParams2.append('image2', sfzBackFile.value)
        }
        api.additionalApi.idCard(fileParams2).then((res: any) => {
          if (res.code == 200) {
            const data = res.data.customerInfo
            additionalForm.value.name1 = data.name
            additionalForm.value.mobile1 = data.mobile
            additionalForm.value.addr1 = data.addr
            additionalForm.value.identifyNumber1 = data.identifyNumber
            additionalForm.value.age1 = getAgeByIdCard(data.identifyNumber)
            additionalForm.value.gender1 = data.identifyIssuedCom
            additionalForm.value.email1 = data.email
            additionalForm.value.identifyNumber = data.identifyNumber
            additionalForm.value.taxpayerName = data.name
            additionalForm.value.taxpayerIdentifier = data.identifyType
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        break;
      case 'sfzb':
        sfzBack.value = result.downloadUrl
        sfzBackFile.value = files
        sfzBackResult.value = result
        // if(sfzFrontFile.value&&sfzBackFile.value) {
        //
        // }
        const fileParams3 = new FormData()
        if (sfzFrontFile.value) {
          fileParams3.append('image1', sfzFrontFile.value)
        }
        fileParams3.append('image2', sfzBackFile.value)
        api.additionalApi.idCard(fileParams3).then((res: any) => {
          if (res.code == 200) {
            const data = res.data.customerInfo
            additionalForm.value.name1 = data.name
            additionalForm.value.mobile1 = data.mobile
            additionalForm.value.addr1 = data.addr
            additionalForm.value.identifyNumber1 = data.identifyNumber
            additionalForm.value.identifyValidDate1 =
              data.identifyValidDate.substring(0, 4) +
              "-" +
              data.identifyValidDate.substring(4, 6) +
              "-" +
              data.identifyValidDate.substring(6, 8);
            additionalForm.value.identifyValidEndDate1 = data.identifyValidEndDate ? data.identifyValidEndDate === '长期' ? '9999-12-31' :
              data.identifyValidEndDate.substring(0, 4) +
              "-" +
              data.identifyValidEndDate.substring(4, 6) +
              "-" +
              data.identifyValidEndDate.substring(6, 8) : ''
            additionalForm.value.age1 = getAgeByIdCard(data.identifyNumber)
            additionalForm.value.gender1 = data.identifyIssuedCom
            additionalForm.value.email1 = data.email
            additionalForm.value.organizationCode = data.identifyNumber
            additionalForm.value.taxpayerName = data.name
            additionalForm.value.taxpayerIdentifier = data.identifyType
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        break;
      case 'yyzz':
        yyzzFrontResult.value = result
        yyzzFront.value = result.downloadUrl
        yyzzFrontFile.value = files
        if (yyzzFront.value) {
          const fileParams = new FormData()
          fileParams.append('image1', yyzzFrontFile.value)
          api.additionalApi.businessLicense(fileParams).then((res: any) => {
            if (res.code == 200) {
              const data = res.data
              additionalForm.value.identifyNumber1 = data.socialCreditCode
              additionalForm.value.company1 = data.company
              additionalForm.value.types1 = data.types
              additionalForm.value.addr1 = data.address
              additionalForm.value.legalRepresentative1 = data.legalRepresentative
              additionalForm.value.registeredCapital1 = data.registeredCapital
              additionalForm.value.businessScope1 = data.businessScope
            }
          })
        }
        break;
      case 'sfzf1':
        sfz1Front.value = result.downloadUrl
        sfz1FrontFile.value = files
        sfz1FrontResult.value = result
        // if(sfz1FrontFile.value&&sfz1BackFile.value) {
        //
        // }
        const fileParams4 = new FormData()
        fileParams4.append('image1', sfz1FrontFile.value)
        if (sfz1BackFile.value) {
          fileParams4.append('image2', sfz1BackFile.value)
        }
        api.additionalApi.idCard(fileParams4).then((res: any) => {
          if (res.code == 200) {
            const data = res.data.customerInfo
            additionalForm.value.name2 = data.name
            additionalForm.value.mobile2 = data.mobile
            additionalForm.value.addr2 = data.addr
            additionalForm.value.identifyNumber2 = data.identifyNumber
            additionalForm.value.identifyValidDate2 =
              data.identifyValidDate.substring(0, 4) +
              "-" +
              data.identifyValidDate.substring(4, 6) +
              "-" +
              data.identifyValidDate.substring(6, 8);
            additionalForm.value.identifyValidEndDate2 = data.identifyValidEndDate ? data.identifyValidEndDate === '长期' ? '9999-12-31' :
              data.identifyValidEndDate.substring(0, 4) +
              "-" +
              data.identifyValidEndDate.substring(4, 6) +
              "-" +
              data.identifyValidEndDate.substring(6, 8) : ''
            additionalForm.value.age2 = getAgeByIdCard(data.identifyNumber)
            additionalForm.value.gender2 = data.identifyIssuedCom
            additionalForm.value.email2 = data.email
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        break;
      case 'sfzb1':
        sfz1Back.value = result.downloadUrl
        sfz1BackFile.value = files
        sfz1BackResult.value = result
        // if(sfz1FrontFile.value&&sfz1BackFile.value) {
        //
        // }
        const fileParams5 = new FormData()
        if (sfz1FrontFile.value) {
          fileParams5.append('image1', sfz1FrontFile.value)
        }
        fileParams5.append('image2', sfz1BackFile.value)
        api.additionalApi.idCard(fileParams5).then((res: any) => {
          if (res.code == 200) {
            const data = res.data.customerInfo
            additionalForm.value.name2 = data.name
            additionalForm.value.mobile2 = data.mobile
            additionalForm.value.addr2 = data.addr
            additionalForm.value.identifyNumber2 = data.identifyNumber
            additionalForm.value.identifyValidDate2 =
              data.identifyValidDate.substring(0, 4) +
              "-" +
              data.identifyValidDate.substring(4, 6) +
              "-" +
              data.identifyValidDate.substring(6, 8);
            additionalForm.value.identifyValidEndDate2 = data.identifyValidEndDate ? data.identifyValidEndDate === '长期' ? '9999-12-31' :
              data.identifyValidEndDate.substring(0, 4) +
              "-" +
              data.identifyValidEndDate.substring(4, 6) +
              "-" +
              data.identifyValidEndDate.substring(6, 8) : ''
            additionalForm.value.age2 = getAgeByIdCard(data.identifyNumber)
            additionalForm.value.gender2 = data.identifyIssuedCom
            additionalForm.value.email2 = data.email
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        break;
      case 'sfzf2':
        sfz2Front.value = result.downloadUrl
        sfz2FrontFile.value = files
        sfz2FrontResult.value = result
        // if(sfz2FrontFile.value&&sfz2BackFile.value) {
        //
        // }
        const fileParams6 = new FormData()
        fileParams6.append('image1', sfz2FrontFile.value)
        if (sfz2BackFile.value) {
          fileParams6.append('image2', sfz2BackFile.value)
        }
        api.additionalApi.idCard(fileParams6).then((res: any) => {
          if (res.code == 200) {
            const data = res.data.customerInfo
            additionalForm.value.name3 = data.name
            additionalForm.value.mobile3 = data.mobile
            additionalForm.value.addr3 = data.addr
            additionalForm.value.identifyNumber3 = data.identifyNumber
            additionalForm.value.identifyValidDate3 =
              data.identifyValidDate.substring(0, 4) +
              "-" +
              data.identifyValidDate.substring(4, 6) +
              "-" +
              data.identifyValidDate.substring(6, 8);
            additionalForm.value.identifyValidEndDate3 = data.identifyValidEndDate ? data.identifyValidEndDate === '长期' ? '9999-12-31' :
              data.identifyValidEndDate.substring(0, 4) +
              "-" +
              data.identifyValidEndDate.substring(4, 6) +
              "-" +
              data.identifyValidEndDate.substring(6, 8) : ''
            additionalForm.value.age3 = getAgeByIdCard(data.identifyNumber)
            additionalForm.value.gender3 = data.identifyIssuedCom
            additionalForm.value.email3 = data.email
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        break;
      case 'sfzb2':
        sfz2Back.value = result.downloadUrl
        sfz2BackFile.value = files
        sfz2BackResult.value = result
        // if(sfz2FrontFile.value&&sfz2BackFile.value) {
        //
        // }
        const fileParams7 = new FormData()
        if (sfz2FrontFile.value) {
          fileParams7.append('image1', sfz2FrontFile.value)
        }
        fileParams7.append('image2', sfz2BackFile.value)
        api.additionalApi.idCard(fileParams7).then((res: any) => {
          if (res.code == 200) {
            const data = res.data.customerInfo
            additionalForm.value.name3 = data.name
            additionalForm.value.mobile3 = data.mobile
            additionalForm.value.addr3 = data.addr
            additionalForm.value.identifyNumber3 = data.identifyNumber
            additionalForm.value.identifyValidDate3 =
              data.identifyValidDate.substring(0, 4) +
              "-" +
              data.identifyValidDate.substring(4, 6) +
              "-" +
              data.identifyValidDate.substring(6, 8);
            additionalForm.value.identifyValidEndDate3 = data.identifyValidEndDate ? data.identifyValidEndDate === '长期' ? '9999-12-31' :
              data.identifyValidEndDate.substring(0, 4) +
              "-" +
              data.identifyValidEndDate.substring(4, 6) +
              "-" +
              data.identifyValidEndDate.substring(6, 8) : ''
            additionalForm.value.age3 = getAgeByIdCard(data.identifyNumber)
            additionalForm.value.gender3 = data.identifyIssuedCom
            additionalForm.value.email3 = data.email
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        break;
      case 4:
        jqPolicyName.value = result.fileName
        jqPolicy.value = result.downloadUrl
        jqPolicyId.value = result.id
        break;
      case 5:
        syPolicyName.value = result.fileName
        syPolicy.value = result.downloadUrl
        syPolicyId.value = result.id
        break;
      case 6:
        noPolicyName.value = result.fileName
        noPolicy.value = result.downloadUrl
        noPolicyId.value = result.id
        break;
      case 7:
        jqSignName.value = result.fileName
        jqSign.value = result.downloadUrl
        jqSignId.value = result.id
        break;
    }
  } else {
    ElMessage({
      message: msg,
      type: 'error'
    })
  }
}

let showImage = ref(false)
let showImageUrl = ref([])
const handleViewImage = (type) => {
  showImage.value = true
  switch (type) {
    case 'xszf':
      showImageUrl.value = [xszFront.value]
      break;
    case 'xszb':
      showImageUrl.value = [xszBack.value]
      break;
    case 'sfzf':
      showImageUrl.value = [sfzFront.value]
      break;
    case 'sfzb':
      showImageUrl.value = [sfzBack.value]
      break;
    case 'sfzf1':
      showImageUrl.value = [sfz1Front.value]
      break;
    case 'sfzb1':
      showImageUrl.value = [sfz1Back.value]
      break;
    case 'sfzf2':
      showImageUrl.value = [sfz2Front.value]
      break;
    case 'sfzb2':
      showImageUrl.value = [sfz2Back.value]
      break;
  }
}
const handleDelImage = (type) => {
  switch (type) {
    case 'xszf':
      xszFront.value = ''
      xszFrontFile.value = null
      xszFrontResult.value = null
      break;
    case 'xszb':
      xszBack.value = ''
      xszBackFile.value = null
      xszBackResult.value = null
      break;
    case 'sfzf':
      sfzFront.value = ''
      sfzFrontFile.value = null
      sfzFrontResult.value = null
      break;
    case 'sfzb':
      sfzBack.value = ''
      sfzBackFile.value = null
      sfzBackResult.value = null
      break;
    case 'sfzf1':
      sfz1Front.value = ''
      sfz1FrontFile.value = null
      sfz1FrontResult.value = null
      break;
    case 'sfzb1':
      sfz1Back.value = ''
      sfz1BackFile.value = null
      sfz1BackResult.value = null
      break;
    case 'sfzf2':
      sfz2Front.value = ''
      sfz2FrontFile.value = null
      sfz2FrontResult.value = null
      break;
    case 'sfzb2':
      sfz2Back.value = ''
      sfz2BackFile.value = null
      sfz2BackResult.value = null
      break;
  }
}
// word预览
const filePreview = (file) => {
  nextTick(() => {
    fileUrl.value = file
  })
}

// 图片预览
const imageView = (type) => {
  switch (type) {
    case 4:
      imageUrl.value = jqPolicy.value
      nextTick(() => {
        // loadPdf(jqPolicy.value)
        if (jqPolicy.value.includes('.pdf')) {
          window.open(jqPolicy.value, '_blank')
        } else if (jqPolicy.value.includes('.doc') || jqPolicy.value.includes('.docx')) {
          fileShow.value = true
          nextTick(() => {
            filePreview(jqPolicy.value)
          })
        } else if (jqPolicy.value.includes('.jpg') || jqPolicy.value.includes('.jpeg') || jqPolicy.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
    case 5:
      imageUrl.value = syPolicy.value
      nextTick(() => {
        // loadPdf(syPolicy.value)
        if (syPolicy.value.includes('.pdf')) {
          window.open(syPolicy.value, '_blank')
        } else if (syPolicy.value.includes('.doc') || syPolicy.value.includes('.docx')) {
          fileShow.value = true
          filePreview(syPolicy.value)
        } else if (syPolicy.value.includes('.jpg') || syPolicy.value.includes('.jpeg') || syPolicy.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
    case 6:
      imageUrl.value = noPolicy.value
      nextTick(() => {
        // loadPdf(noPolicy.value)
        if (noPolicy.value.includes('.pdf')) {
          window.open(noPolicy.value, '_blank')
        } else if (noPolicy.value.includes('.doc') || noPolicy.value.includes('.docx')) {
          fileShow.value = true
          filePreview(noPolicy.value)
        } else if (noPolicy.value.includes('.jpg') || noPolicy.value.includes('.jpeg') || noPolicy.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
    case 7:
      imageUrl.value = jqSign.value
      nextTick(() => {
        // loadPdf(jqSign.value)
        if (jqSign.value.includes('.pdf')) {
          window.open(jqSign.value, '_blank')
        } else if (jqSign.value.includes('.doc') || jqSign.value.includes('.docx')) {
          fileShow.value = true
          filePreview(jqSign.value)
        } else if (jqSign.value.includes('.jpg') || jqSign.value.includes('.jpeg') || jqSign.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
  }
}

// 图片下载
const download = (url, name) => {
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  }
  image.src = url
}
const downloadImage = (type) => {
  switch (type) {
    case 4:
      download(jqPolicy.value, jqPolicyName.value)
      break;
    case 5:
      download(syPolicy.value, syPolicyName.value)
      break;
    case 6:
      download(noPolicy.value, noPolicyName.value)
      break;
    case 7:
      download(jqSign.value, jqSignName.value)
      break;
  }
}
// 图片删除
const deleteImage = (type) => {
  switch (type) {
    case 4:
      jqPolicy.value = ''
      jqPolicyName.value = ''
      break;
    case 5:
      syPolicy.value = ''
      syPolicyName.value = ''
      break;
    case 6:
      noPolicy.value = ''
      noPolicyName.value = ''
      break;
    case 7:
      jqSign.value = ''
      jqSignName.value = ''
      break;
  }
}

// 选择业务员
let salesmanShow = ref(false)
const handleFocus = () => {
  salesmanShow.value = true
  nextTick(() => {
    SalesmanSelectRef.value.initEditData()
  })
}

let realQuoteUserId = ref('')
const handleSalesmanSelect = (data) => {
  salesmanShow.value = false
  if (data) {
    form.value.name = data.name
    form.value.type = '代理人'
    form.value.deptId = data.deptId
    realQuoteUserId.value = data.mobile
    initDept()
  }
}

// 归属
const initDept = () => {
  api.insuranceApi.getDeptTree({ sysCode: localStorage.getItem('sysCode') }).then((res: any) => {
    if (res.code == 200) {
      institutionList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 选择车型
let carTypeShow = ref(false)
const handleCarType = (type) => {
  carTypeShow.value = true
  nextTick(() => {
    CarTypeSelectRef.value.initData(type === 1 ? additionalForm.value.vinNo : additionalForm.value.brandName, type)
  })
}
const handleCarTypeSelect = (data) => {
  carTypeShow.value = false
  additionalForm.value.carYear = data.marketYear
  additionalForm.value.brandName = data.modelName
  // additionalForm.value.completeKerbMass = data.wholeWeight
  additionalForm.value.displacement = data.displacement
  additionalForm.value.purchasePrice = data.replacementValue
  additionalForm.value.seatCount = data.ratedPassengerCapacity
  additionalForm.value.energyTypeCode = data.energyTypes
  additionalForm.value.energyTypeCode = data.energyTypes
}

// 选择险种
let insuranceShow = ref(false)
const handleInsurance = () => {
  insuranceShow.value = true
  nextTick(() => {
    InsuranceSelectRef.value.initEditData(insuranceData.value, additionalForm.value.productId)
  })
}
const handleInsuranceSelect = (data) => {
  insuranceShow.value = false
  let list = [...data.list]
  if (list && list.length > 0) {
    list.forEach(a => {
      let obj = a.options.find(b => b.checked)
      a.amount = obj.value
    })
    insuranceData.value = list
  }
}

// 暂存
const handleSave = () => {
  let obj = {
    carInfoVo: {},
    ownersInfo: {},
    policyHolderInfo: {},
    insuredPersonInfo: {},
    kindInfoVo: [],
    insOrders: {
      realQuoteUserId: realQuoteUserId.value,
      productId: additionalForm.value.productId
    },
    vehicleAndVesselTaxVo: {},
    ciRiskInfoVo: {},
    biRiskInfoVo: {},
    insOrdersOtherInfo: {},
    feeOrdersVo: {},
    imagesAdds: {
      images: []
    },
    insOrdersExternalPolicy: {},
    isTemporarily: 1
  }
  if (detailData.value) {
    obj.insOrders = detailData.value.insOrders
  }
  obj.carInfoVo = {
    licenseNo: additionalForm.value.licenseNo, // 车牌
    vinNo: additionalForm.value.vinNo, // 车牌识别代码
    brandName: additionalForm.value.brandName, // 品牌型号
    engineNo: additionalForm.value.engineNo, // 发动机号
    carYear: additionalForm.value.carYear, // 年款
    seatCount: additionalForm.value.seatCount, // 座位数
    completeKerbMass: additionalForm.value.completeKerbMass, // 整备质量
    limitLoad: additionalForm.value.limitLoad, // 核定载质量
    displacement: additionalForm.value.displacement, // 排量
    powerScale: additionalForm.value.powerScale, // 功率
    purchasePrice: additionalForm.value.purchasePrice, // 新车购置价
    carNatureCode: additionalForm.value.carNatureCode, // 使用性质
    vehicleUseCode: additionalForm.value.vehicleUseCode, // 车辆用途
    carTypeCode: additionalForm.value.carTypeCode, // 车辆类型
    energyTypeCode: additionalForm.value.energyTypeCode, // 能源种类
    // propertyCode: additionalForm.value., // 所属性质
    registerDate: additionalForm.value.registerDate, // 注册日期
    issueDate: additionalForm.value.issueDate, // 发证日期
    isRegistered: additionalForm.value.isRegistered, // 是否上牌
    transfer: additionalForm.value.transfer, //
    transferBi: additionalForm.value.transferBi, //
  }
  obj.ownersInfo = {
    personType: additionalForm.value.personType1, // 1个人2法人
    name: additionalForm.value.name1,
    mobile: additionalForm.value.mobile1,
    addr: additionalForm.value.addr1,
    identifyNumber: additionalForm.value.identifyNumber1,
    identifyValidDate: additionalForm.value.identifyValidDate1,
    identifyValidEndDate: additionalForm.value.identifyValidEndDate1,
    age: additionalForm.value.age1,
    gender: additionalForm.value.gender1,
    email: additionalForm.value.email1,
  }
  if (btns.value.ower1Show) {
    additionalForm.value.personType2 = additionalForm.value.personType1 // 1个人2法人
    additionalForm.value.carOwner2 = 1
    additionalForm.value.name2 = additionalForm.value.name1
    additionalForm.value.mobile2 = additionalForm.value.mobile1
    additionalForm.value.addr2 = additionalForm.value.addr1
    additionalForm.value.identifyNumber2 = additionalForm.value.identifyNumber1
    additionalForm.value.identifyValidDate2 = additionalForm.value.identifyValidDate1
    additionalForm.value.identifyValidEndDate2 = additionalForm.value.identifyValidEndDate1
    additionalForm.value.age2 = additionalForm.value.age1
    additionalForm.value.gender2 = additionalForm.value.gender1
    additionalForm.value.email2 = additionalForm.value.email1

    sfz1FrontResult.value = { id: sfzFrontResult.value?.id }
    sfz1BackResult.value = { id: sfzBackResult.value?.id }
  }
  obj.policyHolderInfo = {
    personType: additionalForm.value.personType2, // 1个人2法人
    name: additionalForm.value.name2,
    mobile: additionalForm.value.mobile2,
    addr: additionalForm.value.addr2,
    identifyNumber: additionalForm.value.identifyNumber2,
    identifyValidDate: additionalForm.value.identifyValidDate2,
    identifyValidEndDate: additionalForm.value.identifyValidEndDate2,
    age: additionalForm.value.age2,
    gender: additionalForm.value.gender2,
    email: additionalForm.value.email2,
  }
  obj.feeOrdersVo = {
    agreementId: additionalForm.value.agreementId,
    costId: additionalForm.value.costId,
    ...detailData.value?.feeOrdersVo
  }
  if (btns.value.ower2show) {
    let obj = btns.value.ower2.find(a => a.checked)
    if (obj.text === '同投保人') {
      additionalForm.value.personType3 = additionalForm.value.personType2 // 1个人2法人
      additionalForm.value.carOwner3 = 2
      additionalForm.value.name3 = additionalForm.value.name2
      additionalForm.value.mobile3 = additionalForm.value.mobile2
      additionalForm.value.addr3 = additionalForm.value.addr2
      additionalForm.value.identifyNumber3 = additionalForm.value.identifyNumber2
      additionalForm.value.identifyValidDate3 = additionalForm.value.identifyValidDate2
      additionalForm.value.identifyValidEndDate3 = additionalForm.value.identifyValidEndDate2
      additionalForm.value.age3 = additionalForm.value.age2
      additionalForm.value.gender3 = additionalForm.value.gender2
      additionalForm.value.email3 = additionalForm.value.email2

      sfz2FrontResult.value = { id: sfz1FrontResult.value?.id }
      sfz2BackResult.value = { id: sfz1BackResult.value?.id }
    } else {
      additionalForm.value.personType3 = additionalForm.value.personType1 // 1个人2法人
      additionalForm.value.carOwner3 = 1
      additionalForm.value.name3 = additionalForm.value.name1
      additionalForm.value.mobile3 = additionalForm.value.mobile1
      additionalForm.value.addr3 = additionalForm.value.addr1
      additionalForm.value.identifyNumber3 = additionalForm.value.identifyNumber1
      additionalForm.value.identifyValidDate3 = additionalForm.value.identifyValidDate1
      additionalForm.value.identifyValidEndDate3 = additionalForm.value.identifyValidEndDate1
      additionalForm.value.age3 = additionalForm.value.age1
      additionalForm.value.gender3 = additionalForm.value.gender1
      additionalForm.value.email3 = additionalForm.value.email1

      sfz2FrontResult.value = { id: sfzFrontResult.value?.id }
      sfz2BackResult.value = { id: sfzBackResult.value?.id }
    }
  }
  obj.insuredPersonInfo = {
    personType: additionalForm.value.personType3, // 1个人2法人
    name: additionalForm.value.name3,
    mobile: additionalForm.value.mobile3,
    addr: additionalForm.value.addr3,
    identifyNumber: additionalForm.value.identifyNumber3,
    identifyValidDate: additionalForm.value.identifyValidDate3,
    identifyValidEndDate: additionalForm.value.identifyValidEndDate3,
    age: additionalForm.value.age3,
    gender: additionalForm.value.gender3,
    email: additionalForm.value.email3,
  }
  obj.vehicleAndVesselTaxVo = {
    taxRelifFlag: additionalForm.value.taxRelifFlag,
    identifyNumber: additionalForm.value.identifyNumber,
    organizationCode: additionalForm.value.organizationCode,
    taxpayerName: additionalForm.value.taxpayerName,
    taxpayerIdentifier: additionalForm.value.taxpayerIdentifier,
    extendChar2: additionalForm.value.extendChar2,
    relifReason: additionalForm.value.relifReason,
    paidFreeCertificate: additionalForm.value.paidFreeCertificate,
    taxComCode: additionalForm.value.taxComCode,
    taxComName: additionalForm.value.taxComName,
    taxRelief: additionalForm.value.taxRelief,
    taxDocumentDate: additionalForm.value.taxDocumentDate,
    taxPaidAreaCode: additionalForm.value.taxPaidAreaCode
  }
  obj.ciRiskInfoVo = {
    instantFlag: jqWork.value.some(a => a.checked) ? true : false,
    startDate: additionalForm.value.jqStart,
    endDate: additionalForm.value.jqEnd,
    riskCode: '0507'
  }
  obj.biRiskInfoVo = {
    instantFlag: syWork.value.some(a => a.checked) ? true : false,
    startDate: additionalForm.value.syStart,
    endDate: additionalForm.value.syEnd,
    riskCode: '0510'
  }
  if (fileList.value.length > 0) {
    obj.imagesAdds.images = fileList.value
  } else {
    obj.imagesAdds.images = [
      {
        imageType: 'C01',
        imageId: xszFrontResult.value?.id
      },
      {
        imageType: 'D01',
        imageId: xszBackResult.value?.id
      },
      {
        imageType: 'C02',
        imageId: sfzFrontResult.value?.id
      },
      {
        imageType: 'D02',
        imageId: sfzBackResult.value?.id
      },
      {
        imageType: 'C03',
        imageId: sfz1FrontResult.value?.id
      },
      {
        imageType: 'D03',
        imageId: sfz1BackResult.value?.id
      },
      {
        imageType: 'C04',
        imageId: sfz2FrontResult.value?.id
      },
      {
        imageType: 'D04',
        imageId: sfz2BackResult.value?.id
      }
    ]
  }
  obj.insOrdersOtherInfo = {
    score: additionalForm.value.score,
    taxPremium: additionalForm.value.taxPremium,
    jqPolicyNo: additionalForm.value.jqPolicyNo,
    jqRenewal: additionalForm.value.jqRenewal,
    jqPremium: additionalForm.value.jqPremium,
    jyPremium: additionalForm.value.jyPremium,
    syPolicyNo: additionalForm.value.syPolicyNo,
    jyPolicyNo: additionalForm.value.jyPolicyNo,
    syRenewal: additionalForm.value.syRenewal,
    syPremium: additionalForm.value.syPremium,
    sumPremium: additionalForm.value.sumPremium,
    isrecordByLeader: additionalForm.value.isrecordByLeader,
  }
  obj.insOrders = {
    ...obj.insOrders,
    productId: additionalForm.value.productId,
    companyId: additionalForm.value.companyId,
    agreementId: additionalForm.value.agreementId,
    dockingPersonPhone: additionalForm.value.dockingPersonPhone,
    dockingPerson: costExternalList.value.find(v => v.contactMobile === additionalForm.value.dockingPersonPhone)?.contactPerson,
    signingTime: additionalForm.value.signingTime,
  }
  obj.insOrdersExternalPolicy = {
    jqPolicy: additionalForm.value.jqPolicyNo ?? jqPolicyId.value,
    syPolicy: additionalForm.value.syPolicyNo ?? syPolicyId.value,
    noPolicy: additionalForm.value.jyPolicyNo ?? noPolicyId.value,
    jqSign: jqSignId.value
  }
  obj.kindInfoVo = insuranceData.value
  obj.costRatio = detailData.value?.costRatio

  submitLoading.value = true
  if (myRoute.query.id) {
    api.additionalApi.updateOrders(obj).then((res: any) => {
      if (res.code == 200) {
        myRouter.push({
          path: '/additionalOrder/temporarily'
        })
        ElMessage({
          message: res.msg,
          type: 'success'
        })
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    }).finally(() => submitLoading.value = false)
  } else {
    api.additionalApi.saveOrders(obj).then((res: any) => {
      if (res.code == 200) {
        myRouter.push({
          path: '/additionalOrder/temporarily'
        })
        ElMessage({
          message: res.msg,
          type: 'success'
        })
      }
    }).finally(() => submitLoading.value = false)
  }
}

const submitLoading = ref(false)
// 提交
const handleSubmit = async (FormRefs) => {
  if (!FormRefs) {
    FormRefs?.resetFields()
    return;
  }
  if (!additionalForm.value.jqPolicyNo && !additionalForm.value.syPolicyNo) {
    ElMessage.error('交强险保单号和商业险保单号至少需要填写一个')
    return
  }
  let obj = {
    carInfoVo: {},
    ownersInfo: {},
    policyHolderInfo: {},
    insuredPersonInfo: {},
    kindInfoVo: [],
    insOrders: {},
    vehicleAndVesselTaxVo: {},
    ciRiskInfoVo: {},
    biRiskInfoVo: {},
    insOrdersOtherInfo: {},
    feeOrdersVo: {},
    imagesAdds: {
      images: []
    },
    insOrdersExternalPolicy: {},
    isTemporarily: 0
  }
  obj.carInfoVo = {
    licenseNo: additionalForm.value.licenseNo, // 车牌
    vinNo: additionalForm.value.vinNo, // 车牌识别代码
    brandName: additionalForm.value.brandName, // 品牌型号
    engineNo: additionalForm.value.engineNo, // 发动机号
    carYear: additionalForm.value.carYear, // 年款
    seatCount: additionalForm.value.seatCount, // 座位数
    completeKerbMass: additionalForm.value.completeKerbMass, // 整备质量
    limitLoad: additionalForm.value.limitLoad, // 核定载质量
    displacement: additionalForm.value.displacement, // 排量
    powerScale: additionalForm.value.powerScale, // 功率
    purchasePrice: additionalForm.value.purchasePrice, // 新车购置价
    carNatureCode: additionalForm.value.carNatureCode, // 使用性质
    vehicleUseCode: additionalForm.value.vehicleUseCode, // 车辆用途
    carTypeCode: additionalForm.value.carTypeCode, // 车辆类型
    energyTypeCode: additionalForm.value.energyTypeCode, // 能源种类
    // propertyCode: additionalForm.value., // 所属性质
    registerDate: additionalForm.value.registerDate, // 注册日期
    issueDate: additionalForm.value.issueDate, // 发证日期
    isRegistered: additionalForm.value.isRegistered, // 是否上牌
    transfer: additionalForm.value.transfer, //
    transferBi: additionalForm.value.transferBi, //
  }
  obj.ownersInfo = {
    personType: additionalForm.value.personType1, // 1个人2法人
    name: additionalForm.value.name1,
    mobile: additionalForm.value.mobile1,
    addr: additionalForm.value.addr1,
    identifyNumber: additionalForm.value.identifyNumber1,
    identifyValidDate: additionalForm.value.identifyValidDate1,
    identifyValidEndDate: additionalForm.value.identifyValidEndDate1,
    age: additionalForm.value.age1,
    gender: additionalForm.value.gender1,
    email: additionalForm.value.email1,
  }
  if (btns.value.ower1Show) {
    additionalForm.value.personType2 = additionalForm.value.personType1 // 1个人2法人
    additionalForm.value.carOwner2 = 1
    additionalForm.value.name2 = additionalForm.value.name1
    additionalForm.value.mobile2 = additionalForm.value.mobile1
    additionalForm.value.addr2 = additionalForm.value.addr1
    additionalForm.value.identifyNumber2 = additionalForm.value.identifyNumber1
    additionalForm.value.identifyValidDate2 = additionalForm.value.identifyValidDate1
    additionalForm.value.identifyValidEndDate2 = additionalForm.value.identifyValidEndDate1
    additionalForm.value.age2 = additionalForm.value.age1
    additionalForm.value.gender2 = additionalForm.value.gender1
    additionalForm.value.email2 = additionalForm.value.email1

    sfz1FrontResult.value = { id: sfzFrontResult.value?.id }
    sfz1BackResult.value = { id: sfzBackResult.value?.id }
  }
  obj.policyHolderInfo = {
    personType: additionalForm.value.personType2, // 1个人2法人
    name: additionalForm.value.name2,
    mobile: additionalForm.value.mobile2,
    addr: additionalForm.value.addr2,
    identifyNumber: additionalForm.value.identifyNumber2,
    identifyValidDate: additionalForm.value.identifyValidDate2,
    identifyValidEndDate: additionalForm.value.identifyValidEndDate2,
    age: additionalForm.value.age2,
    gender: additionalForm.value.gender2,
    email: additionalForm.value.email2,
  }
  if (btns.value.ower2show) {
    let obj = btns.value.ower2.find(a => a.checked)
    if (obj.text === '同投保人') {
      additionalForm.value.personType3 = additionalForm.value.personType2 // 1个人2法人
      additionalForm.value.carOwner3 = 2
      additionalForm.value.name3 = additionalForm.value.name2
      additionalForm.value.mobile3 = additionalForm.value.mobile2
      additionalForm.value.addr3 = additionalForm.value.addr2
      additionalForm.value.identifyNumber3 = additionalForm.value.identifyNumber2
      additionalForm.value.identifyValidDate3 = additionalForm.value.identifyValidDate2
      additionalForm.value.identifyValidEndDate3 = additionalForm.value.identifyValidEndDate2
      additionalForm.value.age3 = additionalForm.value.age2
      additionalForm.value.gender3 = additionalForm.value.gender2
      additionalForm.value.email3 = additionalForm.value.email2

      sfz2FrontResult.value = { id: sfz1FrontResult.value?.id }
      sfz2BackResult.value = { id: sfz1BackResult.value?.id }
    } else {
      additionalForm.value.personType3 = additionalForm.value.personType1 // 1个人2法人
      additionalForm.value.carOwner3 = 1
      additionalForm.value.name3 = additionalForm.value.name1
      additionalForm.value.mobile3 = additionalForm.value.mobile1
      additionalForm.value.addr3 = additionalForm.value.addr1
      additionalForm.value.identifyNumber3 = additionalForm.value.identifyNumber1
      additionalForm.value.identifyValidDate3 = additionalForm.value.identifyValidDate1
      additionalForm.value.identifyValidEndDate3 = additionalForm.value.identifyValidEndDate1
      additionalForm.value.age3 = additionalForm.value.age1
      additionalForm.value.gender3 = additionalForm.value.gender1
      additionalForm.value.email3 = additionalForm.value.email1

      sfz2FrontResult.value = { id: sfzFrontResult.value?.id }
      sfz2BackResult.value = { id: sfzBackResult.value?.id }
    }
  }
  obj.insuredPersonInfo = {
    personType: additionalForm.value.personType3, // 1个人2法人
    name: additionalForm.value.name3,
    mobile: additionalForm.value.mobile3,
    addr: additionalForm.value.addr3,
    identifyNumber: additionalForm.value.identifyNumber3,
    identifyValidDate: additionalForm.value.identifyValidDate3,
    identifyValidEndDate: additionalForm.value.identifyValidEndDate3,
    age: additionalForm.value.age3,
    gender: additionalForm.value.gender3,
    email: additionalForm.value.email3,
  }
  obj.feeOrdersVo = {
    agreementId: additionalForm.value.agreementId,
    costId: additionalForm.value.costId,
    ...detailData.value?.feeOrdersVo

  }
  if (detailData.value) {
    obj.insOrders = detailData.value.insOrders
  }
  obj.vehicleAndVesselTaxVo = {
    taxRelifFlag: additionalForm.value.taxRelifFlag,
    identifyNumber: additionalForm.value.identifyNumber,
    organizationCode: additionalForm.value.organizationCode,
    taxpayerName: additionalForm.value.taxpayerName,
    taxpayerIdentifier: additionalForm.value.taxpayerIdentifier,
    extendChar2: additionalForm.value.extendChar2,
    relifReason: additionalForm.value.relifReason,
    paidFreeCertificate: additionalForm.value.paidFreeCertificate,
    taxComCode: additionalForm.value.taxComCode,
    taxComName: additionalForm.value.taxComName,
    taxRelief: additionalForm.value.taxRelief,
    taxDocumentDate: additionalForm.value.taxDocumentDate,
    taxPaidAreaCode: additionalForm.value.taxPaidAreaCode
  }
  obj.ciRiskInfoVo = {
    instantFlag: jqWork.value.some(a => a.checked) ? true : false,
    startDate: additionalForm.value.jqStart,
    endDate: additionalForm.value.jqEnd,
    riskCode: '0507'
  }
  obj.biRiskInfoVo = {
    instantFlag: syWork.value.some(a => a.checked) ? true : false,
    startDate: additionalForm.value.syStart,
    endDate: additionalForm.value.syEnd,
    riskCode: '0510'
  }
  obj.insOrdersOtherInfo = {
    score: additionalForm.value.score,
    taxPremium: additionalForm.value.taxPremium,
    jqPolicyNo: additionalForm.value.jqPolicyNo,
    jqRenewal: additionalForm.value.jqRenewal,
    jqPremium: additionalForm.value.jqPremium,
    jyPremium: additionalForm.value.jyPremium,
    syPolicyNo: additionalForm.value.syPolicyNo,
    syRenewal: additionalForm.value.syRenewal,
    syPremium: additionalForm.value.syPremium,
    sumPremium: additionalForm.value.sumPremium,
    isrecordByLeader: additionalForm.value.isrecordByLeader,
  }
  obj.insOrders = {
    ...obj.insOrders,
    productId: additionalForm.value.productId,
    companyId: additionalForm.value.companyId,
    agreementId: additionalForm.value.agreementId,
    dockingPersonPhone: additionalForm.value.dockingPersonPhone,
    dockingPerson: costExternalList.value.find(v => v.contactMobile === additionalForm.value.dockingPersonPhone)?.contactPerson,
    signingTime: additionalForm.value.signingTime,
    realQuoteUserId: realQuoteUserId.value,
  }
  if (fileList.value.length > 0) {
    obj.imagesAdds.images = fileList.value
  } else {
    obj.imagesAdds.images = [
      {
        imageType: 'C01',
        imageId: xszFrontResult.value?.id
      },
      {
        imageType: 'D01',
        imageId: xszBackResult.value?.id
      },
      {
        imageType: 'C02',
        imageId: sfzFrontResult.value?.id
      },
      {
        imageType: 'D02',
        imageId: sfzBackResult.value?.id
      },
      {
        imageType: 'C03',
        imageId: sfz1FrontResult.value?.id
      },
      {
        imageType: 'D03',
        imageId: sfz1BackResult.value?.id
      },
      {
        imageType: 'C04',
        imageId: sfz2FrontResult.value?.id
      },
      {
        imageType: 'D04',
        imageId: sfz2BackResult.value?.id
      }
    ]
  }
  obj.insOrdersExternalPolicy = {
    jqPolicy: additionalForm.value.jqPolicyNo ?? jqPolicyId.value,
    syPolicy: additionalForm.value.syPolicyNo ?? syPolicyId.value,
    noPolicy: additionalForm.value.jyPolicyNo ?? noPolicyId.value,
    jqSign: jqSignId.value
  }
  obj.kindInfoVo = insuranceData.value
  obj.costRatio = detailData.value?.costRatio

  submitLoading.value = true
  await FormRefs.validate((valid) => {
    if (valid) {
      if (myRoute.query.id) {
        api.additionalApi.updateOrders(obj).then((res: any) => {
          if (res.code == 200) {
            myRouter.push({
              path: '/additionalOrder/order'
            })
            ElMessage({
              message: res.msg,
              type: 'success'
            })
          }
        }).finally(() => submitLoading.value = false)
      } else {
        api.additionalApi.saveOrders(obj).then((res: any) => {
          if (res.code == 200) {
            myRouter.push({
              path: '/additionalOrder/order'
            })
            ElMessage({
              message: res.msg,
              type: 'success'
            })
          }
        }).finally(() => submitLoading.value = false)
      }
    } else {
      submitLoading.value = false
      ElMessage.warning('请完善订单内容')
    }
  })
}

// 编辑
let detailData = ref({})
const initEditData = () => {
  if (myRoute.query.id) {
    api.additionalApi.selectById(myRoute.query.id).then((res: any) => {
      if (res.code == 200) {
        let obj = { ...res.data }
        detailData.value = { ...res.data }

        form.value.name = obj.salesmanInfo?.name
        form.value.type = obj.salesmanInfo?.name
        form.value.deptId = obj.salesmanInfo?.deptId
        realQuoteUserId.value = obj.insOrders?.realQuoteUserId

        additionalForm.value.licenseNo = obj.carInfoVo.licenseNo
        additionalForm.value.vinNo = obj.carInfoVo.vinNo
        additionalForm.value.brandName = obj.carInfoVo.brandName
        additionalForm.value.engineNo = obj.carInfoVo.engineNo
        additionalForm.value.carYear = obj.carInfoVo.carYear
        additionalForm.value.seatCount = obj.carInfoVo.seatCount
        additionalForm.value.completeKerbMass = obj.carInfoVo.completeKerbMass
        additionalForm.value.limitLoad = obj.carInfoVo.limitLoad
        additionalForm.value.displacement = obj.carInfoVo.displacement
        additionalForm.value.powerScale = obj.carInfoVo.powerScale
        additionalForm.value.purchasePrice = obj.carInfoVo.purchasePrice
        additionalForm.value.carNatureCode = obj.carInfoVo.carNatureCode
        additionalForm.value.vehicleUseCode = obj.carInfoVo.vehicleUseCode
        additionalForm.value.carTypeCode = obj.carInfoVo.carTypeCode
        additionalForm.value.energyTypeCode = obj.carInfoVo.energyTypeCode
        additionalForm.value.registerDate = obj.carInfoVo.registerDate
        additionalForm.value.issueDate = obj.carInfoVo.issueDate
        additionalForm.value.isRegistered = obj.carInfoVo.isRegistered
        additionalForm.value.transfer = obj.carInfoVo.transfer
        additionalForm.value.transferBi = obj.carInfoVo.transferBi

        additionalForm.value.personType1 = obj.ownersInfo.personType // 1个人2法人
        // additionalForm.value.carOwner1 = 1
        additionalForm.value.name1 = obj.ownersInfo.name
        additionalForm.value.mobile1 = obj.ownersInfo.mobile
        additionalForm.value.addr1 = obj.ownersInfo.addr
        additionalForm.value.identifyNumber1 = obj.ownersInfo.identifyNumber
        additionalForm.value.identifyValidDate1 = obj.ownersInfo.identifyValidDate
        additionalForm.value.identifyValidEndDate1 = obj.ownersInfo.identifyValidEndDate
        additionalForm.value.age1 = obj.ownersInfo.age
        additionalForm.value.gender1 = obj.ownersInfo.gender
        additionalForm.value.email1 = obj.ownersInfo.email

        additionalForm.value.personType2 = obj.policyHolderInfo.personType // 1个人2法人
        additionalForm.value.carOwner2 = obj.policyHolderInfo.carOwner
        additionalForm.value.name2 = obj.policyHolderInfo.name
        additionalForm.value.mobile2 = obj.policyHolderInfo.mobile
        additionalForm.value.addr2 = obj.policyHolderInfo.addr
        additionalForm.value.identifyNumber2 = obj.policyHolderInfo.identifyNumber
        additionalForm.value.identifyValidDate2 = obj.policyHolderInfo.identifyValidDate
        additionalForm.value.identifyValidEndDate2 = obj.policyHolderInfo.identifyValidEndDate
        additionalForm.value.age2 = obj.policyHolderInfo.age
        additionalForm.value.gender2 = obj.policyHolderInfo.gender
        additionalForm.value.email2 = obj.policyHolderInfo.email

        additionalForm.value.personType3 = obj.insuredPersonInfo.personType // 1个人2法人
        additionalForm.value.carOwner3 = obj.insuredPersonInfo.carOwner
        additionalForm.value.name3 = obj.insuredPersonInfo.name
        additionalForm.value.mobile3 = obj.insuredPersonInfo.mobile
        additionalForm.value.addr3 = obj.insuredPersonInfo.addr
        additionalForm.value.identifyNumber3 = obj.insuredPersonInfo.identifyNumber
        additionalForm.value.identifyValidDate3 = obj.insuredPersonInfo.identifyValidDate
        additionalForm.value.identifyValidEndDate3 = obj.insuredPersonInfo.identifyValidEndDate
        additionalForm.value.age3 = obj.insuredPersonInfo.age
        additionalForm.value.gender3 = obj.insuredPersonInfo.gender
        additionalForm.value.email3 = obj.insuredPersonInfo.email

        additionalForm.value.productId = obj.insOrders.productId
        additionalForm.value.jqStart = obj.ciRiskInfoVo?.startDate
        additionalForm.value.jqEnd = obj.ciRiskInfoVo?.endDate
        additionalForm.value.syStart = obj.biRiskInfoVo?.startDate
        additionalForm.value.syEnd = obj.biRiskInfoVo?.endDate

        additionalForm.value.identifyNumber = obj.insOrdersTax?.identifyNumber
        additionalForm.value.taxpayerName = obj.insOrdersTax?.taxpayerName
        additionalForm.value.extendChar2 = obj.insOrdersTax?.extendChar2
        additionalForm.value.paidFreeCertificate = obj.insOrdersTax?.paidFreeCertificate
        additionalForm.value.relifReason = obj.insOrdersTax?.relifReason
        additionalForm.value.taxComCode = obj.insOrdersTax?.taxComCode
        additionalForm.value.taxComName = obj.insOrdersTax?.taxComName
        additionalForm.value.taxDocumentDate = obj.insOrdersTax?.taxDocumentDate
        additionalForm.value.taxPaidAreaCode = obj.insOrdersTax?.taxPaidAreaCode
        additionalForm.value.taxRelief = obj.insOrdersTax?.taxRelief
        additionalForm.value.taxRelifFlag = obj.insOrdersTax?.taxRelifFlag + ''
        additionalForm.value.taxpayerIdentifier = obj.insOrdersTax?.taxpayerIdentifier

        additionalForm.value.jqInlet = obj.costRatio?.jqInletRatio
        additionalForm.value.syInlet = obj.costRatio?.syInletRatio
        additionalForm.value.jyInlet = obj.costRatio?.jyInletRatio

        fileList.value = obj.imagesAdds?.images
        // 有对应图片说明是通过识别拿到的信息
        if (fileList.value && fileList.value.length > 0) {
          carSwitch.value = fileList.value.some(a => a.imageType === 'C01' || a.imageType === 'D01') ? true : false
        } else {
          carSwitch.value = false
        }
        if (fileList.value && fileList.value.length > 0) {
          owerSwitch.value = fileList.value.filter(a => a.imageType === 'C02' || a.imageType === 'D02') ? true : false
        } else {
          owerSwitch.value = false
        }
        if (fileList.value && fileList.value.length > 0) {
          ower1Switch.value = fileList.value.filter(a => a.imageType === 'C03' || a.imageType === 'D03') ? true : false
          obj.policyHolderInfo.carOwner ? btns.value.ower1[0].checked = true : btns.value.ower1[0].checked = false
          btns.value.ower1Show = obj.policyHolderInfo.carOwner
        } else {
          ower1Switch.value = false
        }
        if (fileList.value && fileList.value.length > 0) {
          ower2Switch.value = fileList.value.filter(a => a.imageType === 'C04' || a.imageType === 'D04') ? true : false
          obj.policyHolderInfo.carOwner === 1 ? btns.value.ower2[1].checked = true : obj.policyHolderInfo.carOwner === 2 ? btns.value.ower2[0].checked = true : btns.value.ower2[0].checked = false
          btns.value.ower2show = obj.policyHolderInfo.carOwner === 1 || obj.policyHolderInfo.carOwner === 2
        } else {
          ower2Switch.value = false
        }
        xszFrontResult.value = fileList.value.find(v => v.imageType === 'C01')
        xszFront.value = fileList.value.find(v => v.imageType === 'C01')?.downloadUrl
        xszBackResult.value = fileList.value.find(v => v.imageType === 'D01')
        xszBack.value = fileList.value.find(v => v.imageType === 'D01')?.downloadUrl
        sfzFrontResult.value = fileList.value.find(v => v.imageType === 'C02')
        sfzFront.value = fileList.value.find(v => v.imageType === 'C02')?.downloadUrl
        sfzBackResult.value = fileList.value.find(v => v.imageType === 'D02')
        sfzBack.value = fileList.value.find(v => v.imageType === 'D02')?.downloadUrl
        sfz1FrontResult.value = fileList.value.find(v => v.imageType === 'C03')
        sfz1Front.value = fileList.value.find(v => v.imageType === 'C03')?.downloadUrl
        sfz1BackResult.value = fileList.value.find(v => v.imageType === 'D03')
        sfz1Back.value = fileList.value.find(v => v.imageType === 'D03')?.downloadUrl
        sfz2FrontResult.value = fileList.value.find(v => v.imageType === 'C04')
        sfz2Front.value = fileList.value.find(v => v.imageType === 'C04')?.downloadUrl
        sfz2BackResult.value = fileList.value.find(v => v.imageType === 'D04')
        sfz2Back.value = fileList.value.find(v => v.imageType === 'D04')?.downloadUrl

        additionalForm.value.companyId = obj.insOrders.companyId
        handleSelectCompany(additionalForm.value.companyId)
        additionalForm.value.dockingPersonPhone = obj.insOrders.dockingPersonPhone
        additionalForm.value.agreementId = obj.insOrders.agreementId
        handleSelectAgreement(additionalForm.value.agreementId)
        additionalForm.value.dockingPersonPhone = obj.insOrders.dockingPersonPhone
        additionalForm.value.signingTime = obj.insOrders.signingTime
        additionalForm.value.score = obj.insOrdersOtherInfo.score
        additionalForm.value.taxPremium = obj.insOrdersOtherInfo.taxPremium
        additionalForm.value.jqPolicyNo = obj.insOrdersOtherInfo.jqPolicyNo
        additionalForm.value.jqRenewal = obj.insOrdersOtherInfo.jqRenewal
        additionalForm.value.jqPremium = obj.insOrdersOtherInfo.jqPremium
        additionalForm.value.jyPremium = obj.insOrdersOtherInfo.jyPremium
        additionalForm.value.syPolicyNo = obj.insOrdersOtherInfo.syPolicyNo
        additionalForm.value.syRenewal = obj.insOrdersOtherInfo.syRenewal
        additionalForm.value.syPremium = obj.insOrdersOtherInfo.syPremium
        additionalForm.value.sumPremium = obj.insOrdersOtherInfo.sumPremium

        additionalForm.value.agreementId = obj.feeOrdersVo?.agreementId
        additionalForm.value.costId = obj.feeOrdersVo?.costId
        additionalForm.value.jqInletRatio = obj.feeOrdersVo?.jqInletRatio
        additionalForm.value.syInletRatio = obj.feeOrdersVo?.syInletRatio
        additionalForm.value.jyInletRatio = obj.feeOrdersVo?.jyInletRatio
        additionalForm.value.jqExportRatio = obj.feeOrdersVo?.jqExportRatio
        additionalForm.value.syExportRatio = obj.feeOrdersVo?.syExportRatio
        additionalForm.value.jyExportRatio = obj.feeOrdersVo?.jyExportRatio


        jqPolicyId.value = obj.insOrdersExternalPolicy?.jqPolicy
        syPolicyId.value = obj.insOrdersExternalPolicy?.syPolicy
        noPolicyId.value = obj.insOrdersExternalPolicy?.noPolicy
        jqSignId.value = obj.insOrdersExternalPolicy?.jqSign
        if (obj.insOrdersExternalPolicy?.uploadFiles) {
          let list = obj.insOrdersExternalPolicy?.uploadFiles
          if (list.find(a => a.id === jqPolicyId.value)) {
            let obj = list.find(a => a.id === jqPolicyId.value)
            jqPolicyName.value = obj.fileName
            jqPolicy.value = obj.downloadUrl
          }
          if (list.find(a => a.id === syPolicyId.value)) {
            let obj = list.find(a => a.id === syPolicyId.value)
            syPolicyName.value = obj.fileName
            syPolicy.value = obj.downloadUrl
          }
          if (list.find(a => a.id === noPolicyId.value)) {
            let obj = list.find(a => a.id === noPolicyId.value)
            noPolicyName.value = obj.fileName
            noPolicy.value = obj.downloadUrl
          }
          if (list.find(a => a.id === jqSignId.value)) {
            let obj = list.find(a => a.id === jqSignId.value)
            jqSignName.value = obj.fileName
            jqSign.value = obj.downloadUrl
          }
        }
        insuranceData.value = obj.kindInfoVo
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    })
  } else {
    JQChange(jqWork.value[0])
    SYChange(syWork.value[0])
  }
}

const longTime = (type: number) => {
  switch (type) {
    case 1:
      additionalForm.value.identifyValidEndDate1 = '9999-12-31'
      break;
    case 2:
      additionalForm.value.identifyValidEndDate2 = '9999-12-31'
      break;
    case 3:
      additionalForm.value.identifyValidEndDate3 = '9999-12-31'
      break;
  }
}

// 权益
let equitiesData = ref([])
let useMoney = ref(0)
let usedMoney = ref(0)
let lastMoney = ref(0)

let equitiesShow = ref(false)
const handleOpenEquities = () => {
  equitiesShow.value = true
}

const handleEquities = (bool) => {
  equitiesShow.value = bool
}

// 总保费自动计算
const autoSumPremium = () => {
  const taxPremium: number = Number(additionalForm.value.taxPremium) || 0
  const jqPremium: number = Number(additionalForm.value.jqPremium) || 0
  const jyPremium: number = Number(additionalForm.value.jyPremium) || 0
  const syPremium: number = Number(additionalForm.value.syPremium) || 0
  additionalForm.value.sumPremium = new Decimal(taxPremium).plus(jqPremium).plus(jyPremium).plus(syPremium)
}

onMounted(() => {
  initOption()
  initEditData()
  initCompany()
})

const sectionRefs = ref<HTMLElement[]>([])   // 存储所有区域的 DOM

// 设置 ref 的回调函数（v-for 中推荐用法）
const setSectionRef = (el: HTMLElement | null, index: number) => {
  if (el) {
    sectionRefs.value[index] = el
  }
}

const collapse = ref(null)
const setActiveNames = (name, isActive) => {
  let activeNames = collapse?.value?.activeNames ?? []
  if (isActive) activeNames = activeNames.filter(v => v !== name)
  if (!isActive) activeNames.push(name)
  collapse?.value?.setActiveNames(activeNames)
}

// ---------- 3. Intersection Observer 核心逻辑 ----------
let observer: IntersectionObserver | null = null

onMounted(() => {
  // 顶部缩减 70px（让导航栏挡不住判定），底部缩减 50%（让下一个区域出现时才切换）
  const rootMargin = `0px 0px -10% 0px`
  observer = new IntersectionObserver(
    (entries) => {
      // 找出所有可见的区域中，最靠近视口顶部的那一个
      const visibleEntries = entries.filter(entry => entry.isIntersecting)
      if (visibleEntries.length > 0) {
        // 按 top 值排序，取最靠上的（即用户最先看到的）
        const topEntry = visibleEntries.sort(
          (a, b) => a.boundingClientRect.top - b.boundingClientRect.top
        )[0]
        const targetId = topEntry.target.id
        if (targetId && tapIndex.value !== targetId) {
          setTimeout(() => {
            tapIndex.value = targetId
          }, 10);
        }
      }
    },
    {
      threshold: [0.5], // 多个阈值提高触发精度
      rootMargin: rootMargin,
    }
  )

  // 开始观察所有区域
  sectionRefs.value.forEach((el) => {
    if (el) observer?.observe(el)
  })
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
    observer = null
  }
})

</script>

<style scoped lang="scss">
@use "@/assets/styles/common/style";

:deep(.el-upload.el-upload--text) {
  --el-color-primary-light-9: #fff
}

:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
  cursor: unset;
}

.costTable {
  width: calc(100% - 48px);
  border: 1px solid #ebeef5;

  thead {
    color: #909399;

    th {
      border-right: 1px solid #ebeef5;

      div {
        box-sizing: border-box;
        line-height: 23px;
        overflow: hidden;
        overflow-wrap: break-word;
        padding: 8px 12px;
        text-overflow: ellipsis;
        white-space: normal;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  tbody {
    color: #303133;

    th {
      border-top: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;

      div {
        box-sizing: border-box;
        line-height: 23px;
        overflow: hidden;
        overflow-wrap: break-word;
        padding: 8px 12px;
        text-overflow: ellipsis;
        white-space: normal;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}

.addtional {
  width: calc(100% - 20px);
  height: calc(100vh - 140px);
  overflow: hidden;
  margin: 10px;

  .tap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 16px;

    .anchor-item {
      width: 16%;
      height: 44px;
      text-decoration: none;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFFFFF;
      border-radius: 4px;
      font-size: 18px;

      img {
        width: 30px;
        height: 30px;
        margin-right: 5px;
      }
    }

    .active {
      color: #FFFFFF;
      background: linear-gradient(91deg, #4FCAFF 0%, #2B62FF 100%);
    }
  }

  .content-box {
    height: calc(100% - 298px);
    width: 100%;
    overflow-y: auto;

    .title {
      height: 18px;
      border-left: 4px solid #00a0f4;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 12px;
      margin-left: 24px;
      color: #333333;
      font-size: 15px;

      .switch {
        height: 24px;
        background: #E5F3FF;
        border-radius: 12px;
        font-size: 12px;
        padding: 0 4px;
        color: #0083FF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 5px;

        .write {
          height: 20px;
          border-radius: 10px;
          padding: 0 4px;
          background: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 2px;
        }

        .identify {
          padding: 0 4px;
          margin: 0 2px;
        }
      }

      .ordinary {
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        border: 1px solid #EEEEEE;
        border-radius: 2px;
        color: #666666;
        display: flex;
        font-size: 12px;
        margin: 0 5px;
      }

      .active {
        border: 1px solid #0083FF;
        color: #0083FF;
        background: url("@/assets/images/additional/right.png") no-repeat right bottom;
        background-size: 12px 12px;
      }
    }

    .upload-box {
      width: 300px;
      height: 180px;
      background: #EEEEEE;
      border: 1px solid #EEEEEE;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .icon-box {
        text-align: center;
        color: #999999;

        p {
          margin: -16px 0 0;
          font-size: 14px;
        }
      }

      .upload-image {
        width: 100%;
        height: 100%;
      }

      .btns {
        height: 30px;
        width: 100%;
        background: rgba(0, 0, 0, .5);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: space-around;
        left: 0;
        bottom: 0;

        span {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: #ffffff;
        }
      }
    }

    .icon {
      padding-right: 24px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .icon-ele {
        font-size: 14px;
        margin-left: 10px;
        color: #333;
        margin-right: 6px;
      }
    }

    .insuranceInfo {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;

      .type-title {
        width: 80px;
        text-align: right;
        font-size: 16px;
      }

      .addData {
        line-height: 32px;
        border: 1px dotted #cccccc;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #cccccc;
        margin: 16px 0 16px;
        border-radius: 4px;
        cursor: pointer;
      }

      .insurance-jq {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 24px;

        .checkbox {
          margin: 0 24px;
          height: 22px;
          line-height: 22px;
          padding: 0 10px;
          border: 1px solid #EEEEEE;
          border-radius: 2px;
          color: #666666;
          display: flex;
          font-size: 12px;
          cursor: pointer;
        }

        .cehcked {
          border: 1px solid #0083FF;
          color: #0083FF;
          background: url("@/assets/images/additional/right.png") no-repeat right bottom;
          background-size: 12px 12px;
        }

        .time {
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
    }

    .equities {
      padding: 0 24px;

      .header {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .choseEquities {
          color: #0083FF;
          margin-left: 10px;
        }
      }

      .total {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;

        .money {
          width: 200px;
          margin-right: 30px;

          .totalItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }


  .footer {
    height: 60px;
    width: 100%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.el-divider--vertical) {
    height: auto;
  }

  :deep(.el-collapse-item__header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  :deep(.el-form-item) {
    display: block;
  }

  :deep(.el-upload-dragger) {
    padding: 0;
  }
}
</style>