vue-insagent-pc/src/views/Core/components/detailsDialog.vue

<template>
  <div>

    <el-dialog :visible.sync="dialogVisible" width="80%" class="details_style">
      <div slot="title" class=" dialog-title details-title">
        <img src="../../../icon/归属信息.png" alt class="icon-img" />
        <span>车辆报价信息详情</span>
      </div>
      <div class="details-body flex">
        <div style="background-color: #fff;">
          <ul class="tabLeft">
            <li :class="{ 'li-selected': selectedItem === 'gsxx' }"  @click="selectItem('gsxx')">归属信息</li>
            <li :class="{ 'li-selected': selectedItem === 'cjxx' }" @click="selectItem('cjxx')">投保信息</li>
            <li :class="{ 'li-selected': selectedItem === 'bfys' }" @click="selectItem('bfys')">保费因素</li>
            <li :class="{ 'li-selected': selectedItem === 'clxx' }" @click="selectItem('clxx')">车辆信息</li>
            <li :class="{ 'li-selected': selectedItem === 'czxx' }" @click="selectItem('czxx')">车主信息</li>
            <li :class="{ 'li-selected': selectedItem === 'tbrxx' }" @click="selectItem('tbrxx')">投保人信息</li>
            <li :class="{ 'li-selected': selectedItem === 'bbrxx' }" @click="selectItem('bbrxx')">被保人信息</li>
            <li v-if="orderInfo.kindinfo && orderInfo.kindinfo.length > 0"
              :class="{ 'li-selected': selectedItem === 'xzxx' }" @click="selectItem('xzxx')">险种信息</li>
            <li v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0"
              :class="{ 'li-selected': selectedItem === 'jyx' }" @click="selectItem('jyx')">驾意险</li>
            <li v-if="orderInfo.taxArrears && orderInfo.taxArrears.length > 0"
              :class="{ 'li-selected': selectedItem === 'qsxx' }" @click="selectItem('qsxx')">欠税信息</li>
            <li :class="{ 'li-selected': selectedItem === 'yxzl' }" @click="selectItem('yxzl')"
              v-if="Object.keys(obj).length != 0">影像资料</li>
            <li :class="{ 'li-selected': selectedItem === 'fymx' }" @click="selectItem('fymx')"
              v-if="orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee && Feepermissions">费用明细</li>
            <li v-if="isAuditing && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.deptManagerFee.length > 0"
              :class="{ 'li-selected': selectedItem === 'jgglf' }" @click="selectItem('jgglf')">机构管理费</li>
            <li v-if="orderInfo.distributionLevelVoList && orderInfo.distributionLevelVoList.length > 0"
              :class="{ 'li-selected': selectedItem === 'fxmx1' }" @click="selectItem('fxmx1')">分销明细</li>
            <li v-if="orderInfo && orderInfo.orderstatus == 4 && orderInfo.auditopinion"
              :class="{ 'li-selected': selectedItem === 'shyj' }" @click="selectItem('shyj')">审核意见</li>
            <li v-if="orderInfo && orderInfo.orderstatus == 3 && !isAuditing"
              :class="{ 'li-selected': selectedItem === 'dzbd' }" @click="selectItem('dzbd')">保单信息</li>
          </ul>
        </div>
        <div style="margin:20px;height: 60vh;overflow-y: auto;width: 100%;">
          <OpenCloseBox id="gsxx">
          <span slot="title">归属信息</span>
          <div slot="boby">
            <el-row class="premium-style " :gutter="20">
              <el-col :span="24"><span>归属机构：</span>{{ orderInfo.deptAreaInfo }}</el-col>
              <el-col :span="6"><span>本人工号：</span>{{ orderInfo.userid }}</el-col>
              <el-col :span="6"><span>本人姓名：</span>{{ orderInfo.username }}</el-col>
              <el-col :span="6"><span>联系方式：</span>{{ orderInfo.mobile }}</el-col>
              <el-col :span="6"><span>性别：</span>{{ orderInfo.sex }}</el-col>
            </el-row>
            <el-row class="premium-style " :gutter="20">
              <el-col v-if="orderInfo.referrerDeptAreaInfo" :span="24"><span>推荐人归属机构：</span>{{
                orderInfo.referrerDeptAreaInfo }}</el-col>
              <el-col :span="6"><span>推荐人工号：</span>{{ orderInfo.userid }}</el-col>
              <el-col :span="6"><span>推荐人姓名：</span>{{ orderInfo.username }}</el-col>
              <el-col :span="6"><span>联系方式：</span>{{ orderInfo.referrerMobile }}</el-col>
              <el-col :span="6"><span>性别：</span>{{ orderInfo.referrerSex }}</el-col>
            </el-row>
          </div>
        </OpenCloseBox>
          <OpenCloseBox id="cjxx">
            <span slot="title">投保信息</span>
            <div slot="boby">
              <div class="m-btn-10">保险公司：{{ orderInfo.inscompany }}</div>
              <div class="  quotation-style">
                <b>险种</b>
                <b>起保日期</b>
                <b>终保日期</b>
                <b>优惠比例</b>
                <b>优惠金额</b>
                <b>保费金额</b>
                <span>交强险</span>
                <span>{{ orderInfo.jqstartdate ? orderInfo.jqstartdate : '-' }}</span>
                <span>{{ orderInfo.jqenddate ? orderInfo.jqenddate : '-' }}</span>
                <span>{{ orderInfo.jqpremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
                  orderInfo.feeOrderNewVo.exportFee[0].totalProportion + '%' : '-' }}</span>
                <span>{{ orderInfo.jqpremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
                  ? '￥' + orderInfo.feeOrderNewVo.exportFee[0].totalAmount : '-' }}</span>
                <span>{{ orderInfo.jqpremium ? '￥' + orderInfo.jqpremium : '-' }}</span>
                <span>商业险</span>
                <span>{{ orderInfo.systartdate ? orderInfo.systartdate : '-' }}</span>
                <span>{{ orderInfo.syenddate ? orderInfo.syenddate : '-' }}</span>
                <span>{{ orderInfo.sypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
                  orderInfo.feeOrderNewVo.exportFee[1].totalProportion + '%' : '-' }}</span>
                <span>{{ orderInfo.sypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
                  ? '￥' + orderInfo.feeOrderNewVo.exportFee[1].totalAmount : '-' }}</span>
                <span>{{ orderInfo.sypremium ? '￥' + orderInfo.sypremium : '-' }}</span>
                <span>车船税</span>
                <span>-</span>
                <span>-</span>
                <span>-</span>
                <span>-</span>
                <span>￥{{ orderInfo.taxamount }}</span>
                <span>驾意险</span>
                <span>-</span>
                <span>-</span>
                <span>{{ orderInfo.jypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
                  orderInfo.feeOrderNewVo.exportFee[2].totalProportion + '%' : '-' }}</span>
                <span>{{ orderInfo.jypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
                  ? '￥' + orderInfo.feeOrderNewVo.exportFee[2].totalAmount : '-' }}</span>
                <span>{{ orderInfo.jypremium ? '￥' + orderInfo.jypremium : '-' }}</span>
                <span>总计</span>
                <span>-</span>
                <span>-</span>
                <span>-</span>
                <span class="themeColor" style="font-weight: bold;">￥{{ orderInfo.sumFee ? orderInfo.sumFee : 0
                }}</span>
                <span class="themeColor" style="font-weight: bold;">￥{{ orderInfo.sumpremium }}</span>
              </div>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="bfys">
            <span slot="title">保费因素</span>
            <div slot="boby">
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>评分：</span>{{ orderInfo.extendInfo.score ? orderInfo.extendInfo.score : ''
                }}</el-col>
                <el-col :span="6"><span>总赔付率：</span>{{ orderInfo.extendInfo.lossRation }}</el-col>
                <el-col :span="6"><span>总折扣率：</span>{{ orderInfo.extendInfo.totalAdjustRate }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>交强类型评分：</span>{{ orderInfo.extendInfo.jqScore }}</el-col>
                <el-col :span="6"><span>交强赔付率：</span>{{ orderInfo.extendInfo.jqLossRation }}</el-col>
                <el-col :span="6"><span>交强险折扣：</span>{{ orderInfo.extendInfo.jqAdjustRate }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>商业类型评分：</span>{{ orderInfo.extendInfo.syScore }}</el-col>
                <el-col :span="6"><span>商业赔付率：</span>{{ orderInfo.extendInfo.syLossRation }}</el-col>
                <el-col :span="6"><span>商业险折扣：</span>{{ orderInfo.extendInfo.syAdjustRate }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>交强续保：</span>{{ orderInfo.extendInfo.jqRenewal }}</el-col>
                <el-col :span="6"><span>商业续保：</span>{{ orderInfo.extendInfo.syRenewal }}</el-col>
                <el-col :span="6"><span>交强出险次数：</span>{{ orderInfo.extendInfo.jqClaims }}</el-col>
                <el-col :span="6"><span>商业出险次数：</span>{{ orderInfo.extendInfo.syClaims }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20" v-if="orderInfo.ubiPredictedInfoScore">
                <el-col :span="6"><span>紫金能源车（鼎然-车辆风险评分）：</span>{{ orderInfo.ubiPredictedInfoScore }}</el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="clxx">
            <span slot="title">车辆信息</span>
            <div slot="boby">
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>车牌号：</span>{{ orderInfo.carinfo.licenseNo }}</el-col>
                <el-col :span="6"><span>车辆识别代码：</span>{{ orderInfo.carinfo.vinNo }}</el-col>
                <el-col :span="6"><span>品牌型号：</span>{{ orderInfo.carinfo.modelcname }}</el-col>
                <el-col :span="6"><span>发动机号：</span>{{ orderInfo.carinfo.engineNo }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>年款：</span>{{ orderInfo.carinfo.caryear }}</el-col>
                <el-col :span="6"><span>座位数：</span>{{ orderInfo.carinfo.seatCount }}</el-col>
                <el-col :span="6"><span>整备质量：</span>{{ orderInfo.carinfo.completeKerbMass }}</el-col>
                <el-col :span="6"><span>核定载质量：</span>{{ orderInfo.carinfo.limitLoad }}</el-col>

              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>排量：</span>{{ orderInfo.carinfo.enginedesc }}</el-col>
                <el-col :span="6"><span>功率：</span>{{ orderInfo.carinfo.powerScale }}</el-col>
                <el-col :span="6"><span>新车购置价：</span>{{ orderInfo.carinfo.purchasePrice }}</el-col>
                <el-col :span="6"><span>使用性质：</span>{{ orderInfo.carinfo.carnature }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>车辆用途：</span>{{ orderInfo.carinfo.vehicleUse }} </el-col>
                <el-col :span="6"><span>车辆类型：</span>{{ orderInfo.carinfo.cartype }}</el-col>
                <el-col :span="6"><span>车辆种类：</span>{{ orderInfo.carinfo.cimodelclass }}</el-col>
                <el-col :span="6"><span>能源种类：</span>{{ orderInfo.carinfo.energyType }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>注册日期：</span>{{ orderInfo.carinfo.registerDate }}</el-col>
                <el-col :span="6"><span>发证日期：</span>{{ orderInfo.carinfo.issueDate }}</el-col>
                <el-col :span="6"><span>是否过户：</span>{{ orderInfo.carinfo.transferFlag == true ? "是" : "否" }}</el-col>
                <el-col :span="6"><span>转移登记日期：</span>{{ orderInfo.carinfo.transferDate }}</el-col>
              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="6"><span>商业险是否过户：</span>{{ orderInfo.carinfo.transferFlagBi == true ? "是" : "否" }}</el-col>
                <el-col :span="6"><span>是否脱保：</span>{{ orderInfo.carinfo.outOfInsurance == true ? "是" : "否" }}</el-col>
                <el-col :span="6"><span>是否二手车：</span>{{ orderInfo.carinfo.usedCar == true ? "是" : "否" }}</el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="czxx">
            <span slot="title">车主信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"><span>车主姓名：</span>{{ orderInfo.ownerinfo.name }}</el-col>
                <el-col :span="6"><span>证件类型：</span>{{ orderInfo.ownerinfo.identifyType }}</el-col>
                <el-col :span="6"><span>身份证号：</span>{{ orderInfo.ownerinfo.identifyNumber }}</el-col>
                <el-col :span="6" class="flex a-c"><span>手机号：</span>{{ orderInfo.ownerinfo.mobile }}
                  <img style="margin-left:20px;width: 20px;height: 20px;cursor: pointer;"
                    v-if="isTaskPool && orderInfo.isDial && orderInfo.isDial == '1'" @click="phoneDial('ownerinfo')"
                    src="../../../assets/image/bohao.png" alt /></el-col>
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"><span>电子邮箱：</span>{{ orderInfo.ownerinfo.email ? orderInfo.ownerinfo.email : '-'
                }}</el-col>
                <el-col :span="12"><span>地址：</span>{{ orderInfo.ownerinfo.addr }}</el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="tbrxx">
            <span slot="title">投保人信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"><span>投保人姓名：</span>{{ orderInfo.applyinfo.name }}</el-col>
                <el-col :span="6"><span>证件类型：</span>{{ orderInfo.applyinfo.identifyType }}</el-col>
                <el-col :span="6"><span>身份证号：</span>{{ orderInfo.applyinfo.identifyNumber }}</el-col>
                <el-col :span="6"><span>手机号：</span>{{ orderInfo.applyinfo.mobile }} <img
                    style="margin-left:20px;width: 20px;height: 20px;cursor: pointer;"
                    v-if="isTaskPool && orderInfo.isDial && orderInfo.isDial == '1'" @click="phoneDial('applyinfo')"
                    src="../../../assets/image/bohao.png" alt /></el-col>
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"><span>电子邮箱：</span>{{ orderInfo.applyinfo.email ? orderInfo.applyinfo.email : '/'
                }}</el-col>
                <el-col :span="12"><span>地址：</span>{{ orderInfo.applyinfo.addr }}</el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="bbrxx">
            <span slot="title">被保人信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"><span>被保人姓名：</span>{{ orderInfo.insureinfo.name }}</el-col>
                <el-col :span="6"><span>证件类型：</span>{{ orderInfo.insureinfo.identifyType }}</el-col>
                <el-col :span="6"><span>身份证号：</span>{{ orderInfo.insureinfo.identifyNumber }}</el-col>
                <el-col :span="6"><span>手机号：</span>{{ orderInfo.insureinfo.mobile }}<img
                    style="margin-left:20px;width: 20px;height: 20px;cursor: pointer;"
                    v-if="isTaskPool && orderInfo.isDial && orderInfo.isDial == '1'" @click="phoneDial('insureinfo')"
                    src="../../../assets/image/bohao.png" alt /></el-col>
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"><span>电子邮箱：</span>{{ orderInfo.insureinfo.email ? orderInfo.insureinfo.email : '/'
                }}</el-col>
                <el-col :span="12"><span>地址：</span>{{ orderInfo.insureinfo.addr }}</el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="xzxx" v-if="orderInfo.kindinfo && orderInfo.kindinfo.length > 0">
            <span slot="title">险种信息</span>
            <div slot="boby">
              <div class="quotation-style kind-arrears">
                <b>商业险险别</b>
                <b>保额（元）</b>
                <b>保费（元）</b>
                <div v-for="(kindinfoitem, kindinfoindex) in orderInfo.kindinfo" :key="kindinfoindex">
                  <span>{{ kindinfoitem.kindName }}</span>
                  <span v-if="['D4', 'SY_FJ_YBW2'].includes(kindinfoitem.kindCode)">{{ kindinfoitem.unitAmount }}</span>
                  <span v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(kindinfoitem.kindCode)
                    ">
                    {{ kindinfoitem.deductibleRate }}
                  </span>
                  <span v-else>{{ kindinfoitem.amount }}</span>
                  <span>{{ kindinfoitem.coveragePremium ? kindinfoitem.coveragePremium : '-' }}</span>
                </div>
              </div>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="jyx" v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0">
            <span slot="title">驾意险</span>
            <div slot="boby">
              <el-table
                :data="orderInfo.accidentInfo"
                stripe
                border
                :header-cell-style="{ background: '#F7F7F9 ', fontWeight: '500', color: '#333333' }"
                style="width: 100%">
                <el-table-column
                prop="name"
                align="center"
                label="驾意险名称">
                <template  slot-scope="scope">
                    <span style="color: #D42426;">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="amount"
                align="center"
                label="保险金额">
                <template  slot-scope="scope">
                        <span >￥{{ scope.row.amount ?scope.row.amount:'-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                prop="premium"
                label="保费">
                    <template  slot-scope="scope">
                        <span >￥{{ scope.row.premium?scope.row.premium:'-' }}</span>
                    </template>
                </el-table-column>
            </el-table>
              <!-- <div class="quotation-style driving-style">
                <b>产品</b>
                <b>份数</b>
                <b>价格</b>
                <div v-for="(kindinfoitem, taxArrearsindex) in orderInfo.accidentInfo" :key="taxArrearsindex">
                  <span>{{ kindinfoitem.projectName }}</span>
                  <span>{{ kindinfoitem.quantity ? kindinfoitem.quantity : '1' }}</span>
                  <span>{{ kindinfoitem.actualPremium }}/份</span>
                </div>
              </div> -->
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="qsxx" v-if="orderInfo.taxArrears && orderInfo.taxArrears.length > 0">
            <span slot="title">欠税信息</span>
            <div slot="boby">
              <div class="quotation-style tax-arrears">
                <b>当年应缴（元）</b>
                <b>去年补缴（元）</b>
                <b>滞纳金（元）</b>
                <b>总计</b>
                <div v-for="(taxArrearsitem, taxArrearsindex) in orderInfo.taxArrears" :key="taxArrearsindex">
                  <span>￥{{ taxArrearsitem.dayYearTax }}</span>
                  <span>￥{{ taxArrearsitem.taxDefault }}</span>
                  <span>￥{{ taxArrearsitem.lateFee }}</span>
                  <span>￥{{ orderInfo.taxamount }}</span>
                </div>
              </div>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="yxzl" v-if="Object.keys(obj).length != 0">
            <span slot="title">影像资料</span>
            <div slot="boby">
              <el-row :gutter="20">
                <el-col :span="12">
                  <h4>行驶证影像</h4>
                  <viewer :images="obj.carImageList">
                    <img class="imageStyle" v-for="(imageItem, imageIndex) in obj.carImageList" :src="imageItem"
                      :key="imageIndex" />
                  </viewer>
                </el-col>
                <el-col :span="12">
                  <div v-if="obj.ownerImageList">
                    <h4>车主身份证影像</h4>
                    <viewer :images="obj.ownerImageList">
                      <img class="imageStyle" v-for="(imageItem, imageIndex) in obj.ownerImageList" :src="imageItem"
                        :key="imageIndex" />
                    </viewer>
                  </div>
                  <div v-else>
                    <h4>营业执照</h4>
                    <img class="imageStyle" style="margin-right: 0;" />
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div v-if="obj.policyImageList">
                    <h4>投保人身份证影像</h4>
                    <viewer :images="obj.policyImageList">
                      <img class="imageStyle" v-for="(imageItem, imageIndex) in obj.policyImageList" :src="imageItem"
                        :key="imageIndex" />
                    </viewer>
                  </div>
                  <div v-else>
                    <h4>营业执照</h4>
                    <img class="imageStyle" style="margin-right: 0;" />
                  </div>
                </el-col>
                <el-col :span="12">
                  <div v-if="obj.insuredImageList">
                    <h4>被保人身份证影像</h4>
                    <viewer :images="obj.insuredImageList">
                      <img class="imageStyle" v-for="(imageItem, imageIndex) in obj.insuredImageList" :src="imageItem"
                        :key="imageIndex" />
                    </viewer>
                  </div>
                  <div v-else>
                    <h4>营业执照</h4>
                    <img class="imageStyle" style="margin-right: 0;" />
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="obj.carCheckImageList && obj.carCheckImageList.length > 0">
                <el-col :span="24">
                  <h4>验车照影像</h4>
                  <viewer :images="obj.carCheckImageList">
                    <img class="imageStyle" v-for="(imageItem, imageIndex) in obj.carCheckImageList" :src="imageItem"
                      :key="imageIndex" />
                  </viewer>
                </el-col>
              </el-row>
            </div>
          </OpenCloseBox>

          <OpenCloseBox id="jgglf"
            v-if="isAuditing  && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.deptManagerFee">
            <span slot="title">机构管理费</span>
            <div slot="boby" style="font-size:12px;width: 100%" class="FeeEnclosure">
              <el-table :data="orderInfo.feeOrderNewVo.deptManagerFee" :border="true" width="100%" :stripe="true"
                size="mini" :header-cell-style="{
                  background: '#F7F7F9',
                  fontWeight: '700',
                  color: '#606266',
                }">
                <el-table-column prop="insuranceType" label="险种"></el-table-column>
                <el-table-column prop="deptProportionLevelOne" label="一级管理费比例">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing.adjustFeeFlag">{{ scope.row.deptProportionLevelOne }}% </span>
                    <el-input v-else v-model="scope.row.deptProportionLevelOne" size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="deptProportionLevelTwo" label="二级管理费比例 ">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing.adjustFeeFlag">{{ scope.row.deptProportionLevelTwo }}% </span>
                    <el-input v-else v-model="scope.row.deptProportionLevelTwo" size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="deptProportionLevelThree" label="三级管理费比例">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing.adjustFeeFlag">{{ scope.row.deptProportionLevelThree }}% </span>
                    <el-input v-else v-model="scope.row.deptProportionLevelThree" size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="deptProportionLevelFoure" label="四级管理费比例">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing.adjustFeeFlag">{{ scope.row.deptProportionLevelFoure }}% </span>
                    <el-input v-else v-model="scope.row.deptProportionLevelFoure" size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="deptProportionLevelFive" label="五级管理费比例">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing.adjustFeeFlag">{{ scope.row.deptProportionLevelFive }}% </span>
                    <el-input v-else v-model="scope.row.deptProportionLevelFive" size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="deptPremiumsLevelOne" label="一级管理费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.deptPremiumsLevelOne }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelTwo" label="二级管理费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.deptPremiumsLevelTwo }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelThree" label="三级管理费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.deptPremiumsLevelThree }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelFoure" label="四级管理费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.deptPremiumsLevelFoure }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelFive" label="五级管理费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.deptPremiumsLevelFive }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="profitMarginPremiums" label="利润差值">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.profitMarginPremiums }}</span>
                </template>
                </el-table-column>
              </el-table>
            </div>
          </OpenCloseBox>

          <OpenCloseBox id="shyj" v-if="orderInfo && orderInfo.orderstatus == 4 && orderInfo.auditopinion">
            <span slot="title">审核意见</span>
            <div slot="boby">
              <p style=" padding: 10px 50px">
                {{ orderInfo.auditopinion }}
              </p>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="dzbd" v-if="orderInfo && orderInfo.orderstatus == 3 && !isAuditing">
            <span slot="title">保单信息</span>
            <div slot="boby">
              <el-row class="premium-style " :gutter="20">
                <el-col :span="12"><span>交强险投保单号：</span>{{ orderInfo.jqapplyno }}</el-col>
                <el-col :span="12"><span>交强险保单号：</span>{{ orderInfo.jqpolicyno }}</el-col>
                <el-col v-if="orderInfo.syapplyno" :span="12"><span>商业险投保单号：</span>{{ orderInfo.syapplyno }}</el-col>
                <el-col v-if="orderInfo.sypolicyno" :span="12"><span>商业险保单号：</span>{{ orderInfo.sypolicyno }}</el-col>
                <el-col :span="12" v-for="(oldfileItem, oldfileIndex) in warrantObj.oldfileList" :key="oldfileIndex">
                  <span>{{ oldfileItem.fileTitle }} ：</span>{{ orderInfo.licenseno }}
                  <el-button style="margin-left:30px" type="text" @click="viewfile(oldfileItem)">下载
                  </el-button>
                </el-col>
                <el-col :span="12" v-for="(val, oldfileIndex) in warrantObj.businessList" :key="oldfileIndex">
                  <span>{{ val.fileTitle }} ：</span>{{ orderInfo.licenseno }}
                  <el-button style="margin-left:30px" type="text" @click="viewfile(val)">下载
                  </el-button>
                </el-col>

              </el-row>
              <el-row class="premium-style " :gutter="20">
                <el-col :span="12" v-for="(oldfileItem, oldfileIndex) in warrantObj.accidentList" :key="oldfileIndex">
                  <span>{{ oldfileItem.fileTitle }} ：</span>{{ orderInfo.licenseno }}
                  <el-button style="margin-left:30px" type="text" @click="viewfile(oldfileItem)">下载
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="fymx" v-if="orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee && Feepermissions">
            <span slot="title">费用明细<el-button v-if="isTaskPool" type="primary" style="margin-left: 30px;" size="mini"
                @click="agreementProductCostsSaveFun()">匹配费用信息</el-button></span>
            <div slot="boby" style="font-size:12px;width: 100%" class="FeeEnclosure">
              <el-table :data="feeOrderNewVoList.list" :span-method="feeOrderNewVomergeRows" :border="true" width="100%"
              :stripe="true" size="mini" :header-cell-style="{
                background: '#F7F7F9',
                fontWeight: '700',
                color: '#606266',
              }">
              <el-table-column prop="type" label="">
              </el-table-column>
              <el-table-column prop="insuranceType" label="险种">
              </el-table-column>
              <el-table-column prop="premium" label="保费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.premium }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="otherCostsProportion" label="跟单比例">
                <template slot-scope="scope" >
                  <span v-if="isAuditing || scope.row.type !== '入口费用'">{{ scope.row.otherCostsProportion }}% </span>
                  <el-input v-else v-model="scope.row.otherCostsProportion" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="superviseCosts" label="手续费比例">
                <template slot-scope="scope">
                  <span v-if="isAuditing || scope.row.type !== '入口费用'">{{ scope.row.superviseCosts }}% </span>
                  <el-input v-else v-model="scope.row.superviseCosts" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="totalProportion" label="总比例">
                <template slot-scope="scope">
                  <span v-if="isAuditing || scope.row.type !== '入口费用'">{{ scope.row.totalProportion }}%</span>
                  <el-input v-else v-model="scope.row.totalProportion" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="otherCostsPremiums" label="跟单费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.otherCostsPremiums }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="superviseCostsPremiums" label="手续费">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.superviseCostsPremiums }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="totalAmount" label="总费用">
                <template slot-scope="scope" >
                  <span >￥{{ scope.row.totalAmount }}</span>
                </template>
              </el-table-column>
            </el-table>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="fxmx1" v-if="orderInfo.feeOrderNewVo && orderInfo.distributionLevelVoList && Feepermissions">
            <span slot="title">分销明细</span>
            <div slot="boby" style="font-size:12px;width: 100%" class="FeeEnclosure">
              <el-table :data="orderInfo.distributionLevelVoList" :border="true" width="100%" :stripe="true" size="mini"
                :header-cell-style="{
                  background: '#F7F7F9',
                  fontWeight: '700',
                  color: '#606266',
                }">
                <el-table-column prop="distributionLevel" label="等级"></el-table-column>
                <el-table-column prop="userName" label="接收人"></el-table-column>
                <el-table-column prop="distributionRatio" label="比例">
                <template slot-scope="scope" >
                  <span>{{ scope.row.distributionRatio }}%</span>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="金额">
                <template slot-scope="scope" >
                  <span>￥{{ scope.row.amount }}</span>
                </template>
              </el-table-column>
              </el-table>
            </div>
          </OpenCloseBox>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <slot v-if="isAuditing" name="footer1"></slot>
        <el-button size="small" type="primary" plain @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="产品因子录入" :visible.sync="productCostFactorDialogVisible" :close-on-click-modal="false" width="70%"
      top="6vh" :fullscreen="true" @close="productCostFactoropenDialog">
      <Product-Cost-Form v-if="productCostFactorDialogVisible" :form="orderInfo.agreementProductCostsSave.costsAttrLinks"
        :operator="operatorlist" over-size="small" :disabled="true"
        @cancelForm="productCostFactorCancelForm"></Product-Cost-Form>
    </el-dialog>
    <el-dialog title="产品编辑" v-if="orderInfo.agreementProductCostsSave" :visible.sync="productCostAddVehicleFactorVisible"
      width="80%" top="6vh" @close="productcloseDialog">
      <el-collapse accordion>
        <div class="productstitle flex j-s" style="margin-top: 10px">
          <div>
            <span v-for="(item, index) in orderInfo.agreementProductCostsSave.productName" :key="index">
              {{ item }}-
            </span>
            <span>费用</span>
          </div>
        </div>
        <el-button class="mrgin-1" size="small" type="warning"
          @click="productCostFactorDialogVisible = true">产品费用因子</el-button>
        <el-form ref="productCostForm" v-if="orderInfo.agreementProductCostsSave"
          :model="orderInfo.agreementProductCostsSave" label-width="130px" :size="overSize" :rules="costformRules">
          <el-row>
            <el-col :span="20" :offset="2">
              <el-form-item label="费用描述">
                <el-input type="textarea" v-model="orderInfo.agreementProductCostsSave.costsDescription"
                  placeholder="输入费用描述内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="费用起期" prop="costsStartDate">
                <el-date-picker style="width: 100%" v-model="orderInfo.agreementProductCostsSave.costsStartDate"
                  type="datetime" placeholder="选择费用开始日期" value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions" @change="cleanEndDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="费用止期" prop="costsEndDate">
                <el-date-picker style="width: 100%" v-model="orderInfo.agreementProductCostsSave.costsEndDate"
                  type="datetime" placeholder="选择费用结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="checkStartDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="优先级">
                <el-input style="width: 100%" v-model="orderInfo.agreementProductCostsSave.priorityLevel"
                  onkeyup="value=value.replace(/\D/g,'')" placeholder="输入数字"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <h4 style="color: tomato">交强险费用</h4>
            <el-col :span="5" :offset="1">
              <el-form-item label="费用比例" prop="jqCarCostsProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqCarCostsProportion"
                  @blur="costRatioInput('jqCostsProportion', 'jqCarCostsProportion', 'jqCarOtherCostsProportion')"
                  placeholder="请输入费用比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="其他费用比例">
                <el-input disabled v-model="orderInfo.agreementProductCostsSave.jqCarOtherCostsProportion"
                  placeholder="请输入其他费用比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="总费用比例" prop="jqCostsProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqCostsProportion"
                  @blur="totalCostRatioInput('jqCostsProportion', 'jqCarCostsProportion', 'jqCarOtherCostsProportion')"
                  placeholder="请输入总费用比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例一级	" prop="jqExportRadioLevel1">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqExportRadioLevel1"
                  placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例二级	" prop="jqExportRadioLevel2">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqExportRadioLevel2"
                  placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例三级	" prop="jqExportRadioLevel3">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqExportRadioLevel3"
                  placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例四级	" prop="jqExportRadioLevel4">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqExportRadioLevel4"
                  placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例五级	" prop="jqExportRadioLevel5">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqExportRadioLevel5"
                  placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强出口手续比例" prop="jqCostsExportProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.jqCostsExportProportion"
                  placeholder="请输入出口手续费比例"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <h4 style="color: tomato">商业险费用</h4>

            <el-col :span="5" :offset="1">
              <el-form-item label="费用比例" prop="syCarCostsProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.syCarCostsProportion"
                  @blur="totalCostRatioInput('syCostsProportion', 'syCarCostsProportion', 'syCarOtherCostsProportion')"
                  placeholder="请输入费用比例"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="其他费用比例">
                <el-input v-model="orderInfo.agreementProductCostsSave.syCarOtherCostsProportion" placeholder="请输入其他费用比例"
                  disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="总费用比例" prop="syCostsProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.syCostsProportion" placeholder="请输入总费用比例"
                  @blur="totalCostRatioInput('syCostsProportion', 'syCarCostsProportion', 'syCarOtherCostsProportion')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例一级	" prop="syExportRadioLevel1">
                <el-input v-model="orderInfo.agreementProductCostsSave.syExportRadioLevel1"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例二级	" prop="syExportRadioLevel2">
                <el-input v-model="orderInfo.agreementProductCostsSave.syExportRadioLevel2"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例三级	" prop="syExportRadioLevel3">
                <el-input v-model="orderInfo.agreementProductCostsSave.syExportRadioLevel3"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例四级	" prop="syExportRadioLevel4">
                <el-input v-model="orderInfo.agreementProductCostsSave.syExportRadioLevel4"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例五级	" prop="syExportRadioLevel5">
                <el-input v-model="orderInfo.agreementProductCostsSave.syExportRadioLevel5"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业出口手续比例" prop="syCostsExportProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.syCostsExportProportion"
                  placeholder="请输入出口手续费比例"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <h4 style="color: tomato">非车费用</h4>
            <el-col :span="5" :offset="1">
              <el-form-item label="费用比例" prop="noCarCostsProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCarCostsProportion"
                  @blur="totalCostRatioInput('noCostsProportion', 'noCarCostsProportion', 'noCarOtherCostsProportion')"
                  placeholder="请输入费用比例"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="其他费用比例">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCarOtherCostsProportion" placeholder="请输入其他费用比例"
                  disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="总费用比例" prop="noCostsProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCostsProportion" placeholder="请输入总费用比例"
                  @blur="totalCostRatioInput('noCostsProportion', 'noCarCostsProportion', 'noCarOtherCostsProportion')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例一级	" prop="noCarExportRadioLevel1">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCarExportRadioLevel1"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例二级	" prop="noCarExportRadioLevel2">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCarExportRadioLevel2"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例三级	" prop="noCarExportRadioLevel3">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCarExportRadioLevel3"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例四级	" prop="noCarExportRadioLevel4">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCarExportRadioLevel4"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例五级	" prop="noCarExportRadioLevel5">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCarExportRadioLevel5"
                  placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车出口手续比例" prop="noCostsExportProportion">
                <el-input v-model="orderInfo.agreementProductCostsSave.noCostsExportProportion"
                  placeholder="请输入出口手续费比例"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
        <el-button :size="overSize" @click="productCostAddVehicleFactorVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import OpenCloseBox from './openclose.vue'
