tenant-Platform/src/views/finance/modules/auditDetail.vue

<template>
  <div class="auditDetail">
    <div class="header">
      <el-row class="flex">
        <el-col :span="12" class="orderName">
          <img src="@/assets/images/insurancePolicy/order.png">
          <span>{{ detailData?.ordersNo }}</span>
          <span class="state">{{ detailData?.order?.orderStatus === '0' ? '订单报价中' : detailData?.order?.orderStatus ===
            '1' ? '待核保' : detailData?.order?.orderStatus === '2' ? '核保中' : detailData?.order?.orderStatus ===
              '3' ? '人工处理' : detailData?.order?.orderStatus === '4' ? '待缴费' : detailData?.order?.orderStatus ===
                '5' ? '已承保' : detailData?.order?.orderStatus === '6' ? '报价失败' : detailData?.order?.orderStatus ===
                  '7' ? '核保失败' : detailData?.order?.orderStatus === '8' ? '订单关闭' : '--' }}</span>
        </el-col>
        <el-col :span="12" class="orderTips">
          <span class="tips">{{ detailData?.order?.orderStatus === '0' ? '订单报价中，请耐心等待' : detailData?.order?.orderStatus
            ===
            '1' ? '订单已完成报价，请立即核保！' : detailData?.order?.orderStatus === '2' ? '订单核保中，请耐心等待' :
            detailData?.order?.orderStatus ===
              '3' ? '订单人工处理中，请耐心等待' : detailData?.order?.orderStatus === '4' ? '订单核保已通过，请尽快支付！' :
              detailData?.order?.orderStatus
                === '5' ? '已承保' : detailData?.order?.orderStatus === '6' ? '计算保费失败，请按要求修改订单' :
                detailData?.order?.orderStatus ===
                  '7' ? '核保不通过，请按意见修改订单' : detailData?.order?.orderStatus === '8' ? '订单已关闭，有投保需求请重新报价' : '--' }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <span class="label">业务员</span>
          <span class="words">{{ detailData?.salesmanInfo?.name || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">所属机构</span>
          <span class="words">{{ detailData?.salesmanInfo?.deptName || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">业务员类型</span>
          <span class="words">{{ detailData?.salesmanInfo?.typeAttr == '5' ? '团队' : detailData?.salesmanInfo?.typeAttr
            ==
            '6' ? '个代' : detailData?.salesmanInfo?.typeAttr == '7' ? '渠道' : detailData?.salesmanInfo?.typeAttr == '8'
              ? '电销组' : '--'
          }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">归属</span>
          <span class="words">{{ detailData?.salesmanInfo?.organizationName || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">险种</span>
          <span class="words">{{ detailData?.order?.productsName || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">订单类型</span>
          <span class="words">{{ detailData?.order?.orderType || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">管理员</span>
          <span class="words">{{ detailData?.salesmanInfo?.realQuoteUserManagerUseName || '--' }}</span>
        </el-col>
        <!--                <el-col :span="6">
                    <span class="label">出单协议</span>
                    <span class="words" style="color: #00a0f4" @click="toAgreementDetail">{{ detailData?.order?.agreementName || '&#45;&#45;' }}</span>
                </el-col>
                <el-col :span="6">
                    <span class="label">协议类型</span>
                    <span class="words">{{ detailData?.order?.agreementType === '1'?'平台协议-平台结算':detailData?.order?.agreementType === '2'?'私有协议-自行结算':detailData?.order?.agreementType === '3'?'网销协议-自行结算':'&#45;&#45;' }}</span>
                </el-col>-->
        <el-col :span="6">
          <span class="label">录单人</span>
          <span class="words">{{ detailData?.order?.createBy || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">录单时间</span>
          <span class="words">{{ detailData?.order?.createTime || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">报价时间</span>
          <span class="words">{{ detailData?.order?.quoteTime || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">签单时间</span>
          <span class="words">{{ detailData?.order?.signingTime || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">支付时间</span>
          <span class="words">{{ detailData?.order?.payTime || '--' }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">保险公司</span>
          <span class="words">{{ detailData?.insCompanyVo[0]?.name || '--' }}</span>
        </el-col>
      </el-row>
      <div class="tipsList">
        <div class="tipsItem" :class="{ 'active': tipsIndex === index }" v-for="(item, index) in tipsList" :key="index"
          @click="handleTipsIndexChange(item, index)">
          <img :src="item.url" />
          <span class="tipsName">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div id="TBMsg" class="TBMsg">
        <div class="title">投保信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="TBMsgItem">
            <span class="label">保险公司</span>
            <span class="value">
              <img src="@/assets/images/insurancePolicy/company.png">
              <span>{{ detailData?.order?.companyName || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">签单日期</span>
            <span class="value">
              <span>{{ detailData?.order?.signingTime || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">评分</span>
            <span class="value">
              <span>{{ detailData?.scoreVo?.score || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">车船税</span>
            <span class="value">
              <span>{{ detailData?.costs?.vvTax || '--' }}</span>
            </span>
          </el-col>

          <el-col :span="6" class="TBMsgItem">
            <span class="label">交强险保单号</span>
            <span class="value">
              <span>{{ detailData?.order?.ciPolicyNumber || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">交强险续保</span>
            <span class="value">
              <span>{{ detailData?.order?.biApplyNumber || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">交强险保费</span>
            <span class="value">
              <span>{{ detailData?.costs?.ciPremium || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">驾意险保单号</span>
            <span class="value">
              <span>{{ detailData?.policy?.niPolicyNumber || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">驾意险保费</span>
            <span class="value">
              <span>{{ detailData?.costs?.niPremium || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">商业险保单号</span>
            <span class="value">
              <span>{{ detailData?.order?.biApplyNumber || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">商业险续保</span>
            <span class="value">
              <span>{{ detailData?.order?.biApplyNumber || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">商业险保费</span>
            <span class="value">
              <span>{{ detailData?.costs?.biPremium || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">保费总额</span>
            <span class="value">
              <span>{{ detailData?.costs?.sumPremium || '--' }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">是否过户车</span>
            <span class="value">
              <span>--</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">商业险是否过户</span>
            <span class="value">
              <span>--</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">是否脱保</span>
            <span class="value">
              <span>--</span>
            </span>
          </el-col>
          <el-col :span="6" class="TBMsgItem">
            <span class="label">是否二手车</span>
            <span class="value">
              <span>--</span>
            </span>
          </el-col>
        </el-row>
      </div>
      <div id="carMsg" class="carMsg">
        <div class="title">车辆信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="carMsgItem">
            <span class="label">类型</span>
            <span class="value">{{ detailData?.carInfoVo?.isRegistered === '1' ? '已上牌' :
              detailData?.carInfoVo?.isRegistered
                === '2' ? '未上牌' : '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">车牌</span>
            <span class="value">{{ detailData?.carInfoVo?.licenseNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">车牌识别代码</span>
            <span class="value">{{ detailData?.carInfoVo?.vinNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">品牌型号</span>
            <span class="value">{{ detailData?.carInfoVo?.brandName || '--' }}</span>
          </el-col>

          <el-col :span="6" class="carMsgItem">
            <span class="label">发动机号</span>
            <span class="value">{{ detailData?.carInfoVo?.engineNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">使用性质</span>
            <span class="value">{{ dictChange(optionObj['car_nature_code'], detailData?.carInfoVo?.carNatureCode)
              }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">车辆用途</span>
            <span class="value">{{ dictChange(optionObj['vehicle_use_code'], detailData?.carInfoVo?.vehicleUseCode)
              }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">车辆种类</span>
            <span class="value">{{ dictChange(optionObj['car_kind_code'], detailData?.carInfoVo?.carKindCode) }}</span>
          </el-col>

          <el-col :span="6" class="carMsgItem">
            <span class="label">车辆类型</span>
            <span class="value">{{ dictChange(optionObj['car_type_code'], detailData?.carInfoVo?.carTypeCode)
              }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">能源种类</span>
            <span class="value">{{ dictChange(optionObj['energy_type_code'], detailData?.carInfoVo?.energyTypeCode)
              }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">注册日期</span>
            <span class="value">{{ detailData?.carInfoVo?.registerDate || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">发证日期</span>
            <span class="value">{{ detailData?.carInfoVo?.issueDate || '--' }}</span>
          </el-col>

          <el-col :span="6" class="carMsgItem">
            <span class="label">整备质量</span>
            <span class="value">{{ detailData?.carInfoVo?.completeKerbMass || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">核定载质量</span>
            <span class="value">{{ detailData?.carInfoVo?.limitLoad || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">座位数</span>
            <span class="value">{{ detailData?.carInfoVo?.seatCount || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">年款</span>
            <span class="value">{{ detailData?.carInfoVo?.carYear || '--' }}</span>
          </el-col>

          <el-col :span="6" class="carMsgItem">
            <span class="label">新车购置价</span>
            <span class="value">{{ detailData?.carInfoVo?.purchasePrice || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">排量</span>
            <span class="value">{{ detailData?.carInfoVo?.displacement || '--' }}</span>
          </el-col>
          <el-col :span="6" class="carMsgItem">
            <span class="label">功率</span>
            <span class="value">{{ detailData?.carInfoVo?.powerScale || '--' }}</span>
          </el-col>
        </el-row>
      </div>
      <div id="insuranceMsg" class="insuranceMsg">
        <div class="title">险种信息</div>
        <el-row :gutter="20" style="margin-bottom: 16px">
          <el-col :span="14">
            <el-table :data="detailData?.kindInfoVo" border>
              <el-table-column label="名称" prop="kindName" width="100">
                <template #default="scope">
                  <span v-if="scope.row.kindCode === 'J1'">交强险</span>
                  <span v-else>商业险</span>
                </template>
              </el-table-column>
              <el-table-column label="时间">
                <template #default="scope">
                  <span v-if="scope.row.kindCode === 'J1'">
                    {{ detailData?.ciRiskInfoVo?.startDate || '--' }}至{{ detailData?.ciRiskInfoVo?.endDate || '--' }}
                  </span>
                  <span v-else>
                    {{ detailData?.biRiskInfoVo?.startDate || '--' }}至{{ detailData?.biRiskInfoVo?.endDate || '--' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="险种" prop="kindName"></el-table-column>
              <el-table-column label="保额" prop="amount" width="100">
                <template #default="scope">
                  <span v-if="['A'].includes(scope.row.kindCode)" class="td">投保</span>
                  <span v-else-if="['SY_FJ_YBW2'].includes(scope.row.kindCode)" class="td">{{
                    convertedValue(scope.row.unitAmount) }}</span>
                  <span v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(scope.row.kindCode)" class="td">{{
                    scope.row.amount }}%</span>
                  <span v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(scope.row.kindCode)" class="td">{{
                    scope.row.serviceTimes }}次</span>
                  <span v-else class="td">{{ convertedValue(scope.row.amount) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="10">
            <el-descriptions border :column="1" title="车船税" v-if="vehicleAndVesselTaxVo">
              <el-descriptions-item
                v-if="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3" label="减免税凭证号"
                label-class-name="my-content">{{ vehicleAndVesselTaxVo.extendChar2 || '--'
                }}</el-descriptions-item>
              <el-descriptions-item v-if="vehicleAndVesselTaxVo.taxRelifFlag == 4" label="完税凭证号"
                label-class-name="my-content">{{
                  vehicleAndVesselTaxVo.paidFreeCertificate || '--' }}</el-descriptions-item>
              <el-descriptions-item
                v-if="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3" label="减免税原因"
                label-class-name="my-content">{{ vehicleAndVesselTaxVo.relifReason || '--' }}</el-descriptions-item>
              <el-descriptions-item v-if="vehicleAndVesselTaxVo.taxRelifFlag == 3" label="减税比例"
                label-class-name="my-content">{{
                  vehicleAndVesselTaxVo.taxRelief || '--' }}%</el-descriptions-item>
              <el-descriptions-item v-if="vehicleAndVesselTaxVo.taxRelifFlag != 1" label="税务机关代码"
                label-class-name="my-content">{{
                  vehicleAndVesselTaxVo.taxComCode || '--' }}</el-descriptions-item>
              <el-descriptions-item v-if="vehicleAndVesselTaxVo.taxRelifFlag != 1" label="税务机关名称"
                label-class-name="my-content">{{
                  vehicleAndVesselTaxVo.taxComName || '--' }}</el-descriptions-item>
              <el-descriptions-item v-if="vehicleAndVesselTaxVo.taxRelifFlag == 4" label="完税凭证填发日期"
                label-class-name="my-content">{{ vehicleAndVesselTaxVo.taxDocumentDate || '--' }}</el-descriptions-item>
              <el-descriptions-item v-if="vehicleAndVesselTaxVo.taxRelifFlag == 4" label="完税凭证地区"
                label-class-name="my-content">{{
                  vehicleAndVesselTaxVo.taxPaidAreaCode || '--' }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <div id="personMsg" class="personMsg">
        <div class="title">车主信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="personMsgItem">
            <span class="label">车主姓名</span>
            <span class="value">{{ detailData?.ownersInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">车主手机号</span>
            <span class="value">{{ detailData?.ownersInfo?.mobile }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">证件类型</span>
            <span class="value">{{ detailData?.ownersInfo?.identifyType ===
              '1' ? '身份证' : detailData?.ownersInfo?.identifyType ===
                '2' ? '营业执照' : '--' }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.ownersInfo?.identifyType === '1'">
            <span class="label">证件号码</span>
            <span class="value">{{ detailData?.ownersInfo?.identifyNumber }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.ownersInfo?.identifyType === '2'">
            <span class="label">统一社会信用代码</span>
            <span class="value">{{ detailData?.ownersInfo?.identifyNumber }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">有效期起期</span>
            <span class="value">{{ detailData?.ownersInfo?.identifyValidDate }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">有效期止期</span>
            <span class="value">{{ detailData?.ownersInfo?.identifyValidEndDate }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">地址</span>
            <span class="value">{{ detailData?.ownersInfo?.addr }}</span>
          </el-col>

          <el-col :span="6" class="personMsgItem" v-if="detailData?.ownersInfo?.identifyType === '2'">
            <span class="label">投保人座机</span>
            <span class="value">{{ detailData?.ownersInfo?.telephone || '--' }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.ownersInfo?.identifyType === '2'">
            <span class="label">投保人联系人</span>
            <span class="value">{{ detailData?.ownersInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.ownersInfo?.identifyType === '2'">
            <span class="label">联系人证件号码</span>
            <span class="value">{{ detailData?.ownersInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.ownersInfo?.identifyType === '2'">
            <span class="label">注册资金</span>
            <span class="value">{{ detailData?.ownersInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.ownersInfo?.identifyType === '2'">
            <span class="label">电子邮箱</span>
            <span class="value">{{ detailData?.ownersInfo?.email || '--' }}</span>
          </el-col>
        </el-row>
        <div class="title">
          <div>投保人信息</div>
          <div class="taxList">
            <span class="taxItem" :class="{ 'active': item.bool }" v-for="(item, index) in tbList" :key="index">{{
              item.name
              }}</span>
          </div>
        </div>
        <el-row :gutter="20" v-if="!tbList[0].bool">
          <el-col :span="6" class="personMsgItem">
            <span class="label">投保人姓名</span>
            <span class="value">{{ detailData?.policyHolderInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">车主手机号</span>
            <span class="value">{{ detailData?.policyHolderInfo?.mobile }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">证件类型</span>
            <span class="value">{{ detailData?.policyHolderInfo?.identifyType ===
              '1' ? '身份证' : detailData?.policyHolderInfo?.identifyType === '2' ? '营业执照' : '--' }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.policyHolderInfo?.identifyType === '1'">
            <span class="label">证件号码</span>
            <span class="value">{{ detailData?.policyHolderInfo?.identifyNumber }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.policyHolderInfo?.identifyType === '2'">
            <span class="label">统一社会信用代码</span>
            <span class="value">{{ detailData?.policyHolderInfo?.identifyNumber }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">有效期起期</span>
            <span class="value">{{ detailData?.policyHolderInfo?.identifyValidDate }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">有效期止期</span>
            <span class="value">{{ detailData?.policyHolderInfo?.identifyValidEndDate }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">地址</span>
            <span class="value">{{ detailData?.policyHolderInfo?.addr }}</span>
          </el-col>

          <el-col :span="6" class="personMsgItem" v-if="detailData?.policyHolderInfo?.identifyType === '2'">
            <span class="label">投保人座机</span>
            <span class="value">{{ detailData?.policyHolderInfo?.telephone || '--' }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.policyHolderInfo?.identifyType === '2'">
            <span class="label">投保人联系人</span>
            <span class="value">{{ detailData?.policyHolderInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.policyHolderInfo?.identifyType === '2'">
            <span class="label">联系人证件号码</span>
            <span class="value">{{ detailData?.policyHolderInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.policyHolderInfo?.identifyType === '2'">
            <span class="label">注册资金</span>
            <span class="value">{{ detailData?.policyHolderInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.policyHolderInfo?.identifyType === '2'">
            <span class="label">电子邮箱</span>
            <span class="value">{{ detailData?.policyHolderInfo?.email || '--' }}</span>
          </el-col>
        </el-row>
        <div class="title">
          <div>被保人信息</div>
          <div class="taxList">
            <span class="taxItem" :class="{ 'active': item.bool }" v-for="(item, index) in bbList" :key="index">{{
              item.name
              }}</span>
          </div>
        </div>
        <el-row :gutter="20" v-if="!bbList[0].bool && !bbList[1].bool">
          <el-col :span="6" class="personMsgItem">
            <span class="label">被保人姓名</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">车主手机号</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.mobile }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">证件类型</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.identifyType ===
              '1' ? '身份证' : detailData?.insuredPersonInfo?.identifyType === '2' ? '营业执照' : '--' }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.insuredPersonInfo?.identifyType === '1'">
            <span class="label">证件号码</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.identifyNumber }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.insuredPersonInfo?.identifyType === '2'">
            <span class="label">统一社会信用代码</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.identifyNumber }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">有效期起期</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.identifyValidDate }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">有效期止期</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.identifyValidEndDate }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem">
            <span class="label">地址</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.addr }}</span>
          </el-col>

          <el-col :span="6" class="personMsgItem" v-if="detailData?.insuredPersonInfo?.identifyType === '2'">
            <span class="label">投保人座机</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.telephone || '--' }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.insuredPersonInfo?.identifyType === '2'">
            <span class="label">投保人联系人</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.insuredPersonInfo?.identifyType === '2'">
            <span class="label">联系人证件号码</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.insuredPersonInfo?.identifyType === '2'">
            <span class="label">注册资金</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.name }}</span>
          </el-col>
          <el-col :span="6" class="personMsgItem" v-if="detailData?.insuredPersonInfo?.identifyType === '2'">
            <span class="label">电子邮箱</span>
            <span class="value">{{ detailData?.insuredPersonInfo?.email || '--' }}</span>
          </el-col>
        </el-row>
      </div>
      <div id="costMsg" class="costMsg">
        <div class="title special">
          <div>费用信息</div>
          <div class="btns">
            <el-button size="small" v-if="!costShow" type="primary" plain @click="handleCostChange">调整费用</el-button>
            <div v-else style="display: flex; align-items: center; justify-content: flex-end">
              <el-button size="small" type="primary" plain @click="costShow = false">取消调整</el-button>
              <el-button size="small" type="primary" plain @click="handleComputedCostInfo">留点计算</el-button>
              <el-button size="small" type="primary" plain @click="handleSaveCostChange">保存</el-button>
            </div>
          </div>
        </div>
        <table class="costTable" 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>
              <th colspan="2">
                <div>留点比例</div>
              </th>
              <th colspan="2">
                <div>出口留点比例</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>
                <div>交强险</div>
              </th>

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

              <th>
                <el-input-number v-model="detailData.costRatio.jqInletRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jqInletRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jqReceivablePremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jqCommissionRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jqCommissionRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jqCommissionPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jqFollowRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jqFollowRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jqFollowPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jqAdditionalRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jqAdditionalRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jqAdditionalPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jqExportRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jqExportRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jqExportPremium }}</div>
              </th>

              <th>
                <!-- <el-input-number v-model="detailData.costRatio.jqKeepPointRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" /> -->
                <div >{{ detailData?.costRatio?.jqKeepPointRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jqKeepPointPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jqExportKeepPointRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jqExportKeepPointRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jqExportKeepPointPremium }}</div>
              </th>
            </tr>
            <tr>
              <th>
                <div>商业险</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.syInletRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.syInletRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syReceivablePremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.syCommissionRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.syCommissionRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syPayablePremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.syFollowRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.syFollowRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syFollowPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.syAdditionalRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.syAdditionalRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syAdditionalPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.syExportRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.syExportRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syExportPremium }}</div>
              </th>

              <th>
                <!-- <el-input-number v-model="detailData.costRatio.syKeepPointRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" /> -->
                <div >{{ detailData?.costRatio?.syKeepPointRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syKeepPointPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.syExportKeepPointRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.syExportKeepPointRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.syExportKeepPointPremium }}</div>
              </th>
            </tr>
            <tr>
              <th>
                <div>驾意险</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jyInletRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jyInletRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyReceivablePremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jyCommissionRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jyCommissionRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyPayablePremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jyFollowRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jyFollowRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyFollowPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jyAdditionalRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jyAdditionalRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyAdditionalPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jyExportRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jyExportRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyExportPremium }}</div>
              </th>

              <th>
                <!-- <el-input-number v-model="detailData.costRatio.jyKeepPointRatio" controls-position="right" v-if="costShow"
                  style="width: 80px" :min="0" :max="100" /> -->
                <div >{{ detailData?.costRatio?.jyKeepPointRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyKeepPointPremium }}</div>
              </th>

              <th>
                <el-input-number v-model="detailData.costRatio.jyExportKeepPointRatio" controls-position="right"
                  v-if="costShow" style="width: 80px" :min="0" :max="100" />
                <div v-else>{{ detailData?.costRatio?.jyExportKeepPointRatio }}%</div>
              </th>
              <th>
                <div>￥{{ detailData?.insFeeOrders?.jyExportKeepPointPremium }}</div>
              </th>
            </tr>
            <tr>
              <th colspan="2">
                <div>合计：￥{{ (Number(detailData?.insFeeOrders?.jqPremium) + Number(detailData?.insFeeOrders?.syPremium) +
                  Number(detailData?.insFeeOrders?.jyPremium)).toFixed(2) }}</div>
              </th>
              <th colspan="2">
                <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqReceivablePremium) +
                  Number(detailData?.insFeeOrders?.syReceivablePremium) +
                  Number(detailData?.insFeeOrders?.jyReceivablePremium)).toFixed(5) }}</div>
              </th>
              <th colspan="2">
                <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqPayablePremium) +
                  Number(detailData?.insFeeOrders?.syPayablePremium) +
                  Number(detailData?.insFeeOrders?.jyPayablePremium)).toFixed(5) }}</div>
              </th>
              <th colspan="2">
                <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqFollowPremium) +
                  Number(detailData?.insFeeOrders?.syFollowPremium) +
                  Number(detailData?.insFeeOrders?.jyFollowPremium)).toFixed(5) }}</div>
              </th>
              <th colspan="2">
                <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqAdditionalPremium) +
                  Number(detailData?.insFeeOrders?.syAdditionalPremium) +
                  Number(detailData?.insFeeOrders?.jyAdditionalPremium)).toFixed(5) }}</div>
              </th>
              <th colspan="2">
                <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqExportPremium) +
                  Number(detailData?.insFeeOrders?.syExportPremium) +
                  Number(detailData?.insFeeOrders?.jyExportPremium)).toFixed(5) }}</div>
              </th>
              <th colspan="2">
                <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqKeepPointPremium) +
                  Number(detailData?.insFeeOrders?.syKeepPointPremium) +
                  Number(detailData?.insFeeOrders?.jyKeepPointPremium)).toFixed(5) }}</div>
              </th>
              <th colspan="2">
                <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqExportKeepPointPremium) +
                  Number(detailData?.insFeeOrders?.syExportKeepPointPremium) +
                  Number(detailData?.insFeeOrders?.jyExportKeepPointPremium)).toFixed(5) }}</div>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="fileMsg" class="fileMsg">
        <div class="title">影像资料</div>
        <div class="information">
          <el-tabs v-model="activeName" tab-position="left" class="demo-tabs">
            <el-tab-pane v-for="(item, index) in infoList" :label="item.label" :name="item.name">
              <el-row :gutter="10" class="list">
                <el-col :span="4" class="list-item" v-for="sub in item.list">
                  <img :src="sub.previewUrl" />
                  <div class="tips">{{ sub.imageType === 'C01' ? '行驶证主页' : sub.imageType === 'D01' ? '行驶证副页' :
                    sub.imageType
                      ===
                      'TAR05' ? '机动车辆登记证书' : sub.imageType === 'XC00' ? '新车合格证' : sub.imageType === 'GC00' ? '购车发票' :
                        sub.imageType
                          ===
                          'C02' ? '车主身份证（正面）' : sub.imageType === 'D02' ? '车主身份证（反面）' : sub.imageType === 'Y02' ? '车主营业执照' :
                            sub.imageType
                              ===
                              'C03' ? '投保人身份证（正面）' : sub.imageType === 'D03' ? '投保人身份证（反面） ' : sub.imageType ===
                                'Y03' ? '投保人营业执照' : sub.imageType
                                  === 'C04' ? '被保人身份证（正面）' : sub.imageType === 'D04' ? '被保人身份证（反面）' : sub.imageType ===
                                    'Y04' ? '被保人营业执照' : sub.imageType === 'GX00' ? '关系证明' : sub.imageType === 'C0500' ? '验车照（车架）' :
                                      sub.imageType
                                        ===
                                        'C0501' ? '验车照（后左）' : sub.imageType === 'C0502' ? '验车照（后右）' : sub.imageType ===
                                          'C0503' ? '验车照（前右）' : sub.imageType
                                            === 'C0504' ? '验车照（前左）' : sub.imageType === 'C0506' ? '验车照（正前）' : sub.imageType ===
                                              'C0507' ? '验车照（正后）' : sub.imageType === 'C0505' ? '验车照（人车合影）' : sub.imageType ===
                                                'C0508' ? '验车照（地标合影）' : sub.imageType === 'C0509' ? '验车照（工作台）' : sub.imageType ===
                                                  'C0510' ? '验车照（天窗）' : sub.imageType
                                                    === 'LAST_INSURANCE_POLICY' ? '上年商业险保单' : '--' }}</div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="title">电子保单</div>
        <div class="fileList">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in fileList" :key="index">
              <p>{{ item.name }}</p>
              <div class="fileInfo">
                <img style="width: 40px; height: 40px"
                  :src="item.fileName.includes('.png') || item.fileName.includes('.jpg') || item.fileName.includes('.jpeg') ? image : item.fileName.includes('.pdf') ? pdf : item.fileName.includes('.doc') || item.fileName.includes('.docx') ? word : ''" />
                <div class="fileName">{{ item.fileName }}</div>
                <div class="fileBtn">
                  <el-icon class="btn-icon" @click="imageView(item)">
                    <View />
                  </el-icon>
                  <el-icon class="btn-icon" @click="download(item)">
                    <Download />
                  </el-icon>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="buttonList">
      <el-button v-if="isShow === '1'" type="primary" @click="handleAuditCancel">放弃审核</el-button>
      <el-button v-if="isShow === '1'" type="primary" @click="openQuestionOrderDialog()">设为疑问订单</el-button>
      <el-button v-if="isShow === '1'" type="primary" @click="handleAudit(1)">审核通过</el-button>
      <el-popconfirm width="300" title="审核不通过">
        <template #reference>
          <el-button v-if="isShow === '1'" type="primary">审核驳回</el-button>
        </template>
        <template #actions="{ confirm, cancel }">
          <el-input placeholder="请填写" v-model="refuse" style="margin-bottom: 20px"></el-input>
          <el-button @click="cancel">取消</el-button>
          <el-button @click="handleAudit(2)">确定</el-button>
        </template>
      </el-popconfirm>
      <el-button plain @click="myRouter.push({
        path: '/finance/audit',
        query: {
          activeindex: activeindex
        }
      })">关闭</el-button>
    </div>
    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
    <el-dialog title="文件预览" v-model="fileShow">
      <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
    </el-dialog>
  </div>
  <el-dialog v-model="questionOrderDialog" title="设为疑问订单" width="600">
    <el-form>
      <el-form-item label="疑问原因">
        <el-input type="textarea" v-model="questionOrderValue" placeholder="输入疑问原因"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="small" type="primary" @click="handleUpdateToQuestionOrder">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import toubao from '@/assets/images/additional/quote1.png'
import cheliang from '@/assets/images/insurancePolicy/cheliang.png'
import guanxi from '@/assets/images/insurancePolicy/guanxi.png'
import feiyong from '@/assets/images/insurancePolicy/feiyong.png'
import insurance1 from "@/assets/images/additional/insurance1.png";
import file1 from '@/assets/images/additional/file1.png'

import api from '@/api'
import { useRoute, useRouter } from 'vue-router'

import image from "@/assets/images/image.png";
import pdf from "@/assets/images/pdf.png";
import word from "@/assets/images/word.png";
import VueOfficeDocx from "@vue-office/docx";
import { ElMessage, ElLoading } from "element-plus";
const myRoute = useRoute()
const myRouter = useRouter()
const activeindex = ref(myRoute.query.activeindex)

// 页签
let tipsIndex = ref(0)
let tipsList = ref([
  {
    name: '投保信息',
    id: 'TBMsg',
    url: toubao
  }, {
    name: '车辆信息',
    id: 'carMsg',
    url: cheliang
  }, {
    name: '险种信息',
    id: 'insuranceMsg',
    url: insurance1
  }, {
    name: '关系人信息',
    id: 'personMsg',
    url: guanxi
  }, {
    name: '费用信息',
    id: 'costMsg',
    url: feiyong
  }, {
    name: '附件信息',
    id: 'fileMsg',
    url: file1
  }
])
const handleTipsIndexChange = (item, index) => {
  tipsIndex.value = index
  const element = document.getElementById(`${item.id}`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// 获取详情
let detailData = ref(null)

// 字典
let optionObj = ref({
  vehicle_use_code: [], // 车辆用途
  car_nature_code: [], // 使用性质
  energy_type_code: [], // 能源种类
  car_kind_code: [], // 车辆种类
  vehicleType: [],
  taxpayerIdentifier: [], // 证件类型
  insuranceType: [], // 险种类型
  car_type_code: [], // 车辆类型
})
const initOption = () => {
  let list = ['vehicle_use_code', 'car_nature_code', 'energy_type_code', 'car_kind_code', 'car_type_code']
  list.forEach(item => {
    api.additionalApi.dictDetails(item).then((res: any) => {
      if (res.code == 200) {
        if (res.data) {
          optionObj.value[item] = res.data
        }
      }
    })
  })
}
const dictChange = (list, value) => {
  if (list && list.length) {
    let obj = list.find(a => a.value = value)
    if (obj) {
      return obj.label
    } else {
      return '--'
    }
  }
  return '--'
}

let carData = ref([
  {
    a: '车船税',
    b: 1,
    c: 2,
    d: 3
  }, {
    a: '车船税',
    b: 1,
    c: 2,
    d: 3
  }, {
    a: '车船税',
    b: 1,
    c: 2,
    d: 3
  },
])
const typeSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0) {
    if (rowIndex === 1) {
      return [typeData.value.length - 1, 1]
    }
  }
}
const carSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0) {
    if (rowIndex === 0) {
      return [carData.value.length, 1]
    } else {
      return [0, 0]
    }
  }
}

// 投保人信息
let tbList = ref([
  {
    name: '同车主',
    bool: false
  }
])
// 被保人信息
let bbList = ref([
  {
    name: '同车主',
    bool: false
  }, {
    name: '同投保人',
    bool: false
  }
])

// 调整费用
let costShow = ref(false)
const handleCostChange = () => {
  costShow.value = true
}
// 留点费用计算
const handleComputedCostInfo = () => {
  api.financeApi.computedCostInfo({
    ...detailData.value.costRatio,
    orderNo: myRoute.query.id
  }).then((res: any) => {
    if (res.code == 200) {
      detailData.value.costRatio = res.data.costRatio
      detailData.value.insFeeOrders = res.data.insFeeOrders
    } else {
    }
  })
}
// 保存费用
const handleSaveCostChange = () => {
  api.financeApi.saveCostInfo({
    ...detailData.value.costRatio,
    orderNo: myRoute.query.id
  }).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: '调整成功',
        type: 'success'
      })
    } else {
    }
    costShow.value = false
    initDetail();
  })
}
/** 根据路由参数 jumpType 跳转至对应的提示项，并触发提示切换处理 */
const jumpFn = () => {
  const jumpType = myRoute.query.jumpType
  if (!jumpType) return
  const obj = tipsList.value.find(v => v.id === jumpType)
  const index = tipsList.value.findIndex(v => v.id === jumpType)
  handleTipsIndexChange(obj, index)
}

// 影像资料
let activeName = ref('car')
let infoList = ref([
  {
    label: '车辆',
    name: 'car',
    list: []
  }, {
    label: '车主',
    name: 'ower',
    list: []
  }, {
    label: '投保人',
    name: 'insured',
    list: []
  }, {
    label: '被保人',
    name: 'person',
    list: []
  }, {
    label: '关系证明',
    name: 'relation',
    list: []
  }, {
    label: '验车照',
    name: 'photo',
    list: []
  }, {
    label: '上年商业险保单',
    name: 'policy',
    list: []
  },
])
let fileList = ref([])

// 图片预览
let imageShow = ref(false)
let imageUrl = ref('')
let fileShow = ref(false)
let fileUrl = ref('')
const imageView = (item) => {
  if (item.fileName.includes('.png') || item.fileName.includes('.jpg') || item.fileName.includes('.jpeg')) {
    imageShow.value = true
    imageUrl.value = item.fileName
  }
  if (item.fileName.includes('.pdf')) {
    window.open(item.fileName, '_blank')
  }
  if (item.fileName.includes('.doc') || item.fileName.includes('.docx')) {
    fileShow.value = true
    nextTick(() => {
      filePreview(item.fileName)
    })
  }
}

// word预览
const filePreview = (file) => {
  nextTick(() => {
    fileUrl.value = file
  })
}

// 下载
const download = (item) => {
  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 = item.fileName; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  }
  image.src = item.fileName
}
const vehicleAndVesselTaxVo = ref()//车船税

// 获取详情
const initDetail = () => {
  // 打开 loading
  const loading = ElLoading.service({
    lock: true,
    text: "正在加载订单详情...",
    background: "rgba(0, 0, 0, 0.7)",
  });

  api.financeApi.auditInfo(myRoute.query.id).then((res: any) => {
    if (res.code == 200) {
      detailData.value = res.data;
      vehicleAndVesselTaxVo.value = res.data?.vehicleAndVesselTaxVo || {};
      nextTick(() => jumpFn());
    }
  }).catch((err) => {
    console.log("获取详情失败", err);
  }).finally(() => {
    loading.close();
  });
};

// 放弃审核
const handleAuditCancel = () => {
  api.financeApi.auditCancel(myRoute.query.id).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
    }
  })
}
//数字格式化
const convertedValue = (num) => {
  if (!num) {
    return "-";
  }
  if (num < 10000) {
    return num.toString();
  } else if (num < 100000000) {
    return (Math.floor(num / 10000 * 10) / 10) + '万';
  } else {
    return (Math.floor(num / 100000000 * 10) / 10) + '亿';
  }
}

/** 问题排序对话框的显示状态 */
const questionOrderDialog = ref(false)
const questionOrderValue = ref('')
const openQuestionOrderDialog = () => {
  questionOrderValue.value = ''
  questionOrderDialog.value = true
}
// 设为疑问订单
const handleUpdateToQuestionOrder = () => {
  const params = {
    problemReason: questionOrderValue.value,
    orderNo: myRoute.query.id,
  }
  api.financeApi.updateToQuestionOrder(params).then((res: any) => {
    if (res.code == 200) {
      questionOrderDialog.value = false
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      initDetail()
    }
  })
}

//审核通过/不通过
// 不通过理由
let refuse = ref('')
const handleAudit = (type) => {
  api.financeApi.verifyOrder({
    orderNo: myRoute.query.id,
    auditStatus: type == 1 ? 1 : type == 2 ? 2 : null,
    refuse: type == 2 ? refuse.value : ''
  }).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
    }
  })
}



let isShow = ref('0')

// 键盘事件处理
const handleKeydown = (event) => {
  if (event.key === 'Escape') {
    myRouter.back()
  }
}

onMounted(() => {
  console.log(123123, typeof myRoute.query.isShow)
  isShow.value = myRoute.query.isShow
  initDetail();
  initOption();
  // 添加键盘事件监听器
  window.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  // 移除键盘事件监听器
  window.removeEventListener('keydown', handleKeydown)
})

</script>

<style scoped lang="scss">
.auditDetail {
  width: calc(100% - 48px);
  height: calc(100vh - 130px);
  margin: 10px auto;
  overflow: hidden;

  .header {
    padding: 10px 0;
    background: #FFFFFF;
    border-radius: 6px;

    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0 10px 24px;

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

        img {
          width: 26px;
          height: 26px;
          margin-right: 16px;
        }

        span {
          font-size: 20px;
          color: #333333;
          margin-right: 12px;
        }

        .state {
          padding: 0 12px;
          border: 1px solid #FF8C21;
          color: #FF8C21;
          font-size: 14px;
          border-radius: 3px;
        }
      }

      .orderTips {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;

        .tips {
          width: 228px;
          height: 36px;
          background: url("@/assets/images/insurancePolicy/tips.png") no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 32px;
          font-size: 14px;
          color: #FFFFFF;
          position: absolute;
          top: 0;
        }
      }
    }

    .label {
      font-size: 14px;
      color: #666666;
      margin: 12px 16px 12px 24px;
      line-height: 30px;
    }

    .words {
      font-size: 14px;
      line-height: 30px;
      color: #333333;
    }

    .tipsList {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 24px;
      flex-wrap: nowrap;
      overflow-x: auto;
      width: 100%;

      .tipsItem {
        width: 14%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px 18px;
        border-radius: 4px;
        border: 1px solid #EEEEEE;
        cursor: pointer;

        img {
          width: 30px;
          height: 30px;
        }

        .tipsName {
          color: #333333;
          font-size: 16px;
          margin-left: 4px;
        }

      }

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

        .tipsName {
          color: #FFFFFF;
        }

        :after {
          content: "";
          position: absolute;
          top: 100%;
          left: calc(50% - 3px);
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          /* 左边框透明 */
          border-right: 6px solid transparent;
          /* 右边框透明 */
          border-top: 6px solid #3688FA;
          /* 上边框为三角形底边 */
        }
      }
    }
  }

  .content {
    height: calc(100% - 280px);
    overflow-y: auto;
    overflow-x: hidden;

    .title {
      height: 18px;
      line-height: 18px;
      border-left: 4px solid #00a0f4;
      padding: 0 0 0 12px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .taxList {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 24px;

        .taxItem {
          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;
        }
      }
    }

    .special {
      line-height: 18px;
      justify-content: space-between;

      .btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    .TBMsg,
    .carMsg,
    .personMsg,
    .insuranceMsg,
    .costMsg,
    .fileMsg {
      background: #FFFFFF;
      border-radius: 6px;
      padding: 12px 24px;
      margin: 12px 0;

      .TBMsgItem,
      .carMsgItem,
      .personMsgItem,
      .premiumMsgItem {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 16px;

        .label {
          font-size: 14px;
          color: #666666;
          line-height: 22px;
          max-width: 120px;
          flex-shrink: 0;
        }

        .value {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-size: 14px;
          color: #333333;
          line-height: 22px;
          margin-left: 16px;

          img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }
        }
      }

      .imageList {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .imageItem {
          margin-right: 16px;

          .imageBox {
            width: 210px;
            height: 130px;
            position: relative;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }

            .btn {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 24px;
              background: url("@/assets/images/insurancePolicy/imgBg.png") no-repeat;
              background-size: 100% 100%;
              color: #FFFFFF;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .btnItem {
                width: 49.5%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                cursor: pointer;
                height: 14px;
                cursor: pointer;

                span {
                  margin-left: 4px;
                }

                &:first-child {
                  border-right: 1px solid #FFFFFF;
                }
              }
            }
          }
        }
      }

      .fileItem {
        .file {
          border-radius: 4px;
          border: 1px solid #EEEEEE;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 18px 0;
          margin-top: 16px;

          img {
            width: 40px;
            height: 40px;
            margin-left: 20px;
          }

          .fileName {
            width: 200px;
            font-size: 14px;
            color: #333333;
            overflow: hidden;
          }

          .icons {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            :deep(.el-icon) {
              margin-right: 20px;
              cursor: pointer;
            }
          }
        }
      }

      .costTable {
        width: 100%;
        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;
              text-overflow: ellipsis;
              white-space: normal;
              font-size: 14px;
              font-weight: 500;
              margin: 8px 12px;
            }
          }
        }
      }

      .information {
        height: 280px;
        margin-bottom: 16px;

        .list {
          height: 290px;
          overflow-y: auto;

          .list-item {
            height: calc(50% - 12px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin: 0 0 12px;
            border-radius: 0 0 6px 6px;

            img {
              width: 100%;
              height: 130px;
              border-radius: 0 0 6px 6px;
            }

            .tips {
              position: absolute;
              left: 5px;
              bottom: 0;
              width: calc(100% - 10px);
              height: 24px;
              background: url("@/assets/images/additional/tips.png") no-repeat;
              background-size: 100% 100%;
              text-align: center;
              line-height: 24px;
              color: #FFFFFF;
            }
          }
        }
      }

      .fileList {
        .fileInfo {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border: 1px solid #EEEEEE;
          border-radius: 4px;
          padding: 18px 24px;

          .fileName {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .fileBtn {
            display: flex;
            align-items: center;

            .btn-icon {
              margin: 0 10px;
              font-size: 16px;
              cursor: pointer;

              &:hover {
                color: #00a0f4;
              }
            }
          }

          .file-box {
            position: relative;

            .btn-top {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              position: absolute;
              top: 0;
              left: 0;

              .image-close {
                display: block;
                width: 12px;
                height: 12px;
              }
            }

            .file-img {
              display: block;
              width: 208px;
              height: 130px;
              border-radius: 5px;
            }

            .btn-bottom {
              position: absolute;
              left: 0;
              bottom: 0;
              z-index: 1000;
              display: flex;
              align-items: center;
              height: 24px;
              width: 100%;
              background: url("@/assets/images/btn-bg.png") no-repeat;
              background-size: 100% 100%;

              .width-50 {
                width: 50%;
              }
            }
          }

        }
      }
    }
  }

  .buttonList {
    height: 60px;
    width: 100%;
    background: #FFFFFF;
    position: fixed;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 60px;
  }

  :deep(.hiddenHeader .el-table__header-wrapper) {
    display: none;
  }
}
</style>