vue-insagent-pc/src/views/Letter/Orderlist.vue

<template>
  <div class="page">
    <el-form :inline="true" :model="pageRequest" class="demo-form-inline" size="small" label-width="130px"
      style="text-align:center;">
      <el-row>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="订单号">
            <el-input v-model="pageRequest.orderNo" placeholder="请输入车牌号" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="车牌号">
            <el-input v-model="pageRequest.licenseNo" placeholder="请输入车牌号" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="车架号">
            <el-input v-model="pageRequest.frameNo" placeholder="请输入车架号" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="投保人姓名">
            <el-input v-model="pageRequest.insuredName" placeholder="请输入投保人姓名" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="机构名称">
            <el-cascader class="widths" :options="institutionOptions" v-model="pageRequest.deptId" :props="{
              checkStrictly: true, value: 'id',
              label: 'name',
            }" @change="handleChange" clearable></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="订单状态">
            <el-select v-model="pageRequest.orderStatus" class="widths" clearable>
              <el-option v-for="val in optionsStatus" :key='val.dictValue' :label="val.dictTag" :value="val.dictValue" ></el-option>
<!--          <el-option label="报价中" value="0"></el-option>
              <el-option label="待核保" value="1"></el-option>
              <el-option label="已核保待缴费" value="2"></el-option>
              <el-option label="已承保" value="3"></el-option>
              <el-option label="人工核保" value="4"></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="日期">
            <el-date-picker v-model="value2" type="daterange" @change="monthChange" start-placeholder="开始日期"
              end-placeholder="结束日期" class="widths" value-format="yyyy-MM-dd" style="width: 220px;" clearable>
            </el-date-picker>

          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="3">
          <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table size="small" :data="pageResult" height="590" border v-loading="loading" highlight-current-row stripe
      @row-click="handleRowClick" ref="expandTable" :row-class-name="getRowClass"
      :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="demo-table-expand flex a-c  j-s" :style="{ width: width, flexWrap: 'wrap' }"
            v-for="(item, index) in scope.row.insAreaCompanyList" :key="index">
            <div style="width: 70px;">{{ item.inscompany }}</div>
            <div class="flex a-c j-s demo-table-expand-time">
              <div>总价： <span style="color:#ee7000;">{{ item.sumpremium }}</span></div>
              <div>交强险：<span style="color:#ee7000;">{{ item.jqpremium }}</span> </div>
              <div>商业险：<span style="color:#ee7000;">{{ item.sypremium }}</span></div>
              <div>{{ item.createtime }}</div>
            </div>
            <div slot="reference" class="name-wrapper flex a-c j-c" style="margin:0 20px; width: 100px;">

              <el-tag v-if="item.orderstatus == '0'" type="success" size="medium">报价中</el-tag>
              <el-tag v-if="item.orderstatus == '1'" type="warning" size="medium">待核保</el-tag>
              <el-tag v-if="item.orderstatus == '2'" type="danger" size="medium">已核保待缴费</el-tag>
              <el-tag v-if="item.orderstatus == '3'" type="danger" size="medium">已承保</el-tag>
              <el-tag v-if="item.orderstatus == '4'" type="danger" size="medium">核保退回</el-tag>
            </div>
            <div style="width: 220px;" class="flex a-c j-end">
              <el-button size="mini" type="text"
                v-if="item.orderstatus == '2' && ['恒邦财险', '众安财险', '中国人寿', '安盛天平', '紫金财险'].includes(item.inscompany)"
                @click="querystatus(item)" style="color:#f56c6c">缴费状态查询</el-button>
              <el-button size="mini" type="text"
                v-if="item.orderstatus == '2' && item.inscompany=='永诚财险'"
                @click="refreshStatus(item)" style="color:#f56c6c">缴费状态查询</el-button>
              <el-button size="mini" type="text" v-if="item.orderstatus == '2' && ['紫金财险'].includes(item.inscompany)"
                @click="cancelorder(item)" style="color:#f56c6c">撤单</el-button>
              <el-button size="mini" type="text" v-if="item.orderstatus == '2'" @click="carcode(scope.row, item)"
                style="color:#f56c6c">二维码</el-button>
              <el-button size="mini" type="text" @click="OrderDetails(scope.row, item)">查看详情
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderno" label="订单号" width="300" align="center"></el-table-column>
      <el-table-column prop="licenseno" label="车牌号" width="180" align="center"></el-table-column>
      <el-table-column prop="insuredname" label="被保险人姓名" align="center" width="150"></el-table-column>
      <el-table-column prop="product" label="投保险种" align="center" width="200"></el-table-column>
      <el-table-column prop="product" label="投保险种" align="center" width="200"></el-table-column>
      <el-table-column prop="orderstatus" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderstatus == '0'" type="success" size="small">报价中</el-tag>
          <el-tag v-if="scope.row.orderstatus == '1'" type="warning" size="small">待核保</el-tag>
          <el-tag v-if="scope.row.orderstatus == '2'" type="danger" size="small">已核保待缴费</el-tag>
          <el-tag v-if="scope.row.orderstatus == '3'" type="danger" size="small">已承保</el-tag>
          <el-tag v-if="scope.row.orderstatus == '4'" type="danger" size="small">核保退回</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createtime" label="录单日期" align="center" width="200"></el-table-column>
      <el-table-column label="操作" align="center" min-width="100" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="CloseEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-button size="mini" type="text" v-if="['0', '5'].includes(scope.row.orderstatus)"
                        @click="CloseQoute(scope.$index, scope.row)" style="color:#f56c6c">关闭报价</el-button> -->
          <!-- <el-button size="mini" type="text" v-if="scope.row.orderstatus == '0'"
                        @click="underwriting(scope.$index, scope.row)" style="color:#e6a23c">去核保</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <div class="block">
      <el-pagination @size-change="applyhandleSizeChange" @current-change="applyhandleCurrentChange"
        :current-page="pageNum" :page-size="pageSize" :page-sizes="[20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper" :total="totalSize"></el-pagination>
    </div>
    <el-dialog :visible.sync="codedialogVisible" width="400px" top="10vh" :before-close="handleClose"
      class="saomazhifucodeClass">
      <div class="ORcodebody">
        <div class="code_title dis align">
          <span>扫码付款</span>
        </div>
        <div style="padding:0 20px">
          <div class="ORcode ">
            <div style="padding:5px;position: relative;">
              <div v-if="['永安财险', '人保财险', '永诚财险', '中煤财险', '众安财险', '紫金财险', '中国人寿','国任财险'].includes(inscompany)" id="qrcode"
                ref="qrcode">
              </div>
              <img v-if="['恒邦财险', '安盛天平'].includes(inscompany)" :src="paycodeimg" alt="" style="width:100%">
            </div>
          </div>
        </div>
        <div class="ORtitle dis f-c align">
          <div>
            <span>保险公司：</span>
            <span>{{ inscompany }}</span>
          </div>
          <div>
            <span>车牌号：</span>
            <span>{{ licenseNo }}</span>
          </div>
          <div>
            <span>投保人：</span>
            <span>{{ applyName }}</span>
          </div>
          <div>
            <span style="color:#f75c00">总金额：</span>
            <span style="color:#f75c00">{{ sumpremium }}</span>
          </div>
          <div v-if="jqpremium">
            <span>交强：</span>
            <span>{{ jqpremium }}</span>
          </div>
          <div v-if="sypremium">
            <span>商业：</span>
            <span>{{ sypremium }}</span>
          </div>
          <div v-if="taxamount">
            <span>车船税：</span>
            <span>{{ taxamount }}</span>
          </div>
          <div v-if="jqstartdate">
            <span>交强险起保日期：</span>
            <span>{{ jqstartdate }}</span>
          </div>
          <div v-if="systartdate">
            <span>商业险起保日期：</span>
            <span>{{ systartdate }}</span>
          </div>
        </div>
        <div class="display">
          <el-button size="small" style="width:100px;" @click="codedialogVisible = false">
            关闭
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog fullscreen lock-scroll title="车辆报价信息详情" :visible.sync="dialogVisible" width="40%" center>
      <!-- 这是报价信息区域 -->
      <el-container>
        <el-row class="leftContainer">
          <el-col id="level1">
            <a href="#demo1" @click="jump('level1')">
              <i class="el-icon-truck u-f-sa"></i>
              <span class="u-f-ajc">车辆</span>
            </a>
          </el-col>
          <el-col id="level2">
            <a href="#demo2" @click="jump('level2')">
              <i class="el-icon-user u-f-sa"></i>
              <span class="u-f-ajc">关系人</span>
            </a>
          </el-col>
          <el-col id="level3">
            <a href="#demo3" @click="jump('level3')">
              <i class="el-icon-s-custom u-f-sa"></i>
              <span class="u-f-ajc">代理人</span>
            </a>
          </el-col>
          <el-col id="level4">
            <a href="#demo4" @click="jump('level4')">
              <i class="el-icon-goods u-f-sa"></i>
              <span class="u-f-ajc">优惠</span>
            </a>
          </el-col>
          <el-col id="level5">
            <a href="#demo5" @click="jump('level5')">
              <i class="el-icon-goods u-f-sa"></i>
              <span class="u-f-ajc">保单</span>
            </a>
          </el-col>
          <template v-if="(!!(orderInfo.jqappoint)) || (!!(orderInfo.syappoint))">
            <el-col id="level6">
              <a href="#demo6" @click="jump('level6')">
                <i class="el-icon-s-check u-f-sa"></i>
                <span class="u-f-ajc">特约</span>
              </a>
            </el-col>
          </template>
          <el-col id="level7">
            <a href="#demo7" @click="jump('level7')">
              <i class="el-icon-video-camera-solid u-f-sa"></i>
              <span class="u-f-ajc">影像</span>
            </a>
          </el-col>
          <el-col id="level8">
            <a href="#demo8" @click="jump('level8')">
              <i class="el-icon-video-camera-solid u-f-sa"></i>
              <span class="u-f-ajc">投保单号</span>
            </a>
          </el-col>
          <el-col id="level9" v-if="orderInfo.orderstatus == 3">
            <a href="#demo9" @click="jump('level9')">
              <i class="el-icon-video-camera-solid u-f-sa"></i>
              <span class="u-f-ajc">电子保单</span>
            </a>
          </el-col>
          <el-col id="level10">
            <a href="#demo10" @click="jump('level10')">
              <i class="el-icon-video-camera-solid u-f-sa"></i>
              <span class="u-f-ajc">配送信息</span>
            </a>
          </el-col>
        </el-row>

        <el-row class="rightContainer">
          <el-card id="demo1">
            <el-row class="header">
              <el-col>车辆信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row class="body">
              <el-row>
                <el-col :span="2">
                  <label>号牌号码</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="small" disabled v-model="orderInfo.carinfo.licenseNo"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>号牌种类</label>
                </el-col>
                <el-col :span="5">
                  <template v-if="orderInfo.carinfo.licenseTypeCode == '02'">
                    <el-input size="medium" disabled value="小型汽车号牌"></el-input>
                  </template>
                  <template v-if="orderInfo.carinfo.licenseTypeCode != '02'">
                    <el-input size="medium" disabled :value="'其它号牌' + orderInfo.carinfo.licenseTypeCode"></el-input>
                  </template>
                </el-col>
                <el-col :span="3">
                  <label>车架号</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.vinNo"></el-input>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>发动机号</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.engineNo"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>厂牌型号</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.brandName"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>车主</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.ownerinfo.name"></el-input>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>核定载客量</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.seatCount"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>是否过户</label>
                </el-col>
                <el-col :span="5">
                  <el-select disabled="" v-model="orderInfo.carinfo.transferFlag" placeholder="请选择" style="width: 100%;">
                    <el-option label="是" :value="true"></el-option>
                    <el-option label="否" :value="false"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="3">
                  <label>注册日期</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="registerDateFormat"></el-input>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>新车购置价</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.purchasePrice">
                  </el-input>
                </el-col>
                <el-col :span="3">
                  <label>车型编码</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.modelCode"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>发证日期</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="issueDateFormat"></el-input>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>排量(L)</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.exhaustScale">
                  </el-input>
                </el-col>
                <el-col :span="3">
                  <label>整备质量(KG)</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.completeKerbMass">
                  </el-input>
                </el-col>
                <el-col :span="3">
                  <label>能源种类</label>
                </el-col>
                <el-col :span="5">
                  <el-input size="medium" disabled v-model="orderInfo.carinfo.powertype"></el-input>
                </el-col>
              </el-row>
            </el-row>
          </el-card>

          <!-- 关系人 -->
          <el-card id="demo2">
            <el-row class="header">
              <el-col>关系人信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <div>
              <el-row class="u-f-ac bodyTitle"><label>车主</label></el-row>
              <el-row class="body">
                <el-row>
                  <el-col :span="2">
                    <label>证件类型</label>
                  </el-col>
                  <el-col :span="3">
                    <template v-if="orderInfo.ownerinfo.identifyType == '01'">
                      <el-input size="medium" disabled value="身份证"></el-input>
                    </template>
                    <template v-if="orderInfo.ownerinfo.identifyType != '01'">
                      <el-input size="medium" disabled :value="'其它证件类型' + orderInfo.ownerinfo.identifyType"></el-input>
                    </template>
                  </el-col>
                  <el-col :span="3">
                    <label>证件号码</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.ownerinfo.identifyNumber">
                    </el-input>
                  </el-col>
                  <el-col :span="3">
                    <label>姓名</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.ownerinfo.name"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <label>手机号</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.ownerinfo.mobile">
                    </el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="2">
                    <label>地址</label>
                  </el-col>
                  <el-col :span="9">
                    <el-input size="medium" disabled v-model="orderInfo.ownerinfo.addr"></el-input>
                  </el-col>
                </el-row>
              </el-row>

              <el-row class="u-f-ac bodyTitle"><label>投保人</label></el-row>
              <el-row class="body">
                <el-row>
                  <el-col :span="2">
                    <label>证件类型</label>
                  </el-col>
                  <el-col :span="3">
                    <template v-if="orderInfo.applyinfo.identifyType == '01'">
                      <el-input size="medium" disabled value="身份证"></el-input>
                    </template>
                    <template v-if="orderInfo.applyinfo.identifyType != '01'">
                      <el-input size="medium" disabled :value="'其它证件类型' + orderInfo.applyinfo.identifyType"></el-input>
                    </template>
                  </el-col>
                  <el-col :span="3">
                    <label>证件号码</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.applyinfo.identifyNumber">
                    </el-input>
                  </el-col>
                  <el-col :span="3">
                    <label>姓名</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.applyinfo.name"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <label>手机号</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.applyinfo.mobile">
                    </el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="2">
                    <label>地址</label>
                  </el-col>
                  <el-col :span="9">
                    <el-input size="medium" disabled v-model="orderInfo.applyinfo.addr"></el-input>
                  </el-col>
                </el-row>
              </el-row>

              <el-row class="u-f-ac bodyTitle"><label>被保险人</label></el-row>
              <el-row class="body">
                <el-row>
                  <el-col :span="2">
                    <label>证件类型</label>
                  </el-col>
                  <el-col :span="3">
                    <template v-if="orderInfo.insureinfo.identifyType == '01'">
                      <el-input size="medium" disabled value="身份证"></el-input>
                    </template>
                    <template v-if="orderInfo.insureinfo.identifyType != '01'">
                      <el-input size="medium" disabled :value="'其它证件类型' + orderInfo.insureinfo.identifyType"></el-input>
                    </template>
                  </el-col>
                  <el-col :span="3">
                    <label>证件号码</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.insureinfo.identifyNumber">
                    </el-input>
                  </el-col>
                  <el-col :span="3">
                    <label>姓名</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.insureinfo.name"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <label>手机号</label>
                  </el-col>
                  <el-col :span="3">
                    <el-input size="medium" disabled v-model="orderInfo.insureinfo.mobile">
                    </el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="2">
                    <label>地址</label>
                  </el-col>
                  <el-col :span="9">
                    <el-input size="medium" disabled v-model="orderInfo.insureinfo.addr"></el-input>
                  </el-col>
                </el-row>
              </el-row>
            </div>
          </el-card>

          <!-- 代理人 -->
          <el-card id="demo3">
            <el-row class="header">
              <el-col>代理人信息</el-col>
            </el-row>
            <el-divider></el-divider>

            <el-row class="body">
              <el-row>
                <el-col :span="2">
                  <label>代理人工号</label>
                </el-col>
                <el-col :span="3">
                  <el-input size="medium" disabled v-model="orderInfo.userid"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>代理人姓名</label>
                </el-col>
                <el-col :span="3">
                  <el-input size="medium" disabled v-model="orderInfo.username"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>代理人电话</label>
                </el-col>
                <el-col :span="3">
                  <el-input size="medium" disabled value="15234685241"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>代理人团队</label>
                </el-col>
                <el-col :span="3">
                  <el-input size="medium" disabled v-model="orderInfo.deptname"></el-input>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>代理人状态</label>
                </el-col>
                <el-col :span="3">
                  <el-input size="medium" disabled value="在职"></el-input>
                </el-col>
                <el-col :span="3">
                  <label>代理人归属</label>
                </el-col>
                <el-col :span="3">
                  <el-input size="medium" disabled v-model="orderInfo.deptid"></el-input>
                </el-col>
              </el-row>
            </el-row>
          </el-card>

          <!-- 优惠政策 -->
          <el-card id="demo4">
            <el-row class="header">
              <el-col>优惠政策</el-col>
            </el-row>
            <el-divider></el-divider>

            <el-row class="body">
              <el-row class="u-f-ac"
                style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;background: #F3F3F3;">
                <el-col class="u-f-ajc" :span="8">险种名称</el-col>
                <el-col class="u-f-ajc" :span="8">优惠比例</el-col>
                <el-col class="u-f-ajc" :span="8">优惠金额</el-col>
              </el-row>

              <el-row v-for="(riskItem) in orderInfo.riskinfo" :key="riskItem.riskCode + '2'"
                v-if="riskItem.riskCode == '0507'" class="u-f-ac"
                style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;">
                <el-col class="u-f-ajc" :span="8">交强险</el-col>
                <el-col class="u-f-ajc" :span="8">{{ orderInfo.jqdiscountrate }}%</el-col>
                <el-col class="u-f-ajc" :span="8">
                  {{ (riskItem.premium * orderInfo.jqdiscountrate / 100).toFixed(2) }}</el-col>
              </el-row>
              <el-row v-for="(riskItem) in orderInfo.riskinfo" :key="riskItem.riskCode + '3'"
                v-if="riskItem.riskCode == '0510'" class="u-f-ac"
                style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;">
                <el-col class="u-f-ajc" :span="8">商业险</el-col>
                <el-col class="u-f-ajc" :span="8">{{ orderInfo.sydiscountrate }}%</el-col>
                <el-col class="u-f-ajc" :span="8">
                  {{ (riskItem.premium * orderInfo.sydiscountrate / 100).toFixed(2) }}</el-col>
              </el-row>

            </el-row>
          </el-card>

          <!-- 正在报价的保险公司 -->
          <el-card id="demo5">
            <el-row class="header">
              <el-col>报价方案</el-col>
            </el-row>
            <el-divider></el-divider>

            <el-row class="u-f-ac bodyTitle" style="margin-bottom: 20px;"><label>订 单 号
                &nbsp;&nbsp;&nbsp;&nbsp; {{ orderInfo.orderno }}</label></el-row>

            <el-row class="u-f-ac bodyTitle" style="margin-bottom: 20px;"><label
                style="margin: 0px 15px;font-weight: bold;">投保险种 &nbsp;&nbsp;
                {{ orderInfo.product }}</label></el-row>

            <el-row class="u-f-ac bodyTitle" style="margin-bottom: 20px;"><label>报价结果</label></el-row>
            <el-row class="body">
              <el-row style="border-bottom: 1px solid #DDDDDD;padding-bottom: 10px;">
                <el-col class="u-f-ajc" :span="2">报价公司</el-col>
                <el-col class="u-f-ajc" :span="5" v-if="orderInfo.product != '单商业'">交强险</el-col>
                <el-col class="u-f-ajc" :span="5" v-if="orderInfo.product != '单商业'">车船税</el-col>
                <el-col class="u-f-ajc" :span="5" v-if="orderInfo.product != '单交强'">商业险</el-col>
                <el-col class="u-f-ajc" :span="5">总价</el-col>
                <el-col class="u-f-ajc" :span="2">操作</el-col>
              </el-row>
              <el-row>
                <el-col class="u-f-ajc" :span="2">{{ orderInfo.inscompany }}
                </el-col>
                <el-col class="u-f-ajc" :span="5" v-if="orderInfo.product != '单商业'">
                  {{ orderInfo.jqpremium }}</el-col>
                <el-col class="u-f-ajc" :span="5" v-if="orderInfo.product != '单商业'">
                  {{ orderInfo.taxamount }}</el-col>
                <el-col class="u-f-ajc" :span="5" v-if="orderInfo.product != '单交强'">
                  {{ orderInfo.sypremium }}</el-col>
                <el-col class="u-f-ajc" :span="5">{{ orderInfo.sumpremium }}</el-col>
                <el-col class="u-f-ajc" :span="2">
                  <div class="u-f-ajc" style="color: #0086B3;cursor: pointer; " @click="showInsureList = !showInsureList">
                    {{ showInsureList ? "收起" : "展开" }}
                  </div>
                </el-col>
              </el-row>
              <template v-if="showInsureList">
                <el-row style="margin: 20px 40px;">
                  <el-row class="u-f-ac"
                    style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;background: #F3F3F3;">
                    <el-col :span="8" class="u-f-ajc">险种名称</el-col>
                    <el-col :span="8" class="u-f-ajc">保额</el-col>
                    <el-col :span="8" class="u-f-ajc">保费</el-col>
                  </el-row>

                  <div v-for="(riskItem) in orderInfo.riskinfo" :key="riskItem.riskCode + '4'"
                    v-if="riskItem.riskCode == '0507'">
                    <el-row class="u-f-ac" style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;">
                      <el-col :span="8" class="u-f-ajc">
                        <label class="disabledInput">交强险</label>
                      </el-col>
                      <el-col :span="8" class="u-f-ajc">
                        <label class="disabledInput">投保</label>
                      </el-col>
                      <el-col :span="8" class="u-f-ajc">
                        <label class="disabledInput">{{ riskItem.premium }}</label>
                      </el-col>
                    </el-row>
                    <el-row class="u-f-ac" style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;">
                      <el-col :span="8" class="u-f-ajc">
                        <label class="disabledInput">车船税</label>
                      </el-col>
                      <el-col :span="8" class="u-f-ajc"> </el-col>
                      <el-col :span="8" class="u-f-ajc">
                        <label class="disabledInput">{{ orderInfo.taxamount }}</label>
                      </el-col>
                    </el-row>
                  </div>
                  <el-row class="u-f-ac" style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;"
                    v-for="(insureItem, insureIndex) in global.insureList" :key="insureIndex"
                    v-if="insureItem.amount != 0">
                    <el-col :span="8" class="u-f-ajc">
                      <label class="disabledInput">{{ insureItem.kindName }}</label>
                    </el-col>
                    <el-col :span="8" class="u-f-ajc" v-for="(amtItem, amtIndex) in insureItem.amtList" :key="amtIndex"
                      v-if="amtItem.value == insureItem.amount">
                      <label class="disabledInput">{{ amtItem.label }}</label>
                    </el-col>
                    <el-col :span="8" class="u-f-ajc">
                      <label class="disabledInput">{{ insureItem.coveragePremium }}</label>
                    </el-col>
                  </el-row>
                </el-row>
              </template>
            </el-row>
            <el-row class="u-f-ac bodyTitle"><label>保费合计</label></el-row>
            <el-row class="body">
              <el-row style="margin-top: 20px;" class="u-f u-f-ac">
                <label style="margin: 0px 20px 0 15px;width: 80px;">保费合计</label>
                <el-input style="width:300px" disabled size="medium" v-model="orderInfo.sumpremium">
                </el-input>
              </el-row>
            </el-row>
          </el-card>
          <!-- 特约 -->
          <template v-if="(!!(orderInfo.jqappoint)) || (!!(orderInfo.syappoint))">
            <el-card id="demo6">
              <el-row class="header">
                <el-col>特约</el-col>
              </el-row>
              <el-divider></el-divider>
              <template v-if="!!(orderInfo.jqappoint)">
                <el-row class="u-f-ac bodyTitle">
                  <label>交强险特约</label>
                </el-row>
                <el-row class="body">
                  <el-row>
                    <el-col :span="4">
                      <label style="text-align: center;">交强险特别约定</label>
                    </el-col>
                    <el-col :span="20">
                      <el-input type="textarea" :rows="2" disabled placeholder="请输入内容" v-model="orderInfo.jqappoint">
                      </el-input>
                    </el-col>
                  </el-row>
                </el-row>
              </template>
              <template v-if="!!(orderInfo.syappoint)">
                <el-row class="u-f-ac bodyTitle">
                  <label>商业险特约</label>
                </el-row>
                <el-row class="body">
                  <el-row>
                    <el-col :span="4">
                      <label style="text-align: center;">商业险特别约定</label>
                    </el-col>
                    <el-col :span="20">
                      <el-input type="textarea" :rows="2" disabled placeholder="请输入内容" v-model="orderInfo.syappoint">
                      </el-input>
                    </el-col>
                  </el-row>
                </el-row>
              </template>
            </el-card>
          </template>

          <!-- 影像 -->
          <el-card id="demo7">
            <el-row class="header">
              <el-col>影像</el-col>
            </el-row>
            <el-divider></el-divider>
            <div style="margin-bottom: 10px;">
              <el-row class="u-f-ac bodyTitle">
                <label @click="pic1Control = !pic1Control">行驶证影像</label>
              </el-row>
              <el-row class="body" v-show="pic1Control">
                <el-row style="padding:10px;">
                  <viewer :images="carImageList">
                    <img class="imageStyle" v-for="(imageItem, imageIndex) in carImageList" :src="imageItem"
                      :key="imageIndex" />
                  </viewer>
                </el-row>
              </el-row>
            </div>
            <div style="margin-bottom: 10px;">
              <el-row class="u-f-ac bodyTitle">
                <label @click="pic2Control = !pic2Control">车主身份证影像</label>
              </el-row>
              <el-row class="body" v-show="pic2Control">
                <el-row style="padding:10px;">
                  <viewer :images="ownerImageList">
                    <img class="imageStyle" v-for="(imageItem, imageIndex) in ownerImageList" :src="imageItem"
                      :key="imageIndex" />
                  </viewer>
                </el-row>
              </el-row>
            </div>
            <div style="margin-bottom: 10px;">
              <el-row class="u-f-ac bodyTitle">
                <label @click="pic3Control = !pic3Control">投保人身份证影像</label>
              </el-row>
              <el-row class="body" v-show="pic3Control">
                <el-row style="padding:10px;">
                  <viewer :images="policyImageList">
                    <img class="imageStyle" v-for="(imageItem, imageIndex) in policyImageList" :src="imageItem"
                      :key="imageIndex" />
                  </viewer>
                </el-row>
              </el-row>
            </div>
            <div style="margin-bottom: 10px;">
              <el-row class="u-f-ac bodyTitle">
                <label @click="pic4Control = !pic4Control">被保人身份证影像</label>
              </el-row>
              <el-row class="body" v-show="pic4Control">
                <el-row style="padding:10px;">
                  <viewer :images="insuredImageList">
                    <img class="imageStyle" v-for="(imageItem, imageIndex) in insuredImageList" :src="imageItem"
                      :key="imageIndex" />
                  </viewer>
                </el-row>
              </el-row>
            </div>
            <div style="margin-bottom: 10px;">
              <el-row class="u-f-ac bodyTitle">
                <label @click="pic5Control = !pic5Control">验车照影像</label>
              </el-row>
              <el-row class="body" v-show="pic5Control">
                <el-row style="padding:10px;">
                  <viewer :images="carCheckImageList">
                    <img class="imageStyle" v-for="(imageItem, imageIndex) in carCheckImageList" :src="imageItem"
                      :key="imageIndex" />
                  </viewer>
                </el-row>
              </el-row>
            </div>
          </el-card>

          <el-card id="demo8">
            <el-row class="header">
              <el-col>投保单号</el-col>
            </el-row>
            <el-divider></el-divider>

            <el-row class="u-f-ac bodyTitle">
              <label>投保单号</label>
            </el-row>
            <el-row class="body">
              <el-row>
                <el-col :span="2" v-if="!!orderInfo.jqapplyno">
                  <label>交强险投保单号</label>
                </el-col>
                <el-col :span="3" v-if="!!orderInfo.jqapplyno">
                  <el-input disabled size="medium" v-model="orderInfo.jqapplyno"></el-input>
                </el-col>
                <el-col :span="3" v-if="!!orderInfo.syapplyno">
                  <label>商业险投保单号</label>
                </el-col>
                <el-col :span="3" v-if="!!orderInfo.syapplyno">
                  <el-input disabled size="medium" v-model="orderInfo.syapplyno"></el-input>
                </el-col>
              </el-row>
            </el-row>
            <el-row class="u-f-ac bodyTitle">
              <label>保单号</label>
            </el-row>
            <el-row class="body">
              <el-row>
                <el-col :span="2" v-if="!!orderInfo.jqpolicyno">
                  <label>交强险保单号</label>
                </el-col>
                <el-col :span="3" v-if="!!orderInfo.jqpolicyno">
                  <el-input disabled size="medium" v-model="orderInfo.jqpolicyno"></el-input>
                </el-col>
                <el-col :span="3" v-if="!!orderInfo.sypolicyno">
                  <label>商业险保单号</label>
                </el-col>
                <el-col :span="3" v-if="!!orderInfo.sypolicyno">
                  <el-input disabled size="medium" v-model="orderInfo.sypolicyno"></el-input>
                </el-col>
              </el-row>
            </el-row>
          </el-card>

          <el-card id="demo9" v-if="orderInfo.orderstatus == 3">
            <el-row class="header">
              <el-col>电子保单</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row class="u-f-ac bodyTitle">
              <label>电子保单管理</label>
            </el-row>
            <el-row class="body" style="padding:10px 20px;">
              <el-row v-for="(oldfileItem, oldfileIndex) in oldfileList" :key="oldfileIndex">
                <el-col :span="2" style="margin-right: 15px;">
                  <label>{{ oldfileItem.fileTitle }}:</label>
                </el-col>
                <el-col :span="6" class="u-f u-f-column">
                  <el-row>
                    <div class="u-f u-f-jsb u-f-ac" style="width: 170px;">
                      <div
                        style="height: 36px;line-height: 36px; width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                        {{ licenseNo }}</div>
                      <el-button style="cursor: pointer;" type="text" @click="viewfile(oldfileItem)">下载
                      </el-button>
                    </div>
                  </el-row>
                </el-col>
              </el-row>
            </el-row>
          </el-card>
          <el-card id="demo10">
            <el-row class="header">
              <el-col>配送信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row class="u-f-ac bodyTitle">
              <label>保单形式</label>
            </el-row>
            <el-row class="body">
              <el-row style="margin-left: 60px;">
                <el-radio-group disabled v-model="orderInfo.policytype">
                  <el-radio label="纸质">纸质</el-radio>
                  <el-radio label="电子">电子</el-radio>
                </el-radio-group>
              </el-row>
            </el-row>
            <template v-if="orderInfo.policytype == '纸质'">
              <el-row class="u-f-ac bodyTitle">
                <label>配送方式</label>
              </el-row>
              <el-row class="body">
                <el-row style="margin-left: 60px;">
                  <el-radio-group disabled v-model="orderInfo.mailtype">
                    <el-radio label="邮寄">邮寄</el-radio>
                    <!-- <el-radio label="网点自取">网点自取</el-radio> -->
                  </el-radio-group>
                </el-row>
              </el-row>
            </template>

            <template
              v-if="(orderInfo.policytype == '电子') || (orderInfo.policytype == '纸质' && orderInfo.mailtype == '邮寄')">
              <el-row class="u-f-ac bodyTitle">
                <label>配送信息</label>
              </el-row>
              <el-row class="body">
                <template v-if="orderInfo.policytype == '电子'">
                  <el-row>
                    <el-col :span="2">
                      <label>邮箱地址</label>
                    </el-col>
                    <el-col :span="3">
                      <el-input disabled size="medium" v-model="orderInfo.mailaddress"></el-input>
                    </el-col>
                  </el-row>
                </template>

                <template v-if="orderInfo.policytype == '纸质' && orderInfo.mailtype == '邮寄'">
                  <el-row>
                    <el-col :span="2">
                      <label>收件人</label>
                    </el-col>
                    <el-col :span="3">
                      <el-input disabled size="medium" v-model="orderInfo.receiptname"></el-input>
                    </el-col>
                    <el-col :span="3">
                      <label>手机号</label>
                    </el-col>
                    <el-col :span="3">
                      <el-input disabled size="medium" v-model="orderInfo.receiptphone">
                      </el-input>
                    </el-col>
                    <el-col :span="3">
                      <label>配送地址</label>
                    </el-col>
                    <el-col :span="3">
                      <el-input disabled size="medium" v-model="orderInfo.mailaddress"></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="u-f-ac bodyTitle" style="margin-bottom: 0;">
                    <label>快递公司录入</label>
                  </el-row>
                  <el-row class="body">
                    <el-row>
                      <el-col :span="2">
                        <label>快递号</label>
                      </el-col>
                      <el-col :span="3">
                        <el-input disabled size="medium" v-model="orderInfo.courierno">
                        </el-input>
                      </el-col>
                      <el-col :span="2">
                        <label>快递公司</label>
                      </el-col>
                      <el-col :span="3">
                        <el-input disabled size="medium" v-model="orderInfo.couriercompany">
                        </el-input>
                      </el-col>
                    </el-row>
                  </el-row>
                </template>
              </el-row>
            </template>
          </el-card>
        </el-row>
      </el-container>
      <span slot="footer" class="dialog-footer"
        style="position: fixed;bottom: 0px;left:0px;background: #fff;width: 100%;padding: 10px 0px;box-shadow: 0 -1px 0 0 #ddd;">
        <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  pathToBase64,
  base64ToPath
} from '@/common/image-tools-base64.js';
import  rawCitiesData from '../../assets/js/citydata';
import Cookies from "js-cookie";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      value2: "",
      optionsStatus:[],
      dialogVisible: false,
      codedialogVisible: false,
      loading: false,
      pageNum: 1,//页数
      pageSize: 20,//条数
      totalSize: null,//总数
      peopleid: "",//工号
      pageResult: [],//列表
      pageRequest: {  //查询的默认条件
        orderNo: "",
        frameNo: "",
        insuredName: "",
        licenseNo: "",
        orderStatus: "",
        userId: "",
        endDate: "",
        startDate: "",
        pageNum: 1,
        pageSize: 20,
        deptId: "",
      },
      orderInfo: {
        //选中的订单
        ownerinfo: {},
        carinfo: {},
        applyinfo: {},
        insureinfo: {},
        kindinfo: [],
        riskinfo: [],
        ownerinfo: {},
      },
      carImageList: [], //车辆影像
      ownerImageList: [], //车主影像
      policyImageList: [], //投保人影像
      insuredImageList: [], //被保人影像
      carCheckImageList: [], //验车照影像
      // 影像控制
      pic1Control: false,
      pic2Control: false,
      pic3Control: false,
      pic4Control: false,
      pic5Control: false,
      showInsureList: false, //是否展示具体险种信息
      oldfileList: [],//电子保单数据
      inscompany: "", //保险公司名称
      licenseNo: "", //车牌号
      applyName: "", //车主名字
      orderstatus: "", //订单状态
      sumpremium: "", //保费合计
      jqpremium: "",//交强
      sypremium: "",//商业
      taxamount: "",//车船税
      jqstartdate: "",//交强时间
      systartdate: "",//商业时间
      mobile: "",//投保人手机号
      qrcode: null,
      paycodeimg: "",
      userid: "",
      downloadstatus: 0,
      expands: [],
      institutionOptions: [],
      width: document.documentElement.clientWidth,
    }
  },
  created() {
    this.$api.insCompany.dicType('insOrderStatus').then(res=>{
      this.optionsStatus=res.data.ddList
    })
    this.peopleid = Cookies.get('user');
    this.pageRequest.deptId = JSON.parse(localStorage.getItem('user_data')).deptId;
    this.$api.dept.findDeptTree().then((res) => {
      this.institutionOptions = res.data;
    });
    if (this.peopleid != 'admin') {
      this.pageRequest.userId = this.peopleid;
      this.findPage();
    } else {
      this.pageRequest.userId = 'admin';
    }
  },
  mounted() {
    window.addEventListener('resize', this.getDimensions);
  },
  unmounted() {
    window.removeEventListener('resize', this.getDimensions);
  },
  computed: {
    allinsOption() {
      let cloneData = JSON.parse(JSON.stringify(this.allIns)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(
          (child) => father.id == child.parentId
        ); // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
        return father.parentId == 0; //返回第一层
      });
    },
    registerDateFormat() {
      let date = new Date(this.orderInfo.carinfo.registerDate);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return year + "-" + month + "-" + day;
    },
    issueDateFormat() {
      let date = new Date(this.orderInfo.carinfo.issueDate);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return year + "-" + month + "-" + day;
    },
  },
  methods: {
    getRowClass(scope, rowIndex) {
      if (scope.row.insAreaCompanyList.length == 0) {  //判断当前行是否有子数据或者根据实际情况设置
        return 'row-expand-cover'
      }
    },
    //联级选择器触发事件
    handleChange(val) {
      if (val.length !== 0) {
        this.pageRequest.deptId = val.at(-1);
      }
      else {
        this.pageRequest.deptId = ''
      }
    },
    getDimensions() {
      this.width = document.documentElement.clientWidth - 350 + 'px';
    },
    //表格行点击下拉事件
    handleRowClick(row) {
      if (row.insAreaCompanyList.length > 0) {
        row.expanded = !row.expanded;
        this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
      }
    },
    //订单修改
    CloseEdit(index, row) {
      this.$api.letter.getByOrderNo({ orderNo: row.orderno }).then((res) => {
        this.$router.push({ path: '/letter/letter', query: { data: res.data } })
      })
    },
    //关闭报价
    CloseQoute(index, row) {
      this.$confirm("是否确认关闭" + row.orderno + "订单？")
        .then((_) => {
          this.$api.task.closeOrderno({ quoteno: row.orderno }).then((res) => {
            if (res.code == 200) {
              this.findPage();
              this.$message.success("已成功关闭订单");
            }
          });
        })
        .catch((_) => {
          this.$message.info("已取消关闭订单");
        });
    },
    //二维码生成插件
    creatQrCode(text) {
      if (this.qrcode) {
        this.qrcode.clear();
        this.qrcode.makeCode(text);
      } else {
        this.qrcode = new QRCode("qrcode", {
          text: text,
          width: 180,
          height: 180,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }

    },
     //y永城查询缴费状态
    refreshStatus(item){
      this.$api.letter.orderStatusyongcheng( item.id ).then(res => {
        if(res.code==200){
          this.$message({ message:res.msg?res.msg:'已刷新状态', type: "success" })
          this.loading = true;
            this.$api.letter.queryOrders(this.pageRequest).then((res) => {
              if (res.code == "200") {
                this.loading = false;
                this.pageResult = res.data.content;
                this.pageNum = res.data.pageNum;
                this.totalSize = res.data.totalSize;
                this.pageResult.forEach(val => {
                  this.$set(val, "expanded", false);
                });
              } else {
                this.loading = false;
              }
            })
        }
      })
    },
    //查询缴费状态
    querystatus(item) {
      if (item.inscompany == '紫金财险') {
        this.$api.letter.getOrderDetail({ companyId: item.id }).then(res => {
          if (res.code == '200') {
            this.$message({ message: res.msg, type: "success" })
            this.loading = true;
            this.$api.letter.queryOrders(this.pageRequest).then((res) => {
              if (res.code == "200") {
                this.loading = false;
                this.pageResult = res.data.content;
                this.pageNum = res.data.pageNum;
                this.totalSize = res.data.totalSize;
                this.pageResult.forEach(val => {
                  this.$set(val, "expanded", false);
                });
              } else {
                this.loading = false;
              }
            })
          } else {
            this.$message({ message: res.msg, type: "error" })
          }
        })
      } else {
        this.$api.letter.pychonverifyPayment({ subOrderNo: item.id }).then(res => {
          if (res.code == '200') {
            this.$message({ message: "订单支付成功，正在更改状态", type: "success" })
            this.loading = true;
            this.$api.letter.queryOrders(this.pageRequest).then((res) => {
              if (res.code == "200") {
                this.loading = false;
                this.pageResult = res.data.content;
                this.pageNum = res.data.pageNum;
                this.totalSize = res.data.totalSize;
                this.pageResult.forEach(val => {
                  this.$set(val, "expanded", false);
                });
              } else {
                this.loading = false;
              }
            })
          } else {
            this.$message({ message: res.msg, type: "error" })

          }
        })
      }

    },
    cancelorder(item) {
      this.$api.letter.zijincancelorder({ companyId: item.id }).then(res => {

      })
    },
    //二维码
    carcode(row, item) {
      let params = {
        companyId: item.id,
      }
      this.$api.letter.getByCompanyId(params).then(res => {
        if (res.code == '200') {
          this.inscompany = res.data.inscompany;//保险公司
          this.sumpremium = res.data.sumpremium;//总价
          this.licenseNo = res.data.carinfo.licenseNo;//车牌号
          this.applyName = res.data.insuredname;//车主
          this.jqpremium = res.data.jqpremium;//交强
          this.sypremium = res.data.sypremium;//商业
          this.taxamount = res.data.taxamount;//车船税
          this.jqstartdate = res.data.jqstartdate;//交强起保日期
          this.systartdate = res.data.systartdate;//商业起保日期
          this.mobile = res.data.applyinfo.mobile;//投保人手机号
          switch (item.inscompany) {
            case "永安财险":
              let url = this.global.h5BaseUrl + '/#/pages/carInsure1/yonganCode?companyId=' + item.id + '&mobile=' + this.mobile;
              this.$nextTick(() => {
                this.creatQrCode(url);
              });
              break;
            case "人保财险":
            case "中煤财险":
            case "永诚财险":
            case "中国人寿":
            case "众安财险":
            case "国任财险":
            case "紫金财险":
              this.$nextTick(() => {
                this.creatQrCode(res.data.paymentLink);
              });
              break;
            case "恒邦财险":
              this.paycodeimg = res.data.paymentLink;
              break;
            case "安盛天平":
              let anresult = res.data.paymentLink.replace(/[\r\n]/g, "");
              let animgBase64 = `data:image/png;base64,${anresult}`;
              base64ToPath(animgBase64)
                .then(path => {
                  this.paycodeimg = path;
                })
              break;
            default:
              this.$message({ message: "识别不到保险公司，请检查", type: "warning" })
          }
          this.codedialogVisible = true;

        } else {
          this.$message({ message: res.msg, type: "warning" })
        }
      })

    },
    //应用详情
    OrderDetails(dy, item) {
      this.carImageList = [];
      this.ownerImageList = []; //车主影像
      this.policyImageList = []; //投保人影像
      this.insuredImageList = []; //被保人影像
      this.carCheckImageList = []; //验车照影像
      // 影像控制
      this.pic1Control = false;
      this.pic2Control = false;
      this.pic3Control = false;
      this.pic4Control = false;
      this.pic5Control = false;

      for (let i = 0; i < this.global.insureList.length; i++) {
        this.global.insureList[i].coveragePremium = "";
        this.global.insureList[i].amount = 0;
      }
      let params = {
        companyId: item.id,
      }
      this.$api.letter.getByCompanyId(params).then((res) => {
        if (res.code == 200) {
          this.licenseNo = res.data.licenseno;//车牌号
          this.inscompany = res.data.inscompany;//保险公司
          Object.assign(this.orderInfo, res.data);
          for (let i = 0; i < this.orderInfo.riskinfo.length; i++) {
            if (this.orderInfo.riskinfo[i].riskCode == "0510") {
              for (let j = 0; j < this.orderInfo.kindinfo.length; j++) {
                for (let m = 0; m < this.global.insureList.length; m++) {
                  if (
                    this.orderInfo.kindinfo[j].kindCode ==
                    this.global.insureList[m].kindCode
                  ) {
                    this.global.insureList[m].coveragePremium =
                      this.orderInfo.kindinfo[j].coveragePremium;
                    if (this.orderInfo.kindinfo[j].kindCode == "B") {
                      this.global.insureList[9].amtList[0].value =
                        this.orderInfo.kindinfo[j].amount;
                    }
                    if (this.orderInfo.kindinfo[j].kindCode == "A") {
                      this.global.insureList[m].amount = "1";
                    } else if (this.global.insureList[m].kindCode == "D4") {
                      this.global.insureList[m].amount =
                        this.orderInfo.kindinfo[j].unitAmount;
                    } else if (
                      this.global.insureList[m].isMainRisk ||
                      this.global.insureList[m].kindCode == "BD" ||
                      this.global.insureList[m].kindCode == "L"
                    ) {
                      this.global.insureList[m].amount =
                        this.orderInfo.kindinfo[j].amount;
                    } else {
                      this.global.insureList[m].amount =
                        this.orderInfo.kindinfo[j].deductibleRate;
                    }
                  }
                }
              }
            }
          }
          // 获取影像
          this.$api.letter.findByQuoteNo(dy.quoteno).then((resImage) => {
            Object.keys(resImage.data).forEach((keys) => {
              if (resImage.data[keys]) {
                resImage.data[keys].url = process.env.BASE_URL + resImage.data[keys].url;
                switch (keys) {
                  case 'C01':
                  case 'D01':
                    this.carImageList.push(resImage.data[keys].url)
                    break;
                  case 'C02':
                  case 'D02':
                    this.ownerImageList.push(resImage.data[keys].url)
                    break;
                  case 'C03':
                  case 'D03':
                    this.policyImageList.push(resImage.data[keys].url)
                    break;
                  case 'C04':
                  case 'D04':
                    this.insuredImageList.push(resImage.data[keys].url)
                    break;
                  default:
                    break;
                }
              }
            })
          })
          this.pic1Control = false;
          this.pic2Control = false;
          this.pic3Control = false;
          this.pic4Control = false;
          this.pic5Control = false;
          this.oldfileList = [];
          switch (res.data.inscompany) {
            case "永安财险":
              if (this.orderInfo.jqpolicyno) {
                this.$api.letter.getPolicyPrint({
                  companyId: item.id,
                  policytype: "jq"
                }).then((res) => {//交强保单
                  if (res.data) {
                    let result = res.data.replace(/[\r\n]/g, "");
                    let pdfBase64 = `data:application/pdf;base64,${result}`;
                    base64ToPath(pdfBase64).then((path) => {
                      this.oldfileList.push({
                        fileTitle: "交强电子保单",
                        filename: this.orderInfo.jqpolicyno,
                        fileurl: path,
                      });
                    });
                  }
                });
                this.$api.letter.getPolicyPrint2({
                  companyId: item.id,
                  policytype: "jq"
                }).then((res) => {//交强保单
                  if (res.data) {
                    let result = res.data.replace(/[\r\n]/g, "");
                    let pdfBase64 = `data:application/pdf;base64,${result}`;
                    base64ToPath(pdfBase64).then((path) => {
                      this.oldfileList.push({
                        fileTitle: "交强电子标志",
                        filename: this.orderInfo.jqpolicyno,
                        fileurl: path,
                      });
                    });
                  }
                });
              }
              if (this.orderInfo.sypolicyno) {
                this.$api.letter.getPolicyPrint({
                  companyId: item.id,
                  policytype: "sy"
                }).then((res) => {//商业保单
                  if (res.data) {
                    let result = res.data.replace(/[\r\n]/g, "");
                    let pdfBase64 = `data:application/pdf;base64,${result}`;
                    base64ToPath(pdfBase64).then((path) => {
                      this.oldfileList.push({
                        fileTitle: "商业电子保单",
                        filename: this.orderInfo.sypolicyno,
                        fileurl: path,
                      });
                    });
                  }
                });
              }
              break;
            case "中煤财险":
              if (this.orderInfo.jqpolicyno) {
                this.$api.letter.ZhongmeigetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0507",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "交强电子保单",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data[0],
                    });
                  }
                })
                this.$api.letter.ZhongmeigetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0507",
                  type: '1',// 1：标志
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "交强电子标志",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data[0],
                    });
                  }
                })
              }
              if (this.orderInfo.sypolicyno) {
                this.$api.letter.ZhongmeigetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0510",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "商业电子保单",
                      filename: this.orderInfo.sypolicyno,
                      fileurl: res.data[0],
                    });
                  }
                })
              }
              break;
            case "永诚财险":
              if (this.orderInfo.jqpolicyno) {
                this.$api.letter.yongchenggetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0507",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "交强电子保单",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data.jqUrl,
                    });
                    if (res.data.jqFlagUrl) {
                      this.oldfileList.push({
                        fileTitle: "交强电子标志",
                        filename: this.orderInfo.jqpolicyno,
                        fileurl: res.data.jqFlagUrl,
                      });
                    }
                  }
                })
              }
              if (this.orderInfo.sypolicyno) {
                this.$api.letter.yongchenggetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0510",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "商业电子保单",
                      filename: this.orderInfo.sypolicyno,
                      fileurl: res.data.syUrl,
                    });
                  }
                })
              }
              break;
              case "国任财险":
              if (this.orderInfo.jqpolicyno) {
                this.$api.letter.guoRengetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0507",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "交强电子保单",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data.jqUrl,
                    });
                    if (res.data.jqFlagUrl) {
                      this.oldfileList.push({
                        fileTitle: "交强电子标志",
                        filename: this.orderInfo.jqpolicyno,
                        fileurl: res.data.jqFlagUrl,
                      });
                    }
                  }
                })
              }
              if (this.orderInfo.sypolicyno) {
                this.$api.letter.guoRengetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0510",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "商业电子保单",
                      filename: this.orderInfo.sypolicyno,
                      fileurl: res.data.syUrl,
                    });
                  }
                })
              }
              break;
            case "紫金财险":
              if (this.orderInfo.jqpolicyno) {
                this.$api.letter.zijingetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0507",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "交强电子保单",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data,
                    });
                  }
                })
                this.$api.letter.zijingetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0507",
                  type: '1',//1:标志
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "交强电子标志",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data,
                    });
                  }
                })
              }
              if (this.orderInfo.sypolicyno) {
                this.$api.letter.zijingetPolicyPrint({
                  companyId: item.id,
                  riskCode: "0510",
                  type: '2',//2:保单
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "商业电子保单",
                      filename: this.orderInfo.sypolicyno,
                      fileurl: res.data,
                    });
                  }
                })
              }
              if (this.orderInfo.crossInsurance.length > 0) {
                console.log(1)
                this.orderInfo.crossInsurance.map(ele => {
                  this.$api.letter.zijingetPolicyPrint({
                    companyId: item.id,
                    policyNumber: ele.policyNumber,
                    riskCode: "0513",
                    type: '2',//2:保单
                  }).then(res => {
                    if (res.data) {
                      this.oldfileList.push({
                        fileTitle: "驾意险保单",
                        filename: ele.policyNumber,
                        fileurl: res.data,
                      });
                    }
                  })
                })
              }
              break;
            case "恒邦财险":
            case "安盛天平":
            case "中国人寿":
            case "众安财险":
              if (this.orderInfo.jqpolicyno) {
                this.$api.letter.pythongetPolicyPrint({
                  subOrderNo: item.id,
                }).then(res => {
                  if (res.data) {
                    this.oldfileList.push({
                      fileTitle: "交强电子保单",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data.jqxPolicyUrl,
                    });
                    this.oldfileList.push({
                      fileTitle: "交强电子标志",
                      filename: this.orderInfo.jqpolicyno,
                      fileurl: res.data.jqxFlagUrl,
                    });
                  }
                  if (res.data.syxPolicyUrl) {
                    this.oldfileList.push({
                      fileTitle: "商业电子保单",
                      filename: this.orderInfo.sypolicyno,
                      fileurl: res.data.syxPolicyUrl,
                    });
                  }
                  if (res.data.jyxPolicyUrl) {
                    this.oldfileList.push({
                      fileTitle: "驾意险保单",
                      filename: 'xxxxxxxxxxxxxxxxxxxxxx',
                      fileurl: res.data.jyxPolicyUrl,
                    });
                  }
                })
              }
              break;
            default:
          }
          this.showInsureList = false;
          this.dialogVisible = true; //在页面上显示订单
        } else {
          this.$message.error("订单获取失败");
        }
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      // const isLt2M = file.size / 1024 / 1024 < 0.2;
      if (!isJPG) {
        this.$message({
          message: "上传图片只能是 JPG 或者 PNG 格式!",
          type: "error",
          duration: 2000,
        });
      }
      return isJPG;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    httpRequest(options) {
      let file = options.file;
      let filename = options.filename;
      let reader = new FileReader();
      if (file) {
        reader.readAsDataURL(file);
      }
      reader.onload = () => {
        let base64Str = reader.result;
        this[options.filename].push(base64Str);
      };
    },
    // 设置每页条数
    applyhandleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.pageRequest.pageNum = 1;
      this.pageRequest.pageSize = val;
      this.findPage();
    },
    // 当前页
    applyhandleCurrentChange(val) {
      this.pageNum = val;
      this.pageRequest.pageNum = val;
      this.findPage();
    },
    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 => {
        });

      // const a = document.createElement('a')
      // a.style.display = 'none'
      // a.href = index.fileurl
      // a.target = '_ blank';
      // a.download = this.licenseNo+ '.pdf';  // 下载文件的名字
      // document.body.appendChild(a)
      // a.click()
    },
    //锚链接
    jump(obj) {
      var s = document.getElementById(obj);
      var parent = s.parentNode;
      for (let i = 0; i < parent.childNodes.length; i++) {
        if (parent.childNodes[i].tagName == "DIV") {
          if (parent.childNodes[i].childNodes[0].classList.contains("active")) {
            parent.childNodes[i].childNodes[0].classList.remove("active");
          }
        }
      }
      s.childNodes[0].classList.add("active");
    },
    //数据
    findPage() {
      this.loading = true;
      this.$api.letter.queryOrders(this.pageRequest).then((res) => {
        if (res.code == "200") {
          this.loading = false;
          this.pageResult = res.data.content;
          this.pageNum = res.data.pageNum;
          this.totalSize = res.data.totalSize;
          this.pageResult.forEach(val => {
            this.$set(val, "expanded", false);
          });
        } else {
          this.loading = false;
        }
      })
    },
    //查询
    onSubmit() {
      this.pageRequest.pageNum = 1;
      this.pageRequest.pageSize = 20;
      this.findPage();
    },
    //时间js
    monthChange(e) {
      console.log(e)
      if (e === null) {
        this.pageRequest.startDate = e;
        this.pageRequest.endDate = e;
      } else {
        this.pageRequest.startDate = e[0];
        this.pageRequest.endDate = e[1];
      }

    },
    downloadFile(url, fileName, type) {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob'; // 获取文件blob数据
      xhr.onload = function () {
        if (xhr.status !== 200) {
          this.$notify.error({
            title: '错误',
            message: '下载出现错误'
          });
          return;
        }
        const newUrl = window.URL.createObjectURL(xhr.response); // 生成一个可用的临时url
        const a = document.createElement('a'); // 生成a标签调用点击事件
        a.setAttribute('href', newUrl);
        a.setAttribute('target', '_blank');
        a.setAttribute('download', fileName); // 自定义文件名
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      };
      xhr.send();
    },

  }
}
</script>
<style scoped lang="scss">
/deep/ {
  .el-table .row-expand-cover .cell .el-table__expand-icon {
    display: none;
  }

  .saomazhifucodeClass .el-dialog__body,
  .saomazhifucodeClass .el-dialog__header {
    padding: 0;
  }

  .el-input.is-disabled .el-input__inner {
    color: #333;
  }
}

