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

<template>
  <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 === '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 :class="{ 'li-selected': selectedItem === 'cjxx' }" @click="selectItem('cjxx')">投保信息</li>
          <li v-if="orderInfo.taxArrears && orderInfo.taxArrears.length > 0"
            :class="{ 'li-selected': selectedItem === 'qsxx' }" @click="selectItem('qsxx')">欠税信息</li>
          <li :class="{ 'li-selected': selectedItem === 'bfys' }" @click="selectItem('bfys')">保费因素</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 :class="{ 'li-selected': selectedItem === 'yxzl' }" @click="selectItem('yxzl')"
            v-if="Object.keys(obj).length != 0">影像资料</li>
          <li v-if="orderInfo && orderInfo.orderstatus == 3" :class="{ 'li-selected': selectedItem === 'dzbd' }"
            @click="selectItem('dzbd')">保单信息</li>
          <li v-if="orderInfo.orderFeeResult && orderInfo.orderFeeResult.length > 0"
            :class="{ 'li-selected': selectedItem === 'fymx' }" @click="selectItem('fymx')">费用明细</li>
          <li v-if="orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.deptManagerFee.length > 0"
            :class="{ 'li-selected': selectedItem === 'jgglf' }" @click="selectItem('jgglf')">机构管理费</li>
          <li v-if="orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.retailFee && orderInfo.feeOrderNewVo.retailFee.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>

        </ul>
      </div>
      <div style="margin:20px;height: 60vh;overflow-y: auto;width: 100%;">
        <ul class="fixedTop">
            <li>
              <div class="title">
                <div class="img"><img src="@/assets/image/detailsDialog_cph.png" alt=""></div>
                <p>车牌号：</p>
              </div>
              <p>{{ orderInfo.licenseno }}</p>
            </li>
            <li>
              <div class="title">
                <div class="img"><img src="@/assets/image/detailsDialog_gs.png" alt=""></div>
                <p>保险公司：</p>
              </div>
              <p>{{ orderInfo.inscompany }}</p>
            </li>
            <li>
              <div class="title">
                <div class="img"><img src="@/assets/image/detailsDialog_ly.png" alt=""></div>
                <p>业务来源：</p>
              </div>
              <p>{{ orderInfo.source }}</p>
            </li>
        </ul>
        <OpenCloseBox id="gsxx">
          <span slot="title">归属信息</span>
          <div slot="boby">
            <el-row class="premium-style " :gutter="20" >
                <el-col :span="6" v-if="orderInfo.province"><span>归属机构省：</span>{{ orderInfo.province }}</el-col>
                <el-col :span="6" v-if="orderInfo.city"><span>归属机构市：</span>{{ orderInfo.city }}</el-col>
                <el-col :span="6" v-if="orderInfo.prefecture"><span>归属机构区：</span>{{ orderInfo.prefecture }}</el-col>
              </el-row>
            <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.mobile }}</el-col>
              <el-col :span="6"><span>性别：</span>{{ orderInfo.sex }}</el-col>
            </el-row>
            <el-row class="premium-style " :gutter="20" >
                <el-col :span="6" v-if="orderInfo.referrerProvince"><span>推荐人归属机构省：</span>{{ orderInfo.referrerProvince }}</el-col>
                <el-col :span="6"  v-if="orderInfo.referrerCity"><span>推荐人归属机构市：</span>{{ orderInfo.referrerCity }}</el-col>
                <el-col :span="6" v-if="orderInfo.referrerPrefecture"><span>推荐人归属机构区：</span>{{ orderInfo.referrerPrefecture }}</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="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-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-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-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="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>
              <span>交强险</span>
              <span>{{ orderInfo.jqstartdate ? orderInfo.jqstartdate : '-' }}</span>
              <span>{{ orderInfo.jqenddate ? orderInfo.jqenddate : '-' }}</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.sypremium : '-' }}</span>
              <span>车船税</span>
              <span>-</span>
              <span>-</span>
              <span>￥{{ orderInfo.taxamount }}</span>
              <span>驾意险</span>
              <span>-</span>
              <span>-</span>
              <span>{{ orderInfo.jypremium ? '￥' + orderInfo.jypremium : '-' }}</span>
              <span>总计</span>
              <span>-</span>
              <span>-</span>
              <span class="themeColor" style="font-weight: bold;">￥{{ orderInfo.sumpremium }}</span>
            </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="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="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>
        </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="dzbd" v-if="orderInfo && orderInfo.orderstatus == 3">
          <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" v-if="orderInfo.jqpolicyno"><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">
                <div>
                  <span>{{ oldfileItem.fileTitle }} ：</span>{{ orderInfo.licenseno }}
                  <el-button style="margin-left:30px" type="text" @click="viewfile(oldfileItem)">下载
                  </el-button>
                </div>
              </el-col>
              <el-col :span="12" v-for="(val, oldfileIndex) in warrantObj.businessList" :key="oldfileIndex">
                <div>
                  <span>{{ val.fileTitle }} ：</span>{{ orderInfo.licenseno }}
                  <el-button style="margin-left:30px" type="text" @click="viewfile(val)">下载
                  </el-button>
                </div>
              </el-col>

            </el-row>
            <el-row class="premium-style " :gutter="20">
              <el-col :span="12" v-for="(oldfileItem, oldfileIndex) in warrantObj.accidentList" :key="oldfileIndex">
                <div>
                  <span>{{ oldfileItem.fileTitle }} ：</span>{{ orderInfo.licenseno }}
                  <el-button style="margin-left:30px" type="text" @click="viewfile(oldfileItem)">下载
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </OpenCloseBox>
        <OpenCloseBox id="fymx" v-if="feeOrderNewVoList">
          <span slot="title">费用明细</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="jgglf" v-if="feeOrderNewVoList.deptManagerFee">
          <span slot="title">机构管理费</span>
          <div slot="boby" style="font-size:12px;width: 100%" class="FeeEnclosure">
            <el-table :data="feeOrderNewVoList.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">{{ 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">{{ 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">{{ 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">{{ 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">{{ 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="externalProportion" label="代客录单扣减比例">
                <template slot-scope="scope" >
                  <span v-if="scope.row.externalProportion">{{ scope.row.externalProportion }}%</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column prop="externalPremiums" label="代客录单扣减金额">
                <template slot-scope="scope" >
                  <span v-if="scope.row.externalPremiums">￥{{ scope.row.externalPremiums }}</span>
                  <span v-else>-</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="fxmx1" v-if="feeOrderNewVoList.retailFee">
              <span slot="title">分销明细</span>
          <div slot="boby" style="font-size:12px;width: 100%" class="FeeEnclosure">
            <el-table :data="feeOrderNewVoList.retailFee" :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="userName" label="接收人"></el-table-column>
              <el-table-column prop="jqRetailProportion" label="交强分销比例">
                <template slot-scope="scope" >
                  <span>{{ scope.row.jqRetailProportion }}%</span>
                </template>
              </el-table-column>
              <el-table-column prop="jqRetailPremiums" label="交强分销费">
                <template slot-scope="scope" >
                  <span>￥{{ scope.row.jqRetailPremiums }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="syRetailProportion" label="商业分销比例">
                <template slot-scope="scope" >
                  <span>{{ scope.row.syRetailProportion }}%</span>
                </template>  
              </el-table-column>
              <el-table-column prop="syRetailPremiums" label="商业险分销费">
                <template slot-scope="scope" >
                  <span>￥{{ scope.row.syRetailPremiums }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="noRetailProportion" label="非车分销比例">
                <template slot-scope="scope" >
                  <span>{{ scope.row.noRetailProportion }}%</span>
                </template>    
              </el-table-column>
              <el-table-column prop="noRetailPremiums" label="非车险分销费">
                <template slot-scope="scope" >
                  <span>￥{{ scope.row.noRetailPremiums }}</span>
                </template>  
              </el-table-column>
              <el-table-column prop="amount" label="金额">
                <template slot-scope="scope" >
                  <span>￥{{ scope.row.totalRetailPremiums }}</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>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <template v-if="auditStatus!=1">
        <el-button size="small" type="warning" @click="updatedCost" v-if="isAuditing">更改费用</el-button>
      <el-button size="small" type="primary" style="background-color: #0EC216; border: 1px solid #0EC216"
        @click="adjustFee"><span v-if="isAuditing">取消调整</span><span v-if="!isAuditing">调整费用</span></el-button>
      <el-button size="small" type="primary"
        style="background-color: #0EC216;border: 1px solid #0EC216"
        @click="adusitFUn">审核通过</el-button>
        <el-button size="small" type="primary" v-if="isrejection"
        style="background-color: #0EC216;border: 1px solid #0EC216;"
        @click="rejectionFUn">审核驳回</el-button>
      </template>
      <el-button size="small" type="primary" plain @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import OpenCloseBox from './openclose.vue'

export default {
  name: "detailsDialog",
  data() {
    return {
      dialogVisible: false,
      obj: {},
      warrantObj: {},
      selectedItem: null,
      isAuditing: false,
    };
  },
  props: {
    orderInfo: {
      type: Object,
      default: {}
    },
    auditStatus:String,
    isrejection:{
      type: Boolean,
      default: false
    },
    feeOrderNewVoList: Object,
  },
  components: { OpenCloseBox },
  methods: {
    adjustFee() {
      this.isAuditing = !this.isAuditing;
    },
    adusitFUn() {
      this.$emit('adusitFUn')
    },
    rejectionFUn() {
      this.$emit('rejectionFUn')
    },
    updatedCost() {
      let newCost = {
        deptManagerFee : this.feeOrderNewVoList.deptManagerFee,
        feeOrder : this.feeOrderNewVoList.list,
        retailFee: this.feeOrderNewVoList.retailFee
      }
      this.$emit('updatedCost',newCost)
      this.isAuditing=false;
    },
    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];
    },
    selectItem(item) {
      this.selectedItem = item;
      document.getElementById(item).scrollIntoView({ behavior: "smooth" });
    },
    setBackupVisible: function (backupVisible) {
      this.selectedItem = 'gsxx'
      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) {
      if(this.orderInfo.isExternal==1){
        let url = process.env.BASE_URL +index.fileurl; // 3.创建一个临时的url指向blob对象
      fetch(url)
          .then((response) => response.blob())
          .then((blob) => {
            this.saveAs(
              blob,
              index.fileurl.substring(name + 1, index.fileurl.length)
            );
          })
          .catch((error) => { });

      }
      else{
        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);
  }
  
  .fixedTop {
    width: 100%;
    height: auto;
    // position: absolute;
    // top: 10px;
    background: linear-gradient(#fbe8e8, #fff 50%);
    border-radius: 5px;
    margin-bottom: 20px;
    list-style-type: none;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    li {
      width: auto;
      height: auto;

      .title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;

        p {
          font-size: 16px;
          color: #666;
          margin: 0 0 0 10px;
        }

        .img {
          width: 24px;
          height: 24px;

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

        margin-bottom: 5px;
      }

      p {
        margin: 10px 0 0 0;
        font-size: 20px;
        color: #333;
      }
    }
  }
}

.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: 25%;
    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;
  }
}

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