<template>
  <div>
    <MOSTY.FromPage :title="pageTitle" @closeDialog="black" :showtb="props.from != 'carInfoStatistics'"
      :contentH="contentH ? contentH : 'calc(100vh - 273px)'">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <div class="scol">
          <div style="position: relative;top: 0;left: 90px;" class="btnBox" v-if="pageTitle.includes('修改')">
            <el-button style="margin-left: 10px" type="primary" @click="yjjsyFrom">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>移交车辆</span>
            </el-button>
          </div>
          <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="140px" :model="formData" :inline="true"
            :rules="rules" :disabled="!saveBtn">
            <div style="display: flex;justify-content:space-between;">
              <div style="width: 416px; height: 286px">
                <div style='width:175px;height:175px;margin:50px auto;overflow: hidden'>
                  <MOSTY.Upload v-if='saveBtn || formData.picture' width="150px" :limit="1" :nopicer="false"
                    :isImg="true" :ShowfileList="false" v-model="formData.picture" @filehandleChange="changeFiles"
                    :disabled="!saveBtn">
                  </MOSTY.Upload>
                  <img v-else :src="getImgUrl('img/emptyImg.jpg')" alt="" style="width:175px;height:175px">
                </div>
              </div>
              <div style="width:836px; display: flex; flex-wrap: wrap;justify-content: space-between;">
                <el-form-item label="车牌号:" prop="carnumber">
                  <el-input v-model="formData.carnumber" placeholder="请输入车牌号" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="车辆型号:">
                  <el-input v-model="formData.carmodel" placeholder="请输入车辆型号" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="车辆类型:" prop="cartype">
                  <MOSTY.DictTree :zdbh="'D_TB_CLLX'" :placeholder="formData.cartype ? formData.cartype : '请选择车辆类型'"
                    style="width: 250px;" :disabled='!saveBtn' clearable filterable :showLevels="true"
                    v-model="formData.cartype" @nameChange="changecar" />
                </el-form-item>
                <el-form-item label="载货用途类型:" prop="zhlx" v-if="formData.cartype && formData.cartype.charAt(0) == '2'">
                  <el-select v-model="formData.zhlx" placeholder="请选择载货类型" style="width: 250px">
                    <el-option v-for="item in D_BZ_CLYT_ZK" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="载客用途类型:" prop="zklx" v-if="formData.cartype && formData.cartype.charAt(0) == '1'">
                  <el-select v-model="formData.zklx" placeholder="请选择载客类型" style="width: 250px">
                    <el-option v-for="item in D_BZ_CLYT_ZH" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="车辆用途:" prop="carpurpose">
                  <el-select v-model="formData.carpurpose" placeholder="请选择车辆用途" style="width: 250px">
                    <el-option v-for="item in D_TB_CLYT" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="资产权属:" prop="zcqs">
                  <el-select v-model="formData.zcqs" placeholder="请选择资产权属" style="width: 250px">
                    <el-option v-for="item in D_BZ_CKQSLX" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="车辆使用状态:" prop="useStatus">
                  <el-select v-model="formData.useStatus" placeholder="请选择车辆使用状态" style="width: 250px">
                    <el-option label="在用" value="1"></el-option>
                    <el-option label="闲置" value="2"></el-option>
                    <el-option label="报废" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排量:" prop='dischargecapacity'>
                  <el-input v-model.number="formData.dischargecapacity" type="number" placeholder="请输入排量"
                    style="width: 250px">
                    <template #append>L</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="驱动形式:">
                  <el-input v-model="formData.drivertype" placeholder="请输入驱动形式" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="车架号:">
                  <el-input v-model="formData.vin" placeholder="请输入车架号" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="发动机号:">
                  <el-input v-model="formData.enginenum" placeholder="请输入发动机号" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="变速器类型:">
                  <el-select v-model="formData.derailleurtype" placeholder="变速器类型" style="width: 250px">
                    <el-option v-for="item in D_TB_BSQLX" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="载客数:" prop='passengers'>
                  <el-input v-model.number="formData.passengers" type="number" placeholder="请输入载客数"
                    style="width: 250px">
                    <template #append>人</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="载重量:" prop='deadweight'>
                  <el-input v-model.number="formData.deadweight" type="number" placeholder="请输入载重量"
                    style="width: 250px">
                    <template #append>吨</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <!-- <el-form-item label="地址:">
              <el-input v-model="formData.address" placeholder="请输入地址" style="width: 250px"></el-input>
            </el-form-item> -->
            <el-form-item label="	是否为新能源车:" prop="environmental">
              <el-select v-model="formData.environmental" placeholder="	是否为新能源车" style="width: 250px">
                <el-option v-for="item in D_BZ_JDCLXNYCBS" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电机功率:" prop="enginePower" v-if="formData.environmental == '1'">
              <el-input v-model.number="formData.enginePower" type='number' placeholder="请输入电机功率" style="width: 250px">
                <template #append>kw</template>
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="发动机排量:" prop="displacement" v-if="formData.environmental == '1'">
              <el-input v-model.number="formData.displacement" type="number" placeholder="请输入发动机排量"
                style="width: 250px"></el-input>
            </el-form-item> -->
            <el-form-item label="纯电续航里程:" prop="pureElectricRange" v-if="formData.environmental == '1'">
              <el-input v-model.number="formData.pureElectricRange" type='number' placeholder="请输入纯电续航里程"
                style="width: 250px">
                <template #append>公里</template>
              </el-input>
            </el-form-item>
            <el-form-item label="环保标准:" v-if="formData.environmental == '1'">
              <el-input v-model="formData.environmentalStandards" placeholder="请输入环保标准" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="资产所属:" v-if="formData.environmental == '1'">
              <el-input v-model="formData.assetOwnership" placeholder="请输入资产所属" style="width: 250px"></el-input>
            </el-form-item>
            <!-- <el-form-item label="购买日期:" prop="purchasingDate" v-if="formData.environmental == '1'">
              <el-date-picker v-model="formData.purchasingDate" type="date" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" style="width: 250px" @change='changegmrq' />
            </el-form-item> -->
            <el-form-item label="采购日期:" prop="purchasedate">
              <!--  :disabled-date="disabledshrq"  -->
              <el-date-picker v-model="formData.purchasedate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                style="width: 250px" @change='changeshrq' />
            </el-form-item>
            <el-form-item label="使用年限(年):" prop="useterm">
              <el-input v-model.number="formData.useterm" type='number' placeholder="请输入使用年限(年)" style="width: 250px"
                :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="车辆安全智能化:" prop="auto" style="width: 100%">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_CLAQZNH" v-model="formData.auto" selectType="select"
                style="width: 1090px;" @getselect='onChangezrlx'
                :disabledItem="formData.auto == '07' || formData.auto == '' ? [] : ['07']" :multiple="true" />
            </el-form-item>

            <el-form-item label="厂牌:">
              <el-input v-model="formData.label" placeholder="请输入厂牌" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="生产厂家:">
              <el-input v-model="formData.oem" placeholder="请输入生产厂家" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="燃料:" v-if="formData.environmental == '0'">
              <el-input v-model="formData.fuel" placeholder="请输入燃料" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="功率:" prop='power'>
              <el-input v-model.number="formData.power" type="number" placeholder="请输入功率" style="width: 250px">
                <template #append>kw</template>
              </el-input>
            </el-form-item>
            <el-form-item label="最大牵引力:">
              <el-input v-model="formData.maxforce" placeholder="请输入最大牵引力" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="自重:" prop='weight'>
              <el-input v-model.number="formData.weight" type="number" placeholder="请输入自重" style="width: 250px">
                <template #append> kg</template>
              </el-input>

            </el-form-item>
            <el-form-item label="车长:" prop='length'>
              <el-input v-model.number="formData.length" type="number" placeholder="请输入车长" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="车宽:" prop='width'>
              <el-input v-model.number="formData.width" type="number" placeholder="请输入车宽" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="车高:" prop='height'>
              <el-input v-model.number="formData.height" type="number" placeholder="请输入车高" style="width: 250px">
                <template #append> mm</template></el-input>
            </el-form-item>
            <el-form-item label="车厢长:" prop='longcar'>
              <el-input v-model.number="formData.longcar" type="number" placeholder="请输入车厢长" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="车厢宽:" prop='pawidth'>
              <el-input v-model.number="formData.pawidth" type="number" placeholder="请输入车厢宽" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="车厢高:" prop='carhigh'>
              <el-input v-model.number="formData.carhigh" type="number" placeholder="请输入车厢高" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="轴距:" prop='wheelbase'>
              <el-input v-model.number="formData.wheelbase" type="number" placeholder="请输入轴距" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="轮前距:" prop='frontTrack'>
              <el-input v-model.number="formData.frontTrack" type="number" placeholder="请输入轮前距" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="轮后距:" prop='rearTrack'>
              <el-input v-model.number="formData.rearTrack" placeholder="请输入轮后距" type="number" style="width: 250px">
                <template #append> mm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="车身颜色:">
              <el-input v-model="formData.color" placeholder="请输入车身颜色" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="轮胎规格:">
              <el-input v-model="formData.tireSize" placeholder="请输入轮胎规格" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="轮胎条数:" prop='tireCount'>
              <el-input v-model.number="formData.tireCount" type="number" placeholder="请输入轮胎条数"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="车辆来源:">
              <el-input v-model="formData.source" placeholder="请输入车辆来源" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="调来日期:">
              <!--  :disabled-date="disableddl"  -->
              <el-date-picker v-model="formData.jumpDate" type="date" placeholder="请选择调来日期" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" style="width: 250px" @change='changedlrq' />
            </el-form-item>
            <el-form-item label="出厂时间:" prop="runDate">
              <!-- :disabled-date="disabledtc" -->
              <el-date-picker v-model="formData.runDate" type="date" placeholder="请选择出厂时间" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" style="width: 250px" />
            </el-form-item>
            <!-- <el-form-item label="所属部门:" prop="managedeptname" style="display: flex">
              <el-input v-model="formData.managedeptname" placeholder="请选择所属部门" clearable
                style="width: 250px; margin-right: 20px">
                <template #append><el-button class='cursor'
                    @click="ChooesDdld('01')">选择</el-button></template></el-input>
            </el-form-item> -->
            <el-form-item label="所属部门:" prop="managedeptid" style="display: flex">
              <el-cascader style="width: 250px; margin-right: 20px" :show-all-levels="false" placeholder='请选择所属部门'
                :options="putUnderDeptData" v-model="formData.managedeptid" @change="handleSelectStatus"
                :props="cascaderProps" clearable />
            </el-form-item>
            <el-form-item label="购置金额:" prop="gzje">
              <el-input v-model.number="formData.gzje" type="number" placeholder="请输入购置金额" style="width: 250px">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="车主:">
              <el-input v-model="formData.owner" placeholder="请输入车主" style="width: 250px"></el-input>
            </el-form-item> -->
            <el-form-item label="备注:" style="width: 100%">
              <el-input v-model="formData.bz" type="textarea" autosize show-word-limit maxlength="200"
                style="width: 1090px" />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="formData.id">
          <MOSTY.Assort :title="'车辆二维码'" />
          <MOSTY.ErwmImg :url="qrcodeImg(formData.id, '777', formData.managedeptname, formData.carnumber)"
            :filename='"车辆二维码图片"' :id='"htmlsmewmcl"' />

        </div>

        <MOSTY.Assort :title="'车辆保险信息'" style='width:20%;'>
          <template #icon>
            <span @click='tabshow.clbxshow = !tabshow.clbxshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clbxshow ? '收起' : '展开' }}</span><el-icon v-if='tabshow.clbxshow'
                class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clbxshow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addDialog('01')">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
          <div class="tabbox">
            <el-table ref="multipleRef" :data="formData.tbSafeList" border stripe :row-key="keyid" style="width: 100%"
              :height="tableHeight" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" :reserve-selection="true" />
              <el-table-column prop="startDate" align="center" label="起始日期">
              </el-table-column>
              <el-table-column prop="endDate" label="结束日期"></el-table-column>
              <el-table-column prop="insuredUnit" align="center" label="承保单位"></el-table-column>
              <el-table-column prop="deliverStrong" align="center" label="交强险保额"></el-table-column>
              <el-table-column prop="damageInsurance" align="center" label="车辆损失险保额"></el-table-column>
              <el-table-column prop="dutyInsurance" align="center" label="商业第三责任险保额"></el-table-column>
              <el-table-column prop="personnelInsurance01" align="center" label="车上人员险(驾驶员)保额"></el-table-column>
              <el-table-column prop="personnelInsurance02" align="center" label="车上人员险(车辆)保额"></el-table-column>
              <el-table-column prop="bz" align="center" label="备注"></el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <span class="operate" v-if="saveBtn" style="color:#dc9507 !important"
                    @click="handletbSafeList(scope.row, scope.$index)"><el-icon>
                      <EditPen />
                    </el-icon>编辑</span>
                  <span class="operate" v-if='saveBtn' style="color: #e71111 !important"
                    @click="delRow(formData.tbSafeList, scope.row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                  <span class="operate" v-if="!saveBtn" style="color: #0b6c51 !important"
                    @click="etbSafeListxq(scope.row, scope.$index)">查看</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <MOSTY.Assort :title="'车辆随车物品信息'" style='width:20%;'>
          <template #icon>
            <span @click='tabshow.clscwpshow = !tabshow.clscwpshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clscwpshow ? '收起' : '展开' }}</span><el-icon v-if='tabshow.clbxshow'
                class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clscwpshow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addtbGoodsList">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
          <div class="tabbox">
            <el-table ref="multipleRef" :data="formData.tbGoodsList" border stripe :row-key="keyid" style="width: 100%"
              :height="tableHeight" @selection-change="handleSelectionChange">
              <!-- <el-table-column prop="registerDate" align="center" label="登记日期">
              </el-table-column> -->
              <el-table-column prop="truckgoods" label="物品类别">
                <template #default="{ row }">
                  <dict-tag :options="D_TB_SCWP" :value="row.truckgoods" :tag="true" />
                </template>
              </el-table-column>
              <!-- <el-table-column prop="goodName" align="center" label="物品名称"></el-table-column> -->
              <!-- <el-table-column prop="count" align="center" label="数量"></el-table-column>
              <el-table-column prop="driver" align="center" label="驾驶员签名"></el-table-column>
              <el-table-column prop="principal" align="center" label="负责人签名"></el-table-column> -->

              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <span class="operate edit-btn" v-if="saveBtn" @click="scwpedit(scope.row, scope.$index)"><el-icon>
                      <EditPen />
                    </el-icon>编辑</span>
                  <span class="operate del-btn" v-if="saveBtn"
                    @click="delRow(formData.tbGoodsList, scope.row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                  <span class="operate see-btn" v-if="!saveBtn" @click="seescwpxq(scope.row, scope.$index)">查看</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>


        <MOSTY.Assort :title="'车辆年审信息'">
          <template #icon>
            <span @click='tabshow.clsnsxxshow = !tabshow.clsnsxxshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clsnsxxshow ? '收起' : '展开' }}</span><el-icon v-if='tabshow.clsnsxxshow'
                class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clsnsxxshow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addtbYearlyList">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-button class="addbtn" type="primary" @click="saveRow(formData.tbYearlyList)">
              <el-icon>
                <Select />
              </el-icon>
              <span>保存编辑</span>
            </el-button>
          </div>
          <div class="tabbox">
            <el-table :data="formData.tbYearlyList" border stripe style="width: 100%" :height="tableHeight"
              :key="keyCount" @row-click="handletbYearlyChange">
              <el-table-column prop="carNumber" label="车牌号">
                <template #default="{ row }">
                  <span>{{ row.carNumber }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="endDate" align="center" label="年审到期日期">
                <template #default="{ row }">
                  <el-date-picker v-if="row.input == true" v-model="row.endDate" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                  <span v-else>{{ row.endDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="yearlyDate" align="center" label="实际年审日期">
                <template #default="{ row }">
                  <el-date-picker v-if="row.input == true" v-model="row.yearlyDate" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                  <span v-else>{{ row.yearlyDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" v-if="saveBtn">
                <template #default="{ row }">
                  <!-- <el-button class="addbtn" type="primary" @click="delRow(formData.tbYearlyList, row)">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button> -->
                  <span class="operate del-btn" @click="delRow(formData.tbYearlyList, row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <MOSTY.Assort :title="'驾驶员变动信息'">
          <template #icon>
            <span @click='tabshow.jsybdxxshow = !tabshow.jsybdxxshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.jsybdxxshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.jsybdxxshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.jsybdxxshow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addtbCarChangeList">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-button class="addbtn" type="primary" @click="saveRow(formData.tbCarChangeList)">
              <el-icon>
                <Select />
              </el-icon>
              <span>保存编辑</span>
            </el-button>
          </div>
          <div class="tabbox">
            <el-table :data="formData.tbCarChangeList" border stripe style="width: 100%" :height="tableHeight"
              :key="keyCount" @row-click="handletbCarChange">
              <el-table-column prop="changetime" align="center" label="时间">
                <template #default="{ row }">
                  <el-date-picker v-if="row.input == true" v-model="row.changetime" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                  <span v-else>{{ row.changetime }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="changetype" align="center" label="类型">
                <template #default="{ row }">
                  <el-select v-if="row.input == true" v-model="row.changetype" style="width: 100%" clearable>
                    <el-option v-for="item in D_BZ_CHANGETYPE" :key="item" :label="item.label" :value="item.value" />
                  </el-select>
                  <dict-tag v-else :options="D_BZ_CHANGETYPE" :value="row.changetype" :tag="false" />
                </template>
              </el-table-column>
              <el-table-column prop="username" label="姓名">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.username" />
                  <span v-else>{{ row.username }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="sex" align="center" label="性别">
                <template #default="{ row }">
                  <el-select v-if="row.input == true" v-model="row.sex" style="width: 100%" clearable>
                    <el-option v-for="item in D_BZ_XB" :key="item" :label="item.label" :value="item.value" />
                  </el-select>
                  <dict-tag v-else :options="D_BZ_XB" :value="row.sex" :tag="false" />
                </template>
              </el-table-column>
              <el-table-column prop="age" label="年龄">
                <template #default="{ row }">
                  <el-input-number v-if="row.input == true" v-model="row.age" :min="0" controls-position="right" />
                  <span v-else>{{ row.age }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="driveage" label="驾龄">
                <template #default="{ row }">
                  <el-input-number v-if="row.input == true" v-model="row.driveage" :min="0" controls-position="right" />
                  <span v-else>{{ row.driveage }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="changedesc" label="变动原因">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.changedesc" />
                  <span v-else>{{ row.changedesc }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" v-if="saveBtn">
                <template #default="{ row }">
                  <!-- <el-button class="addbtn" type="primary" @click="delRow(formData.tbCarChangeList, row)">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button> -->
                  <span class="operate del-btn" @click="delRow(formData.tbCarChangeList, row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <MOSTY.Assort :title="'车辆（大件、总成及肇事）维修情况登记表'">
          <template #icon>
            <span @click='tabshow.clwxqkshow = !tabshow.clwxqkshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clwxqkshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.clwxqkshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clwxqkshow'>
          <div class="flex just-between">
            <span class="car-fix-add-save" v-if="saveBtn">
              <el-button class="addbtn" type="primary" @click="addtbMaintainList">
                <el-icon>
                  <CirclePlus />
                </el-icon>
                <span>新增</span>
              </el-button>
              <el-button class="addbtn" type="primary" @click="saveRow(formData.tbMaintainList)">
                <el-icon>
                  <Select />
                </el-icon>
                <span>保存编辑</span>
              </el-button>
            </span>
            <span class="car-fix-time">
              <el-date-picker v-model="carFixTime" type="daterange" value-format="YYYY-MM-DD" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" />
              <el-button style="margin-top:-7px;" class="ml20" type="primary" @click="exportExcelCarFixTable">
                <el-icon>
                  <Download />
                </el-icon>
                <span>导出</span>
              </el-button>
            </span>
          </div>
          <div class="tabbox">
            <el-table :data="formData.tbMaintainList" border stripe style="width: 100%" :height="tableHeight"
              :key="keyCount" @row-click="handletbMaintainChange">
              <el-table-column prop="maintainDate" align="center" label="维修日期">
                <template #default="{ row }">
                  <!-- :disabled-date="disablednowDate1" -->
                  <el-date-picker v-if="row.input == true" v-model="row.maintainDate" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                  <span v-else>{{ row.maintainDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="contractor" label="承修单位">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.contractor" />
                  <span v-else>{{ row.contractor }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="text" align="center" label="维修内容" showOverflowTooltip>
              </el-table-column>
              <el-table-column prop="maintainRmb" align="center" label="维修金额">
              </el-table-column>
              <el-table-column prop="driver" align="center" label="驾驶员">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.driver" />
                  <span v-else>{{ row.driver }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <span class="operedit" v-if="saveBtn" @click="handwbList(scope.row, scope.$index)"><el-icon>
                      <EditPen />
                    </el-icon>编辑维修内容</span>
                  <span class="operesee" v-if="!saveBtn" @click="handseewbList(scope.row)"><el-icon>
                      <Compass />
                    </el-icon>查看</span>
                  <span class="operdel" v-if="saveBtn" @click="delRow(formData.tbMaintainList, scope.row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <MOSTY.Assort :title="'车辆报废信息'">
          <template #icon>
            <span @click='tabshow.clbfhow = !tabshow.clbfhow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clbfhow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.clbfhow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clbfhow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addtbScrapList">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>

          </div>
          <div class="tabbox">
            <el-table ref="multipleRef1" :data="formData.tbScrapList" border stripe :row-key="keyid" style="width: 100%"
              :height="tableHeight" @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55" :reserve-selection="true" />
              <el-table-column prop="carNumber" align="center" label="车牌号">
              </el-table-column>
              <el-table-column prop="mileage" label="累计行驶里程"></el-table-column>
              <el-table-column prop="usedLife" align="center" label="累计使用年限"></el-table-column>
              <el-table-column prop="expert" align="center" label="鉴定人"></el-table-column>
              <el-table-column prop="identifyDate" align="center" label="鉴定时间"></el-table-column>
              <el-table-column prop="scrapCause" align="center" label="报废原因"></el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <span class="operate edit-btn" v-if="saveBtn"
                    @click="handtbScrapList(scope.row, scope.$index)"><el-icon>
                      <EditPen />
                    </el-icon>编辑</span>
                  <span class="operate del-btn" v-if='saveBtn'
                    @click="delRow(formData.tbScrapList, scope.row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                  <span class="operate see-btn" v-if="!saveBtn"
                    @click="tbScrapListxq(scope.row, scope.$index)">查看</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>


        <MOSTY.Assort :title="'车辆调动信息'">
          <template #icon>
            <span @click='tabshow.clbddow = !tabshow.clbddow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clbddow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.clbddow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clbddow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addtbMoveList">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-button class="addbtn" type="primary" @click="saveRow(formData.tbMoveList)">
              <el-icon>
                <Select />
              </el-icon>
              <span>保存编辑</span>
            </el-button>

          </div>
          <div class="tabbox">
            <el-table :data="formData.tbMoveList" border stripe style="width: 100%" :height="tableHeight"
              :key="keyCount" @row-click="handletbMoveChange">
              <el-table-column prop="moveDate" align="center" label="调动日期">
                <template #default="{ row }">
                  <!-- :disabled-date="disablednowDate1" -->
                  <el-date-picker v-if="row.input == true" v-model="row.moveDate" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                  <span v-else>{{ row.moveDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="moveUnit" align="center" label="调动单位">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.moveUnit" />
                  <span v-else>{{ row.moveUnit }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="importUnit" label="调入单位">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.importUnit" />
                  <span v-else>{{ row.importUnit }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="moveCause" label="调动原因">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.moveCause" />
                  <span v-else>{{ row.moveCause }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" v-if="saveBtn">
                <template #default="{ row }">
                  <!-- <el-button class="addbtn" type="primary" @click="delRow(formData.tbMoveList, row)">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button> -->
                  <span class="operate del-btn" @click="delRow(formData.tbMoveList, row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
        <div v-if='formData.id'>
          <MOSTY.Assort :title="'车辆行驶里程信息'">
            <template #icon>
              <span @click='tabshow.clxslcshow = !tabshow.clxslcshow' class='zkbox'>
                <span class='bqfont'> {{ tabshow.clxslcshow ? '收起' : '展开' }}</span>
                <el-icon v-if='tabshow.clxslcshow' class='iconfont'>
                  <CaretTop />
                </el-icon>
                <el-icon v-else class='iconfont'>
                  <CaretBottom />
                </el-icon>
              </span>
            </template>
          </MOSTY.Assort>
          <div v-if='tabshow.clxslcshow'>
            <el-button class="addbtn" type="primary" @click="addtbMileage" :loading="clxslcLoading">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <div class="tabbox">
              <el-table :data="formData.tbMileageList" border stripe style="width: 100%" :height="tableHeight"
                :key="keyCount" @row-click="handletbMileageChange">
                <el-table-column prop="startDate" align="center" label="开始行驶日期"></el-table-column>
                <el-table-column prop="endUnit" align="center" label="结束行驶日期"></el-table-column>
                <el-table-column prop="driver" label="驾驶员"></el-table-column>
                <el-table-column prop="mileage" label="累计行驶里程"> </el-table-column>
                <!-- <el-table-column prop="sum" label="累计运货"></el-table-column> -->
                <el-table-column prop="bz" label="备注"></el-table-column>

                <el-table-column label="操作" v-if="saveBtn">
                  <template #default="{ row, $index }">
                    <span class="operedit mr10" type="primary" @click="DriverMileEdit(row, $index)">
                      <el-icon>
                        <EditPen />
                      </el-icon>
                      <span>编辑</span>
                    </span>
                    <span class="operate del-btn" @click="delRow(formData.tbMileageList, row)"><el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>

          </div>
        </div>



        <MOSTY.Assort :title="'车辆燃料消耗信息'">
          <template #icon>
            <span @click='tabshow.clrlxhshow = !tabshow.clrlxhshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clrlxhshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.clrlxhshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clrlxhshow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addtbFuelDrain">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-button class="addbtn" type="primary" @click="saveRow(formData.tbFuelDrainList)">
              <el-icon>
                <Select />
              </el-icon>
              <span>保存编辑</span>
            </el-button>

          </div>
          <div class="tabbox">
            <el-table :data="formData.tbFuelDrainList" border stripe style="width: 100%" :height="tableHeight"
              :key="keyCount" @row-click="handletbFuelDrainChange">
              <el-table-column prop="startDate" align="center" label="开始日期">
                <template #default="{ row }">
                  <!--  :disabled-date="disablednowDate1" -->
                  <el-date-picker v-if="row.input == true" v-model="row.startDate" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change='row.endDate = ""' />
                  <span v-else>{{ row.startDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="endDate" align="center" label="结束日期">
                <template #default="{ row }">
                  <!-- :disabled-date="disabledjsxs2"  -->
                  <el-date-picker v-if="row.input == true" v-model="row.endDate" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" :picker-options="sjqx.times2 = row.startDate" />
                  <span v-else>{{ row.endDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="mileage" label="驾驶里程(公里)">
                <template #default="{ row }">
                  <el-input-number v-if="row.input == true" v-model="row.mileage" :min="0" controls-position="right" />
                  <span v-else>{{ row.mileage }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="consume" label="燃油消耗">
                <template #default="{ row }">
                  <el-input-number v-if="row.input == true" v-model="row.consume" :min="0" controls-position="right" />
                  <span v-else>{{ row.consume }}</span>
                </template>
              </el-table-column>
              <el-table-column label="燃油定额比(升、百公里)">
                <el-table-column prop="quota" label="定额">
                  <template #default="{ row }">

                    <el-input-number v-if="row.input == true" v-model="row.quota" :min="0" controls-position="right" />
                    <span v-else>{{ row.quota }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="savings" label="节余">
                  <template #default="{ row }">
                    <el-input-number v-if="row.input == true" v-model="row.savings" :min="0"
                      controls-position="right" />
                    <span v-else>{{ row.savings }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="loss" label="亏损">
                  <template #default="{ row }">
                    <el-input-number v-if="row.input == true" v-model="row.loss" :min="0" controls-position="right" />
                    <span v-else>{{ row.loss }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="driver" label="驾驶员">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.driver" />
                  <span v-else>{{ row.driver }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" v-if="saveBtn">
                <template #default="{ row }">
                  <!-- <el-button class="addbtn" type="primary" @click="delRow(formData.tbFuelDrainList, row)">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button> -->
                  <span class="operate del-btn" @click="delRow(formData.tbFuelDrainList, row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <MOSTY.Assort :title="'车辆轮胎消耗信息'">
          <template #icon>
            <span @click='tabshow.clltxhshow = !tabshow.clltxhshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clltxhshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.clltxhshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clltxhshow'>
          <div v-if="saveBtn">
            <el-button class="addbtn" type="primary" @click="addtbTireDrain">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-button class="addbtn" type="primary" @click="saveRow(formData.tbTireDrainList)">
              <el-icon>
                <Select />
              </el-icon>
              <span>保存编辑</span>
            </el-button>

          </div>
          <div class="tabbox">
            <el-table :data="formData.tbTireDrainList" border stripe style="width: 100%" :height="tableHeight"
              :key="keyCount" @row-click="handletbTireDrainChange">
              <el-table-column prop="driver" align="center" label="驾驶员">
                <template #default="{ row }">
                  <el-input v-if="row.input == true" type="text" v-model="row.driver" />
                  <span v-else>{{ row.driver }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="tireDate" align="center" label="装胎时间">
                <template #default="{ row }">
                  <!-- :disabled-date="disablednowDate1" -->
                  <el-date-picker v-if="row.input == true" v-model="row.tireDate" style="width: 100%" type="date"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                  <span v-else>{{ row.tireDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="renewCount" align="center" label="换胎条数">
                <template #default="{ row }">
                  <el-input-number v-if="row.input == true" v-model="row.renewCount" :min="0"
                    controls-position="right" />
                  <span v-else>{{ row.renewCount }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="economy" align="center" label="换胎行驶里程">
                <!-- <el-table-column prop="economy" align="center" label="换胎金额"> -->
                <template #default="{ row }">
                  <el-input-number v-if="row.input == true" v-model="row.economy" :min="0" controls-position="right" />
                  <span v-else>{{ row.economy }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" v-if="saveBtn">
                <template #default="{ row }">
                  <!-- <el-button class="addbtn" type="primary" @click="delRow(formData.tbTireDrainList, row)">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button> -->
                  <span class="operate del-btn" @click="delRow(formData.tbTireDrainList, row)"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <MOSTY.Assort :title="'车辆登记证复印件'">
          <template #icon>
            <span @click='tabshow.cldjfyjshow = !tabshow.cldjfyjshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.cldjfyjshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.cldjfyjshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.cldjfyjshow'>
          <div style="margin: 10px">
            <MOSTY.Upload :width="'100%'" :limit="3" :nopicer="false" :isImg="true" :ShowfileList="false"
              v-model="formData.signfile" :nameshow='true' :gsgfList="['jpg', 'png']" :disabled='!saveBtn'
              @filehandleChange="changeFiles">
            </MOSTY.Upload>
          </div>
        </div>

        <MOSTY.Assort :title="'车辆营运证复印件'">
          <template #icon>
            <span @click='tabshow.clyyfyjshow = !tabshow.clyyfyjshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.clyyfyjshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.clyyfyjshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.clyyfyjshow'>
          <div style="margin: 10px">
            <MOSTY.Upload :width="'100%'" :limit="3" :nopicer="false" :isImg="true" :ShowfileList="false"
              v-model="formData.operatefile" :nameshow='true' :gsgfList="['jpg', 'png']" :disabled='!saveBtn'
              @filehandleChange="changeFiles">
            </MOSTY.Upload>
          </div>
        </div>
        <MOSTY.Assort :title="'机动车行驶证复印件'">
          <template #icon>
            <span @click='tabshow.jdcjszshow = !tabshow.jdcjszshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.jdcjszshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.jdcjszshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.jdcjszshow'>
          <div style="margin: 10px">
            <MOSTY.Upload :width="'100%'" :limit="3" :nopicer="false" :isImg="true" :ShowfileList="false"
              v-model="formData.photocopyId" :nameshow='true' :gsgfList="['jpg', 'png']" :disabled='!saveBtn'
              @filehandleChange="changeFiles">
            </MOSTY.Upload>
          </div>
        </div>
        <MOSTY.Assort :title="'机动车行驶证附页复印件'">
          <template #icon>
            <span @click='tabshow.jdcjszfyshow = !tabshow.jdcjszfyshow' class='zkbox'>
              <span class='bqfont'> {{ tabshow.jdcjszfyshow ? '收起' : '展开' }}</span>
              <el-icon v-if='tabshow.jdcjszfyshow' class='iconfont'>
                <CaretTop />
              </el-icon>
              <el-icon v-else class='iconfont'>
                <CaretBottom />
              </el-icon>
            </span>
          </template>
        </MOSTY.Assort>
        <div v-if='tabshow.jdcjszfyshow'>
          <div style="margin: 10px">
            <MOSTY.Upload :width="'100%'" :limit="10" :nopicer="false" :isImg="true" :ShowfileList="false"
              v-model="formData.photocopy2Id" :nameshow='true' :gsgfList="['jpg', 'png']" :disabled='!saveBtn'
              @filehandleChange="changeFiles">
            </MOSTY.Upload>
          </div>
        </div>
      </template>
      <template #footer v-if="props.from != 'carInfoStatistics'">
        <el-button type="primary" v-if="saveBtn" v-loading='saveloading' @click="submit(ruleFormRef)"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="black"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </template>
    </MOSTY.FromPage>

    <!-- 选择部门 -->
    <Choosebm :showDdld="showDept" :Single="true" :parentId='parentId' :orgLevels="orgLevels" @closezzjg="closezzjg"
      @listdata="getSonValue" :zzlx="zzlx" />

    <!-- 选择部门 车辆移交而且是“安全部门”才用 -->
    <ChooseDept :showDdld="isShowCarDept" :Single="true" :deptId="carParentId" @closezzjg="isShowCarDept = false"
      @listdata="getCarSonValue" :zzlx="carZzlx" />

    <!-- 车辆保险信息新增弹出框 -->
    <Addclbx v-if="addDiaShow" :dialogType="carSecuryType" :saveBtnShow="saveBtnShow" :addDiaShow="addDiaShow"
      :title="jstitle" @changeAddVi="changeAddVi" :rowxq="rowxq" @changeclose="addDiaShow = false" />
    <!-- 车辆随车物品信息新增弹出框 -->
    <Addscwp v-if="addDiaShow2" :saveBtnShow="saveBtnShow" :addDiaShow="addDiaShow2" :title="jstitle"
      @changeAddVi="changeAddVi2" :rowxq="rowxq" @changeclose="addDiaShow2 = false" />
    <!-- 车辆报废信息新增弹出框 -->
    <Addclpf v-if="addDiaShow1" :saveBtnShow="saveBtnShow" :addDiaShow="addDiaShow1" :title="jstitle"
      @changeAddVi="changeAddVi1" :rowxq="rowxq" @changeclose="addDiaShow1 = false" />

    <!-- 驾驶员里程信息-弹出框 -->
    <AddDriverMile v-if="isShowDirverMileDia" :dialogType="driverMileType" :saveBtnShow="saveBtnShow"
      :addDiaShow="isShowDirverMileDia" :mileArr="formData.tbMileageList" :title="driverMileTitle" @ok="driverMileOk"
      :rowxq="rowxq" @changeclose="isShowDirverMileDia = false" />

    <!-- 车辆移交 -->
    <el-dialog v-model="showtjjsz" title="车辆单位变更" :before-close="closedio" width="600px">
      <div>
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="deptfrom" :inline="true"
          :rules="rules">
          <el-form-item label="移交单位名称:" prop="nameaffiliation" style="display: flex">
            <el-input v-model="deptfrom.nameaffiliation" disabled clearable style="width: 400px">
              <template #append>
                <el-button @click="chooseCarDept">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="savebmyj"> <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span></el-button>
          <el-button @click="closedio"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="showwblist" title="车辆维修内容" :before-close="closewb" width="1000px">
      <div>
        <el-button class="addbtn" type="primary" @click="addwbList" v-if="wbDatabtn">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-table ref="multipleTableRef" stripe :data="wbData" style="width: 100%" row-style="height:32px"
          @selection-change="handleSelectionChange" border>
          <el-table-column label="小项名称" show-overflow-tooltip property="info"></el-table-column>
          <el-table-column label="单价" show-overflow-tooltip property="money"></el-table-column>
          <el-table-column label="数量" show-overflow-tooltip property="count"></el-table-column>
          <el-table-column label="总金额" show-overflow-tooltip prop="allMoney"></el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="scope">
              <span class="operesee" @click="seewbData(scope.row)">
                <el-icon>
                  <Compass />
                </el-icon>查看</span>
              <span class="operedit" v-if="wbDatabtn" @click="editwbData(scope.row, scope.$index)">
                <el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <el-popconfirm v-if="wbDatabtn" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                title="确定要删除?" @confirm="deletewbData(scope.$index)">
                <template #reference>
                  <span class="operdel" size="small">
                    <el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">

          <el-button @click="savewbdata" v-if="wbDatabtn">
            <el-icon>
              <DocumentChecked />
            </el-icon>保存
          </el-button>
          <el-button @click="closewb">
            <el-icon>
              <DocumentDelete />
            </el-icon>关闭
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="shownewwb" :title="wbobjtitle" width="600px" :before-close="closeaddwb" :disabled="wbobjbtn">
      <div>
        <el-form class="mosty-from-wrap" ref="FormRef" label-width="130px" :model="wbobj" :inline="true" :rules="rules2"
          style='display:flex;justify-content:space-between;flex-wrap:wrap;width:500px;'>
          <el-form-item label="小项:" prop="info">
            <el-input v-model="wbobj.info" clearable style="width: 250px" />
          </el-form-item>
          <el-form-item label="单价:" prop="money">
            <el-input-number controls-position="right" v-model="wbobj.money" clearable style="width: 250px"
              @change="Blur" />
          </el-form-item>
          <el-form-item label="数量:" prop="count">
            <el-input-number controls-position="right" v-model="wbobj.count" clearable style="width: 250px"
              @change="Blur" />
          </el-form-item>
          <el-form-item label="总价:" prop="allMoney">
            <el-input v-model="wbobj.allMoney" clearable disabled style="width: 250px" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">

          <el-button @click="savewbobj(FormRef)" v-loading='loadingshow' v-if="wbobjbtn">
            <el-icon>
              <DocumentChecked />
            </el-icon>保存</el-button>
          <el-button @click="closeaddwb"><el-icon>
              <DocumentDelete />
            </el-icon>关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import ChooseDept from "@/components/MyComponents/ChooseDept/index.vue";
import Choosebm from "@/components/MyComponents/ChooseDept/Departbm.vue";
import * as rule from "@/utils/rules.js";
import Addclbx from "./addclbx";
import Addclpf from "./addclpf";
import Addscwp from "./Addscwp";
import AddDriverMile from "./addDriverMile";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import { filterqx } from "@/utils/auth.js"
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { qrcodeImg, createAndClickLink, disablednowDate, disablednowDate1 } from "@/utils/tools.js";
// import { Html2canvasImg } from "@/utils/html2pdf.js";
import { ExpXlsx } from "@/excel/Export3Excel.js"
import EditLlxx from "../../../../../dutyBook/jgryandzz/commponents/EditLlxx.vue";
const { proxy } = getCurrentInstance();
const {
  D_TB_CLYT,
  D_TB_BSQLX,
  D_TB_SCWP,
  D_BZ_CHANGETYPE,
  D_BZ_XB,
  D_BZ_JDCLXNYCBS,
  D_BZ_CLAQZNH,
  D_BZ_CLYT_ZK,
  D_BZ_CLYT_ZH,
  D_BZ_CKQSLX
} = proxy.$dict(
  "D_TB_CLYT",
  "D_TB_BSQLX",
  "D_TB_SCWP",
  "D_BZ_CHANGETYPE",
  "D_BZ_XB",
  "D_BZ_JDCLXNYCBS",
  "D_BZ_CLAQZNH",
  "D_BZ_CLYT_ZK",
  "D_BZ_CLYT_ZH",
  "D_BZ_CKQSLX"
);

const props = defineProps({
  obj: {
    type: Object,
    default: () => { }
  },
  /**内容高度 */
  contentH: {
    type: String,
  },
  /** 来自 */
  from: {
    type: String,
    default: ''
  }
});


const orgLevels = ref(getItem("deptId").orgLevel);
const parentId = ref(getItem("deptId").ssdwid)

/** 展示部门弹框-组件 01: 所属部门 02:移交单位名称 */
const showDept = ref(false); //选择部门

// 车辆移交 -安全部门用 parenId
const carParentId = ref() // 不加可以一直到最后一级 比如省：省市县 市：市县
/** 展示部门弹框-组件 车辆移交单位 安全部门用 */
const isShowCarDept = ref(false); //选择部门

const deptfrom = ref({});
/** 车辆行驶里程loading */
const clxslcLoading = ref(false);
const showtjjsz = ref(false);
/** 车辆保险弹框类型 add,edit */
const carSecuryType = ref('add')
/** 驾驶员里程类型 add,edit */
const driverMileType = ref('add')
/** 驾驶员里程标题 */
const driverMileTitle = ref('驾驶员里程')
/** 修车导出日期范围 */
const carFixTime = ref()
/** 修车导出原数据 */
const carFixTableData = ref([])
const rules = reactive({
  // carnumber: [{ required: true, message: "车牌号不能为空", trigger: "change" }],
  ...rule.carNumberRule({
    require: true,
    validator: true
  }, 'carnumber'),
  cartype: [{ required: true, message: "车辆类型不能为空", trigger: "change" }],
  zhlx: [{ required: true, message: "载货类型不能为空", trigger: "change" }],
  zklx: [{ required: true, message: "载客类型不能为空", trigger: "change" }],
  // carpurpose: [{ required: true, message: "车辆用途不能为空", trigger: "change" }],
  purchasedate: [{ required: true, message: "上户日期不能为空", trigger: "change" }],
  zcqs: [{ required: true, message: "资产权属不能为空", trigger: "change" }],
  useStatus: [{ required: true, message: "车辆使用状态不能为空", trigger: "change" }],
  auto: [{ required: true, message: "车辆安全智能化不能为空", trigger: "blur" }],
  runDate: [{ required: true, message: "出厂时间不能为空", trigger: "change" }],
  // jumpDate: [{ required: true, message: "调来日期不能为空", trigger: "change" }],
  environmental: [{ required: true, message: "请选择是否为新能源车辆", trigger: "change" }],
  // environmentalStandards: [{ required: true, message: "环保标准不能为空", trigger: "change" }],
  // assetOwnership: [{ required: true, message: "资产所属不能为空", trigger: "change" }],
  purchasingDate: [{ required: true, message: "购买日期不能为空", trigger: "change" }],
  managedeptid: [{ required: true, message: "所属部门不能为空", trigger: "change" }],
  ...rule.znumberRule({ validator: true, require: false }, "dischargecapacity"),
  ...rule.znumberRule({ validator: true, require: false }, "enginePower"),
  ...rule.numbernineRule({ validator: true, require: false, iszs: true, firstNum: 3, lastNum: 1 }, "deadweight"),
  ...rule.znumberRule({ validator: true, require: false }, "power"),
  ...rule.znumberRule({ validator: true, require: false }, "pureElectricRange"),
  ...rule.znumberRule({ validator: true, require: false }, "weight"),
  ...rule.znumberRule({ validator: true, require: true }, "displacement"),
  ...rule.intRule({ validator: true, require: false }, "passengers"),
  ...rule.znumberRule({ validator: true, require: false }, "length"),
  ...rule.znumberRule({ validator: true, require: false }, "width"),
  ...rule.znumberRule({ validator: true, require: false }, "height"),
  ...rule.znumberRule({ validator: true, require: false }, "longcar"),
  ...rule.znumberRule({ validator: true, require: false }, "pawidth"),
  ...rule.znumberRule({ validator: true, require: false }, "carhigh"),
  ...rule.znumberRule({ validator: true, require: false }, "wheelbase"),
  ...rule.znumberRule({ validator: true, require: false }, "frontTrack"),
  ...rule.znumberRule({ validator: true, require: false }, "rearTrack"),
  ...rule.znumberRule({ validator: true, require: false }, "gzje"),
  ...rule.intRule({ validator: true, require: false }, "tireCount"),
  ...rule.numberzzsRule({ validator: true, require: true, iszs: true, num: 99, minNum: 1 }, "useterm"),
  // ...rule.intRule({ validator: true, require: false }, "useterm"),
});
const rules2 = reactive({
  info: [{ required: true, message: "小项不能为空", trigger: "change" }],
  ...rule.znumberRule({ validator: true, require: true }, "money"),
  ...rule.znumberRule({ validator: true, require: true }, "count"),
  ...rule.znumberRule({ validator: true, require: true }, "allMoney"),
})
const FormRef = ref()
const loadingshow = ref(false);
const addDiaShow1 = ref(false);
/** 显示驾驶员里程信息弹框 */
const isShowDirverMileDia = ref(false)
const keysid1 = ref(0);
const zzlx = ref(0);
const carZzlx = ref('02');
const multipleRef1 = ref(null);
const multipleSelection = ref([]);
const multipleSelection1 = ref([]);
const saveBtn = ref(true);
const saveBtnShow = ref(true);
const jstitle = ref("");
const currentRow = ref(); //选中的表格数据
const tabshow = reactive({
  clbxshow: true,
  clscwpshow: true,
  clsnsxxshow: true,
  jsybdxxshow: true,
  clwxqkshow: true,
  clbfhow: true,
  clbddow: true,
  clxslcshow: true,
  clrlxhshow: true,
  clltxhshow: true,
  cldjfyjshow: true,
  clyyfyjshow: true,
  jdcjszshow: true,
  jdcjszfyshow: true,

});
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("");
const formData = ref({
  useStatus: "1",
  tbSafeList: [], //车辆保险信息
  tbGoodsList: [], //车辆随车物品信息
  tbYearlyList: [], //车辆年审信息
  tbCarChangeList: [], //驾驶员变动信息
  tbMaintainList: [], //车辆（大件、总成及肇事）维修情况登记表
  tbScrapList: [], //车辆报废信息
  tbMoveList: [], //车辆调动信息
  tbMileageList: [], //车辆行驶里程信息
  tbFuelDrainList: [], //车辆燃料消耗信息
  tbTireDrainList: [] //车辆轮胎消耗信息
});
const keyid = (row) => {
  return editIndex.value;
};
const multipleRef = ref(null);
const addDiaShow = ref(false);
const addDiaShow2 = ref(false);
const keysid = ref(0);
const rowxq = ref(null);
const editIndex = ref(null);
/** 是否安全部门 */
const isAqbm = ref(filterqx("isaqbm") == "1");
const sjqx = reactive({
  times: '',
  times2: '',
})

/** 字符串转数值 */
const str2Arr = (str) => {
  if (!str) return []
  if (typeof str === 'string') return str.split(',')
  return []
}
onMounted(() => {
  if (props.obj) {
    pageTitle.value = props.obj.title;
    saveBtn.value = props.obj.saveBtn;
    if (props.obj.row) {
      formData.value = props.obj.row;
      formData.value.auto = str2Arr(formData.value.auto)
      parentId.value = props.obj.row.orgid
      getdata(formData.value.id);
    }
  }
  getPutUnderDept()
  changeYear()
});
function onChangezrlx(val) {
  if (val.value == '07') {

  }
  const index = formData.value.auto.indexOf('07');
  if (formData.value.auto.length > 1 && index !== -1) {
    formData.value.auto.splice(index, 1)
  }

}
function disabledshrq(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(formData.value.purchasingDate).getTime() || time.getTime() > Date.now()
}
function disableddl(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(formData.value.purchasedate).getTime() || time.getTime() > Date.now()
}
function disabledtc(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(formData.value.jumpDate).getTime() || time.getTime() > Date.now()
}
function disabledjsxs(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(sjqx.times).getTime() || time.getTime() > Date.now()
}
function disabledjsxs2(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(sjqx.times2).getTime() || time.getTime() > Date.now()
}

const photocopyId = () => {

}

function changegmrq() {
  formData.value.purchasedate = '';
  formData.value.jumpDate = '';
  formData.value.runDate = ''
}
function changeshrq() {
  // 清空相关字段
  formData.value.jumpDate = '';
  formData.value.runDate = '';
  changeYear()
}
// 计算使用年限
function changeYear() {
  if (formData.value.purchasedate) {
    const purchaseDate = new Date(formData.value.purchasedate);
    const currentDate = new Date();

    // 计算年份差
    let yearDiff = currentDate.getFullYear() - purchaseDate.getFullYear();

    // 调整月份和日期的差异
    const monthDiff = currentDate.getMonth() - purchaseDate.getMonth();
    const dayDiff = currentDate.getDate() - purchaseDate.getDate();

    // 如果当前月份小于采购月份，或者月份相同但当前日期小于采购日期，则年限减1
    if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
      yearDiff--;
    }

    // 设置使用年限，最小为0
    formData.value.useterm = Math.max(0, yearDiff);
  } else {
    // 如果没有采购日期，清空使用年限
    formData.value.useterm = '';
  }
}
function changedlrq(params) {
  formData.value.runDate = ''
}
//获取表格接口数据
function getdata(id) {
  //获取车辆保险信息
  getApi({ id: id }, "/mosty-jcgl/safe/queryByCarmsgid").then((res) => {
    if (res && saveBtn.value) {
      res.forEach((item) => {
        item.del = false;
      });
    }
    formData.value.tbSafeList = res ? res : [];
  });
  //车辆随车物品信息
  getApi({ id: id }, "/mosty-jcgl/goods/queryByCarmsgid").then((res) => {

    formData.value.tbGoodsList = res ? res : [];
    formData.value.tbGoodsList.forEach(item => {
      item.truckgoods = item.truckgoods ? item.truckgoods.split(',') : '无'
    })

  });
  //车辆年审信息
  getApi({ id: id }, `/mosty-jcgl/yearly/queryByCarmsgid`).then((res) => {
    formData.value.tbYearlyList = res ? res : [];
  });
  //驾驶员变动信息
  getApi({ id: id }, `/mosty-jcgl/carChange/queryByCarmsgid`).then((res) => {
    formData.value.tbCarChangeList = res ? res : [];
  });
  //车辆（大件、总成及肇事）维修情况登记表（1(数量：1，单价：1元)，共计1元）
  getApi({ id: id }, `/mosty-jcgl/maintain/queryByCarmsgid`).then((res) => {
    formData.value.tbMaintainList = res ? res : [];
    formData.value.tbMaintainList.forEach((el) => {
      el.text = el.maintenance ? JSON.parse(el.maintenance) : [];
      let arr = [];

      el.text.forEach((e) => {
        let str =
          e.info +
          "(数量：" +
          e.count +
          ",单价：" +
          e.money +
          "元），共计" +
          e.allMoney +
          "元";
        arr.push(str);
      });
      el.text = arr;
    });
    carFixTableData.value = formData.value.tbMaintainList.map(item => {
      return {
        ...item,
        maintenanceTxt: item.text ? item.text.join(';  ') : ''
      }
    })
  });
  //车辆报废信息
  getApi({ id: id }, `/mosty-jcgl/scrap/queryByCarmsgid`).then((res) => {
    if (res && saveBtn.value) {
      res.forEach((item) => {
        item.del = false;
      });
    }
    formData.value.tbScrapList = res ? res : [];
  });
  //车辆调动信息
  getApi({ id: id }, `/mosty-jcgl/move/queryByCarmsgid`).then((res) => {
    formData.value.tbMoveList = res ? res : [];
  });

  //车辆行驶里程信息
  clxslcLoading.value = true;
  getApi({ id: id }, `/mosty-jcgl/carMileage/queryByCarmsgid`).then((res) => {
    res = Array.isArray(res) ? res : []
    formData.value.tbMileageList = sortTbMileageList(res);
  }).finally(() => {
    clxslcLoading.value = false;
  });
  //车辆燃料消耗信息
  getApi({ id: id }, `/mosty-jcgl/fuelDrain/queryByCarmsgid`).then((res) => {
    formData.value.tbFuelDrainList = res ? res : [];
  });
  //车辆轮胎消耗信息
  getApi({ id: id }, `/mosty-jcgl/tireDrain/queryByCarmsgid`).then((res) => {
    formData.value.tbTireDrainList = res ? res : [];
  });
}
const putUnderDeptData = ref([])
const cascaderProps = {
  value: 'id',
  label: 'orgname',
  children: 'children'
}
function getPutUnderDept() {
  getApi({}, '/mosty-base/deptFeign/getPutUnderDept')
    .then(res => {
      putUnderDeptData.value = res
    })
}
const handleSelectStatus = (val) => {
  const selectedId = val[val.length - 1];
  const selectedNode = findNodeById(putUnderDeptData.value, selectedId);
  if (selectedNode) {
    formData.value.managedeptid = selectedNode.id
    formData.value.managedeptname = selectedNode.orgname
  } else {
    formData.value.managedeptid = ''
    formData.value.managedeptname = ''
  }
}
// 递归在树形数据中根据id查找节点
function findNodeById(tree, id) {
  for (let node of tree) {
    if (node.id === id) {
      return node;
    }
    if (node.children && node.children.length > 0) {
      const found = findNodeById(node.children, id);
      if (found) {
        return found;
      }
    }
  }
  return null;
}
function chooseCarDept() {
  // 安全部门
  if (isAqbm.value) {
    isShowCarDept.value = true;
    // 非安全部门 和以前一样
  } else {
    zzlx.value = '02';
    let orgLevel = JSON.parse(window.localStorage.getItem("deptId")).orgLevel.substring(0, 1)
    // 安全部门查全部
    if (orgLevel == "1") {
      orgLevels.value = "11"

    } else if (orgLevel == "2") {
      orgLevels.value = "21"
    } else {
      orgLevels.value = "31,40"
    }
    showDept.value = true;
  }
}
function ChooesDdld(val) {
  zzlx.value = val;
  let orgLevel = JSON.parse(window.localStorage.getItem("deptId")).orgLevel.substring(0, 1)
  // 安全部门查全部
  // if (!formData.value.id) { // 新增和编辑一致
  if (orgLevel == "1") {
    orgLevels.value = "11"

  } else if (orgLevel == "2") {
    orgLevels.value = "21"
  } else {
    orgLevels.value = "31,40"
  }
  // } else {
  //   orgLevels.value = ''
  // }
  showDept.value = true;
}
const getSonValue = (value) => {
  // 01:所属部门
  if (zzlx.value == "01") {
    formData.value.managedeptname = value.orgName;
    formData.value.managedeptid = value.id;
  }
  // 02:车辆-移交单位名称
  if (zzlx.value == "02") {
    deptfrom.value.nameaffiliation = value.orgName;
    deptfrom.value.nameaffiliationid = value.id;
  }
};
/** 车辆移交选择器 */
const getCarSonValue = (value) => {
  deptfrom.value.nameaffiliation = value.orgName;
  deptfrom.value.nameaffiliationid = value.id;
};
//移交车辆
function yjjsyFrom() {
  deptfrom.value.id = formData.value.id;
  showtjjsz.value = true;
}
function savebmyj() {
  if (deptfrom.value && deptfrom.value.nameaffiliation) {
    postApi(deptfrom.value, "/mosty-jcgl/car/ChangeCarOrg").then((res) => {
      showtjjsz.value = false;
      ElMessage.success("移交成功");
    });
  } else {
    ElMessage.warning("请选择移交单位");
  }
}
//关闭弹窗
const closezzjg = (val) => {
  showDept.value = val;
};
function closedio() {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      showtjjsz.value = false;
    })
    .catch(() => {
      // catch error
    })

}
function updateObjects(arr1, arr2) {
  arr1.forEach((obj1) => {
    arr2.forEach((obj2) => {
      //判断是否存在id,有id代表修改,没有id代表新增
      if (obj1.id && obj2.id) {
        if (obj1.id === obj2.id) {
          // 在这里改变有相同idex对象的状态，例如将del属性设置为true
          obj1.del = true;
        }
      } else {
        if (obj1.idex === obj2.idex) {
          // 在这里改变有相同idex对象的状态，例如将del属性设置为true
          obj1.del = true;
        }
      }
    });
  });
}

//第一层弹窗
//车辆维修信息相关
const wbData = ref([]);
const wbindex = ref(); //用于保存维保信息
const showwblist = ref(false); //车辆维修信息
const wbDatabtn = ref(false); //车辆维修列表是否可编辑
const handseewbList = (row) => {
  wbData.value = row.maintenance ? JSON.parse(row.maintenance) : [];
  wbDatabtn.value = false;
  showwblist.value = true;
};
const handwbList = (row, index) => {
  wbindex.value = index;
  wbData.value = row.maintenance ? JSON.parse(row.maintenance) : [];
  wbDatabtn.value = true;
  showwblist.value = true;
};
const savewbdata = () => {
  let arr = [];
  let maintainRmb = 0;
  wbData.value.forEach((e) => {
    let str =
      e.info +
      "(数量：" +
      e.count +
      ",单价：" +
      e.money +
      "元），共计" +
      e.allMoney +
      "元";
    arr.push(str);
    maintainRmb = maintainRmb + e.allMoney;
  });
  formData.value.tbMaintainList[wbindex.value].maintainRmb = maintainRmb;
  formData.value.tbMaintainList[wbindex.value].text = arr;
  formData.value.tbMaintainList[wbindex.value].maintenance = wbData.value
    ? JSON.stringify(wbData.value)
    : "";
  showwblist.value = false;
};
const closewb = () => {
  if (props.wbDatabtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        showwblist.value = false;
      })
      .catch(() => {
        // catch error
      })
  } else {
    showwblist.value = false;
  }

};
//第二层弹窗
const shownewwb = ref(false); //车辆维修信息新增
const wbobjbtn = ref(false); //车辆维修信息是否可编辑
const wbobjtitle = ref(""); //车辆维修内容弹窗标题
const wbobj = ref({});
const addwbList = () => {
  wbobjtitle.value = "车辆维修内容新增";
  wbobj.value = {};
  wbobjbtn.value = true;
  shownewwb.value = true;

};
const seewbData = (row) => {
  wbobjtitle.value = "车辆维修内容查看";
  wbobj.value = row;
  shownewwb.value = true;
  wbobjbtn.value = false;
};
const wbobjindex = ref();
const editwbData = (row, index) => {
  wbobjtitle.value = "车辆维修内容编辑";
  wbobjindex.value = index;
  wbobj.value = row;
  wbobjbtn.value = true;
  shownewwb.value = true;
};
const deletewbData = (index) => {
  wbData.value.splice(index, 1); // 删除
};
const savewbobj = async (FormRef) => {
  if (!FormRef) return;
  await FormRef.validate((valid) => {
    if (valid) {
      loadingshow.value = true
      if (wbobjtitle.value == "车辆维修内容新增") {
        wbData.value.push(wbobj.value);

      }
      if (wbobjtitle.value == "车辆维修内容编辑") {
        wbData.value[wbobjindex.value] = wbobj.value;
      }
      shownewwb.value = false;
      loadingshow.value = false
    }
  })
}

const closeaddwb = () => {
  if (wbobjbtn.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        shownewwb.value = false;
        wbobj.value = {};
      })
      .catch(() => {
        // catch error
      })
  } else {
    shownewwb.value = false;
    wbobj.value = {};
  }

};

const Blur = () => {
  wbobj.value.allMoney = (wbobj.value.count ? wbobj.value.count : 0) * (wbobj.value.money ? wbobj.value.money : 0);
};

//新增车辆保险信息
function addDialog(val) {

  saveBtnShow.value = true;
  addDiaShow.value = true;
  rowxq.value = {};
  if (val == '01') {
    jstitle.value = "车辆保险信息新增";
  }

}
//修改车辆保险信息
function handletbSafeList(row, index) {
  editIndex.value = index;
  saveBtnShow.value = true;
  addDiaShow.value = true;
  rowxq.value = row;
  jstitle.value = "车辆保险信息修改";
}
//查看车辆保险信息
function etbSafeListxq(row, index) {
  saveBtnShow.value = false;
  addDiaShow.value = true;
  rowxq.value = row;
  jstitle.value = "车辆保险信息详情";
}
//获取车辆保险信息新增数据
function changeAddVi(row) {
  getxzData(row, keysid.value, formData.value.tbSafeList);
}

//新增车辆随车物品信息
function addtbGoodsList() {
  editIndex.value = null;
  saveBtnShow.value = true;
  addDiaShow2.value = true;
  rowxq.value = {};
  jstitle.value = "车辆随车物品信息新增";
}
//修改车辆随车物品信息
function scwpedit(row, index) {
  editIndex.value = index;
  saveBtnShow.value = true;
  addDiaShow2.value = true;
  rowxq.value = row;
  jstitle.value = "车辆随车物品信息修改";
}
//查看车辆随车物品信息
function seescwpxq(row, index) {
  editIndex.value = index;
  saveBtnShow.value = false;
  addDiaShow2.value = true;
  rowxq.value = row;
  jstitle.value = "车辆随车物品信息详情";
}
//获取车辆随车物品信息新增数据
function changeAddVi2(row) {
  getxzData(row, keysid.value, formData.value.tbGoodsList);
}
//多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

//新增车辆年审信息
function addtbYearlyList() {
  let tab = { endDate: "", carNumber: formData.value.carnumber, yearlyDate: "", input: true };
  addRow(tab, formData.value.tbYearlyList);
}
function handletbYearlyChange(val) {
  hangdleRow(formData.value.tbYearlyList, val);
}
//新增驾驶员变动信息
function addtbCarChangeList() {
  let tab = {
    changetime: "",
    changetype: "",
    username: "",
    sex: "",
    age: "",
    driveage: "",
    changedesc: "",
    input: true
  };
  addRow(tab, formData.value.tbCarChangeList);
}
function handletbCarChange(val) {
  hangdleRow(formData.value.tbCarChangeList, val);
}
//新增车辆（大件、总成及肇事）维修情况登记表
function addtbMaintainList() {
  let tab = {
    maintainDate: "",
    contractor: "",
    maintenance: "",
    maintainRmb: 0,
    driver: "",
    input: true
  };
  addRow(tab, formData.value.tbMaintainList);
}
function handletbMaintainChange(val) {
  hangdleRow(formData.value.tbMaintainList, val);
}
//新增车辆报废信息
function addtbScrapList() {
  editIndex.value = null;
  saveBtnShow.value = true;
  addDiaShow1.value = true;
  rowxq.value = {};
  jstitle.value = "车辆报废信息新增";
}
//修改车辆报废信息
function handtbScrapList(row, index) {
  editIndex.value = index;
  saveBtnShow.value = true;
  addDiaShow1.value = true;
  rowxq.value = row;
  jstitle.value = "车辆报废信息修改";
}
//查看车辆报废信息
function tbScrapListxq(row, index) {
  editIndex.value = index;
  saveBtnShow.value = false;
  addDiaShow1.value = true;
  rowxq.value = row;
  jstitle.value = "车辆报废信息详情";
}
//获取车辆报废信息新增数据
function changeAddVi1(row) {


  getxzData(row, keysid1.value, formData.value.tbScrapList);
}
//多选
const handleSelectionChange1 = (val) => {
  multipleSelection1.value = val;
};

//新增车辆调动信息
function addtbMoveList() {
  let tab = {
    moveDate: "",
    moveUnit: "",
    importUnit: "",
    moveCause: "",
    input: true
  };
  addRow(tab, formData.value.tbMoveList);
}
function handletbMoveChange(val) {
  hangdleRow(formData.value.tbMoveList, val);
}
function DriverMileEdit(row, idx) {
  rowxq.value = { ...row }
  editIndex.value = idx
  driverMileTitle.value = '车辆行驶里程信息编辑'
  driverMileType.value = 'edit'
  isShowDirverMileDia.value = true
}

function addtbMileage() {
  rowxq.value = {
    carNumber: formData.value.carnumber,
    carmsgId: formData.value.id,
    startDate: '',
    endUnit: '',
    // month: `${new Date().getFullYear()}-${new Date().getMonth() + 1}}`
  }
  editIndex.value = formData.value.tbMileageList?.length || 0
  driverMileTitle.value = '车辆行驶里程信息新增'
  driverMileType.value = 'add'
  isShowDirverMileDia.value = true // 显示
}
function handletbMileageChange(val) {
  hangdleRow(formData.value.tbMileageList, val);
}
/** 按时间正序给[车辆行驶里程信息] mileage 字段排序 */
function sortTbMileageList(arr) {
  arr = Array.isArray(arr) ? [...arr] : []
  arr.sort((a, b) => {
    return new Date(a.endUnit) - new Date(b.endUnit);
  });
  return arr
}
//车辆保险信息新增/编辑数据
function driverMileOk(row) {
  const length = formData.value.tbMileageList?.length || 0
  const idex = driverMileType.value === 'add' ? length : editIndex.value
  if (driverMileType.value === 'add') {
    formData.value.tbMileageList.push({ ...row, idex: idex })
  } else {
    getxzData({ ...row, idex: idex }, length, formData.value.tbMileageList);
  }
  // 排序
  formData.value.tbMileageList = sortTbMileageList(formData.value.tbMileageList);
}
//新增车辆燃料消耗信息
function addtbFuelDrain() {
  let tab = { startDate: '', endDate: '', mileage: '', consume: '', quota: '', savings: '', loss: '', driver: '', input: true }
  addRow(tab, formData.value.tbFuelDrainList)
}
function handletbFuelDrainChange(val) {
  hangdleRow(formData.value.tbFuelDrainList, val);
}
//新增车辆轮胎消耗信息
function addtbTireDrain() {
  let tab = {
    driver: "",
    tireDate: "",
    // ruleCount: "",
    renewCount: "",
    economy: "0",
    input: true
  };
  addRow(tab, formData.value.tbTireDrainList);
}
function handletbTireDrainChange(val) {
  hangdleRow(formData.value.tbTireDrainList, val);
}

// 保存
const submit = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (formData.value) {
        formData.value.picture = formData.value.picture
          ? formData.value.picture.toString()
          : null;
        formData.value.signfile = formData.value.signfile
          ? formData.value.signfile.toString()
          : null;
        formData.value.operatefile = formData.value.operatefile
          ? formData.value.operatefile.toString()
          : null;
        formData.value.photocopyId = formData.value.photocopyId
          ? formData.value.photocopyId.toString()
          : null;
        formData.value.photocopy2Id = formData.value.photocopy2Id
          ? formData.value.photocopy2Id.toString()
          : null;
        // formData.value.auto = formData.value.auto
        //   ? formData.value.auto.toString() : null;

        if (formData.value.tbGoodsList) {
          formData.value.tbGoodsList.forEach(item => {
            item.truckgoods = item.truckgoods.toString()
          })
        }
        const params = {
          ...formData.value,
          auto: formData.value.auto ? formData.value.auto.toString() : null
        };
        if (pageTitle.value == "车辆信息新增") {
          postApi(params, "/mosty-jcgl/car/addCarMsgOne").then(
            (res) => {
              ElMessage.success("新增成功");
              emit("changePage", "Main");
            }
          );
        } else {
          //
          postApi(params, "/mosty-jcgl/car/updateCarMsgOne").then(
            (res) => {
              ElMessage.success("修改成功");
              emit("changePage", "Main");
            }
          );
        }
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};

const black = () => {
  if (!ruleFormRef.value) return;
  if (saveBtn.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("changePage", "Main");
  }

};
//点击下载文件
function onloadflie(val) {
  createAndClickLink(val.url, val.name)
}
//封装选中当前行
function hangdleRow(arr, val) {
  currentRow.value = val;
  if (saveBtn.value) {
    arr.forEach((el) => {
      if (el == val) {
        el.input = true;
      } else {
        el.input = false;
      }
    });
  }

}


//删除当前行
function delRow(arr, row) {
  arr.forEach((item, index) => {
    if (row == item) {
      arr.splice(index, 1);
      ElMessage.success("删除成功");
    }
  });

}
//保存当前行
function saveRow(arr) {
  arr.forEach((el) => {
    el.input = false;
  });
}
// if (value.trim() == null || value == null || value == '') { alert('输入的值为空'); return; }
//判断对象是否存在空字符串(传入一个对象，如果对象中存在空字符串，函数会返回 true，否则返回 false)
function hasString(obj) {
  for (const key in obj) {
    if (typeof obj[key] == "string" && obj[key].trim() == "") {
      ElMessage.warning("请将内容填完整！！！");
      return true;
    }
  }
  return false;
}
//新增行
function addRow(tab, arr) {
  if (arr.length) {
    let legths = arr.length - 1;
    let data = arr[legths];
    if (hasString(data) == false) {
      arr.push(tab);
    }
  } else {
    arr.push(tab);
  }
}
//获取新增数据
function getxzData(row, key, arr) {
  row.del = false;
  if (!row.idex) {
    key++;
    row.idex = key;
  }
  if (editIndex.value != null) {
    for (let i = 0; i < arr.length; i++) {
      if (editIndex.value == i) {
        arr[i] = row
      }
    }

  } else {
    arr.push(row);
  }
}
/**车辆维修 导出 */
const exportExcelCarFixTable = () => {
  let title = {
    maintainDate: "维修日期", //
    contractor: "承修单位",
    maintenanceTxt: "维修内容",

    maintainRmb: "维修金额",
    driver: "驾驶员",// pitfallType

  }
  const [start, end] = carFixTime.value ? carFixTime.value : [];
  /** 根据时间获取 需要的数组 */
  const getNeedDateData = (data) => {
    let [start, end] = carFixTime.value ? carFixTime.value : [];
    start = start ? new Date(start).getTime() : null;
    end = end ? new Date(end).getTime() : null;
    return carFixTableData.value.filter(item => {
      const maintainDateTime = new Date(item.maintainDate).getTime()
      if (start && end) {
        return maintainDateTime >= start && maintainDateTime <= end
      } else if (start && !end) {
        return maintainDateTime >= start
      } else if (!start && end) {
        return maintainDateTime <= end
      } else {
        return true
      }
    })
  }
  const titleWidth = {
    maintenanceTxt: 200,
  }
  const data = getNeedDateData()
  const tablename = `${start || ''} - ${end || ''} 车辆维修信息表`
  ExpXlsx(title, data, tablename, { titleWidth })
}

</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

.el-form--inline .el-form-item {
  width: 416px;
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0px !important;
}

.iconfont {
  font-size: 26px;
  color: var(--el-color-primary)
}

.bqfont {
  color: var(--el-color-primary)
}

.zkbox {
  display: flex;
  align-items: center;
  margin-left: 10px;
}



.scol {
  display: flex;
  justify-content: center;
  width: 1254px;
  margin: 20px auto;
}

.Box {
  border: 1px solid var(--el-color-primary);
  margin: 20px auto;
  width: 1301px;
  color: black;
  font-size: 20px;
  height: 75vh;
  overflow-y: auto;
}

::v-deep .el-form-item--default .el-form-item__content {
  color: #000 !important;
}

.addbtn {
  margin: 10px;
}

.tabbox {
  padding-top: 7px;
}

.el-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

::v-deep .el-input-number__decrease {
  display: none !important;
}

::v-deep .el-input-number__increase {
  display: none !important;
}

// .iconimg{
//   background:var(--el-color-primary);
//       width: 17px;
//     margin-top: 8px;
//     height: 17px;
// }
::v-deep .edit-btn {
  color: #dc9507;
}

::v-deep .del-btn {
  color: #e71111;
}

::v-deep .see-btn {
  color: #0b6c51;
}

.car-fix-add-save {
  display: inline-block;
}

.car-fix-time {
  display: inline-block;
  margin-top: 10px;
}
</style>