.ORcodebody {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.code_title {
  width: 100%;
  height: 50px;
  background-color: #fdcb08;
  justify-content: center;
}

.code_title>span {
  font-size: 22px;
  color: #000;
  font-weight: bold;
}

.ORcode {
  width: 100%;
  background: #fff;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  border-bottom: 6px dotted #fdcb08;
}

.ORcode>div {
  width: 180px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 5px;
}

.ORtitle {
  background: #fff;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
}

.ORtitle>div {
  width: 100%;
  margin: 10px 0;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.ORtitle>div>span:nth-child(1) {
  color: #979797;
  text-align: end;
  width: 150px;
}

.ORtitle>div>span:nth-child(2) {
  color: #000;
  margin-left: 10px;
}
</style>
<style scoped>
#qqq {
  background-color: #111;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  /*水平居中*/
  position: relative;
}

#qrCode {
  display: inline-block;
  margin: 0 auto;
  /*水平居中*/
  position: relative;
  top: 15%;
}

#qrCode img {
  width: 200px;
  height: 200px;
  background-color: #fff;
  padding: 6px;
}

.leftContainer {
  width: 80px;
  position: fixed;
  top: 79px;
  left: 30px;
}

.leftContainer .el-col {
  width: 80px;
  height: 80px;
  border-bottom: 1px solid #4d5c6f;
  background: #526176;
  cursor: pointer;
  color: #a6aeb9;
  border-radius: 0;
}

