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="6"><span>工号：</span>{{ orderInfo.userid }}</el-col>
              <el-col :span="6"><span>姓名：</span>{{ orderInfo.username }}</el-col>
              <el-col :span="6"><span>机构编码：</span>{{ orderInfo.deptid }}</el-col>
              <el-col :span="6"><span>机构名称：</span>{{ orderInfo.deptname }}</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"><span>手机号：</span>{{ orderInfo.ownerinfo.mobile }}<el-button style="margin-left:20px" type="text" v-if="isTaskPool && orderInfo.isDial&& orderInfo.isDial=='1'" >拨号</el-button></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 }}<el-button style="margin-left:20px" type="text" v-if="isTaskPool && orderInfo.isDial&& orderInfo.isDial=='1'" >拨号</el-button></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 }}<el-button style="margin-left:20px" type="text" v-if="isTaskPool && orderInfo.isDial&& orderInfo.isDial=='1'" >拨号</el-button></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">
            <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 && isAuditing.feeOrderNewVo && 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="一级管理费">
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelTwo" label="二级管理费">
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelThree" label="三级管理费">
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelFoure" label="四级管理费">
              </el-table-column>
              <el-table-column prop="deptPremiumsLevelFive" label="五级管理费">
              </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="orderInfo.feeOrderNewVo.exportFee"  :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="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="premium" label="保费"></el-table-column>
              <el-table-column prop="otherCostsPremiums" label="跟单费"></el-table-column>
              <el-table-column prop="superviseCostsPremiums" label="手续费"></el-table-column>
              <el-table-column prop="totalAmount" label="总费用"></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="比例"></el-table-column>
              <el-table-column prop="amount" label="金额"></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';//表单组件

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,
    },
  
  },
  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: {
    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>