import ProductCostForm from '@/components/Form/ProductCostForm.vue';//表单组件
import axios from 'axios'
export default {
  name: "detailsDialog",
  data() {
    return {
      dialogVisible: false,
      obj: {},
      warrantObj: {},
      operatorlist: [],
      selectedItem: null,
      productCostAddVehicleFactorVisible: false, //产品费用录入    显示/隐藏
      productCostFactorDialogVisible: false,
      permissions: null,
      overSize: 'small',
      costformRules: {
        costsStartDate: [
          { required: true, message: "请选择费用起期", trigger: "change" },
        ],
        costsEndDate: [
          { required: true, message: "请选择费用止期", trigger: "change" },
        ],

        jqNewCarCostsProportion: [
          { required: true, message: "请输入新车费用比例", trigger: "blur" },
          {
            pattern: /^([0-4])$/,
            message: "请输入0-4的整数",
            trigger: "blur",
          },
        ],
        jqOldCarCostsProportion: [
          { required: true, message: "请输入旧车费用比例", trigger: "blur" },
          {
            pattern: /^([0-4])$/,
            message: "请输入0-4的整数",
            trigger: "blur",
          },
        ],
        jqCostsProportion: [
          { required: true, message: "请输入总费用比例", trigger: "blur" },
          {
            pattern: /^100$|^[1-9]?\d(\.\d+)?$|^0(\.\d+)?$/,
            message: "请输入0-100数",
            trigger: "blur",
          },
        ],

        syNewCarCostsProportion: [
          { required: true, message: "请输入新车费用比例", trigger: "blur" },
          {
            pattern: /^([0-9]{1,2}|100)$/,
            message: "请输入0-100的整数",
            trigger: "blur",
          },
        ],
        syOldCarCostsProportion: [
          { required: true, message: "请输入旧车费用比例", trigger: "blur" },
          {
            pattern: /^([0-9]{1,2}|100)$/,
            message: "请输入0-100的整数",
            trigger: "blur",
          },
        ],
        syCostsProportion: [
          { required: true, message: "请输入总费用比例", trigger: "blur" },
          {
            pattern: /^100$|^[1-9]?\d(\.\d+)?$|^0(\.\d+)?$/,
            message: "请输入0-100的数",
            trigger: "blur",
          },
        ],
      },
      dynamicFormArray: [],
    };
  },
  props: {
    orderInfo: {
      type: Object,
      default: {}
    },
    Feepermissions: {
      type: Boolean,
      default: true,
    },
    isAuditing: {
      type: Object,
      default: () => { }
    },
    isTaskPool: {
      type: Boolean,
      default: false,
    },
    feeOrderNewVoList: Object,

  },
  computed: {
    pickerOptions() {
      return {
        disabledDate: this.disabledDate,
      };
    },
  },
  created() {
    //获取操作符
    this.$api.dict.findPage(this.operator).then(res => {
      this.operatorlist = res.data.content;
    })
    this.$api.insCompany.shutdown().then((res) => {
      this.permissions = res.data;
    });

    this.getFactorTemplate();
  },
  components: { OpenCloseBox, ProductCostForm },
  methods: {
    feeOrderNewVomergeRows({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || this.feeOrderNewVoList.list[rowIndex].type !== this.feeOrderNewVoList.list[rowIndex - 1].type) {
          let rowSpan = 1;
          for (let i = rowIndex + 1; i < this.feeOrderNewVoList.list.length; i++) {
            if (this.feeOrderNewVoList.list[i].type === row.type) {
              rowSpan++;
            } else {
              break;
            }
          }
          return [rowSpan, 1];
        } else {
          return [0, 0];
        }
      }
      return [1, 1];
    },
    phoneDial(type) {
      this.$api.letter.getMobileByOrderNo(this.orderInfo.orderno, type).then((res) => {
        if (res.code == '200') {
          // 定义请求的URL和数据
          const url = 'http://172.168.1.66/call';
          const data = {
            'username': res.data.username,
            'password': res.data.password,
            'number': res.data.phone
          };

          // 发送POST请求
          axios.post(url, data)
            .then(response => {
              console.log(response.data); // 输出响应内容
            })
            .catch(error => {
              console.error('Error:', error); // 处理错误
            });
        }
      });
    },
    getFactorTemplate() {
      this.$api.insCompany.productConfigItem().then(res => {
        if (res.code == '200') {
          let data = res.data;
          data.map(ele => {
            switch (ele.attrType) {
              case 'inputNumber':
                ele.operator = '1';
                break;
            }
            if (ele.attrName == '车牌号') {
              ele.dictLabal = this.areanumberplateList;
            }
          })
          // this.productCostForm.costsAttrLinks = data;
          this.dynamicFormArray = data;
        }
      })
    },
    productCostFactorCancelForm(data) {
      this.productCostFactorDialogVisible = data;
    },
    productcloseDialog() {
      this.productCostAddVehicleFactorVisible = false
    },
    agreementProductCostsSaveFun() {
      if (this.orderInfo.agreementProductCostsSave) {
        this.productCostAddVehicleFactorVisible = true
      }
      else {
        this.$message.error('暂无费用信息')
      }
    },
    productCostFactoropenDialog() {
      this.productCostFactorDialogVisible = false
    },
    //改变费用起期时，同步清空对应费用止期，重新填写
    cleanEndDate() {
      this.orderInfo.agreementProductCostsSave.costsEndDate = null;
    },
    //改变费用止期时，校验必须先填费用起期
    checkStartDate() {
      let tempStartDate = this.orderInfo.agreementProductCostsSave.costsAttrLinks.costsStartDate;
      let tempEndDate = this.orderInfo.agreementProductCostsSave.costsEndDate;
      if (!tempStartDate) {
        this.orderInfo.agreementProductCostsSave.costsEndDate = null;
        this.$message({
          message: "请先选择费用起期！",
          type: "error",
        });
      }
      if (!this.validateEndDate(tempStartDate, tempEndDate)) {
        this.orderInfo.agreementProductCostsSave.costsEndDate = null;
        this.$message({
          message: "费用止期不能小于/等于费用起期！",
          type: "error",
        });
      }
    },
    selectItem(item) {
      this.selectedItem = item;
      document.getElementById(item).scrollIntoView({ behavior: "smooth" });
    },
    setBackupVisible: function (backupVisible) {
      this.selectedItem = 'cjxx'
      this.dialogVisible = backupVisible
    },
    imageFun(param) {
      this.obj = param
    },
    warrantyFun(param) {
      this.warrantObj = param

    },
    saveAs(blob, filename) {
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.target = "_ blank";
      link.download = filename;
      link.click();
    },
    //预览文件
    viewfile(index) {
      let name = index.fileurl.lastIndexOf("/");
      fetch(index.fileurl)
        .then((response) => response.blob())
        .then((blob) => {
          this.saveAs(
            blob,
            index.fileurl.substring(name + 1, index.fileurl.length)
          );
        })
        .catch((error) => { });
    },
  }
};
</script>
<style lang="scss" scoped>
.details-body {
  .tabLeft {
    list-style: none;
    padding-left: 0;
    width: 100px;

    li {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 500;
      padding-left: 20px;
      cursor: pointer;
    }

    li:hover {
      color: var(--themeColor);
    }
  }

  .li-selected {
    color: var(--themeColor);
    background-color: rgba(212, 36, 38, 0.06);
  }
}