.leftContainer .el-col a {
  display: block;
  color: #a6aeb9;
  text-decoration: none;
}

.leftContainer .el-col a:hover {
  color: #fff;
}

.leftContainer .el-col a.active {
  color: #fff;
}

.leftContainer .el-col i {
  font-size: 30px;
  margin: 15px 0px 5px;
}

.rightContainer {
  width: calc(100vw - 160px);
  margin-left: 100px;
}

.rightContainer .header .el-col {
  font-size: 18px;
  font-weight: bold;
}

.rightContainer .bodyTitle {
  height: 40px;
  background: #f3f3f3;
  border: 1px solid #dddddd;
}

.rightContainer .bodyTitle>label {
  margin: 0px 15px;
  font-weight: bold;
}

.rightContainer #demo2 .body,
.rightContainer #demo6 .body {
  border: 1px solid #ddd;
  padding: 15px;
  border-top: none;
}

.rightContainer .el-card {
  margin-bottom: 15px;
}



.body .el-row .el-col label {
  text-align: right;
  width: 80px;
  font-size: 14px;
  width: 100%;
  line-height: 36px;
  display: inline-block;
  box-sizing: border-box;
}

.disabledInput {
  width: 80% !important;
  background-color: #f5f7fa;
  text-align: center !important;
  max-width: 200px;
  border: 1px solid #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0px 10px;
  height: 36px;
  margin: 20px 10%;
}

/* 上传图片样式Start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}

.avatar {
  border: 1px dashed #d9d9d9;
  padding: 5px;
  border-radius: 6px;
  width: 100px;
  height: 100px;
  display: block;
}

.imageStyle {
  display: inline-block;
  width: 100px;
  height: 100px;
  box-shadow: #ddd 0px 0px 5px;
  margin-right: 20px;
}

/* 上传图片样式End */

.dis {
  display: flex;
}

.align {
  align-items: center;
}

.jus {
  justify-content: space-between;
}

.display {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.block {
  margin-top: 10px;
}

.page {
  padding: 14px;
  box-sizing: border-box;
}

.el-select--medium {
  vertical-align: bottom !important;
}

.widths {
  width: 220px;
}

.demo-table-expand {
  width: 100%;
  height: auto;
  padding: 10px 50px;
  font-size: 14px;
}

.demo-table-expand-time {
  width: 600px;
}

.demo-table-expand-time>div {
  margin: 0 10px;
}
</style>