.icon-img {
  width: 30px;
  height: 30px;
  vertical-align: bottom
}

.details-title {
  font-weight: bold;
  font-size: 16px;
}

.quotation-style {
  font-size: 0;

  b {
    background: #F7F7F9;
    font-size: 14px;
  }

  b,
  span {
    display: inline-block;
    box-sizing: border-box;
    width: 16.66%;
    text-align: center;
    line-height: 40px;
    border: 1px solid #EEF1F6;
    font-size: 14px;
  }
}

.premium-style {
  div {
    padding: 5px 0;
  }

  span {
    color: #868B98;
  }
}

.driving-style {
  span:first-child {
    width: 70%;
  }

  b:first-child {
    width: 70%;
  }

  b,
  span {
    width: 15%;
  }
}

.tax-arrears {

  b,
  span {
    width: 25%;
  }
}

.kind-arrears {

  b,
  span {
    width: 33.33%;
  }
}

.imageStyle {
  display: inline-block;
  width: 120px;
  height: 120px;
  // box-shadow: #ddd 0px 0px 5px;
  margin-right: 86px;
  border: 1px dashed #CED4DA;
  background: #F7F7F9;
}

.FeeEnclosure {
  /deep/ table {
    width: 100% !important;
  }

  /deep/ .cell {
    text-align: center;
  }

  /deep/ .el-table__empty-block {
    width: 100% !important;
  }
}

.products>div {
  margin: 5px;
}

.productstitle {
  width: 100%;
  border-bottom: 2px solid #409eff;
  text-align: center;
}

.productstitle>div {
  width: 100px;
  height: 26px;
  line-height: 30px;
  background: #409eff;
  color: #fff;
  border-top-right-radius: 15px;
  padding: 2px;
  font-size: 12px;
}

.details_style /deep/ .el-dialog__body {
  padding-top: 0;
  border-bottom: 1px solid #EEF1F6;
  background-color: rgb(242, 242, 242);
  padding: 0;
}
</style>