vue-insagent-pc/src/views/Task/daikeComponents/KtOrder.vue

<template>
  <div class="page">
    <el-form :inline="true" :model="pageRequest" class="demo-form-inline" size="small" label-width="130px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="订单号">
            <el-input v-model="pageRequest.orderNo" placeholder="请输入订单号" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车牌号">
            <el-input v-model="pageRequest.licenseNo" placeholder="请输入车牌号" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号">
            <el-input v-model="pageRequest.frameNo" placeholder="请输入车架号" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投保人姓名">
            <el-input v-model="pageRequest.insuredName" placeholder="请输入投保人姓名" class="widths" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="isLetterOrder">
          <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 :span="6">
          <el-form-item label="录单日期">
            <el-date-picker v-model="value2" type="daterange" @change="monthChange" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable style="width: 200px"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保险公司">
            <el-select v-model="pageRequest.companyId" filterable class="widths" clearable>
              <el-option v-for="val in companyList" :key="val.id" :label="val.name" :value="val.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="险种">
            <el-select v-model="pageRequest.productid" clearable filterable placeholder="选择险种" class="widths">
              <el-option v-for="item in productsTypeoptions" :key="item.dictValue" :label="item.dictTag"
                :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="险种选择">
            <el-radio-group v-model="pageRequest.productid">
              <el-radio label="">全部</el-radio>
              <el-radio v-for="val in productsTypeoptions" :key="val.dictValue" :label="val.dictValue">{{ val.dictTag
                }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="21" v-if="isLetterOrder">
          <el-form-item label="订单状态">
            <el-radio-group v-model="pageRequest.orderStatus">
              <el-radio label="888">全部</el-radio>
              <el-radio v-for="val in optionsStatus" :key="val.dictValue" :label="val.dictValue">{{ val.dictTag
                }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table size="small" :data="pageResult" border v-loading="orderLoaing" highlight-current-row stripe
      @expand-change="handleRowChange" ref="expandTable" :height="tabelHeight" :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: 12%">
              {{ item.inscompany }}
              <!-- <span style="color: #d42426">（{{ item.agreementName }}）</span> -->
            </div>
            <div v-show="item.orderstatus != '10' && item.orderstatus != '11'" style="width: 800px"
              class="flex a-c j-s demo-table-expand-time">
              <div>
                总价：
                <span style="color: #d42426">{{ item.sumpremium }}</span>
              </div>
              <div>
                交强险：
                <span style="color: #d42426">{{ item.jqpremium }}</span>
              </div>
              <div>
                商业险：
                <span style="color: #d42426">{{ item.sypremium }}</span>
              </div>
              <div>
                车船税：
                <span style="color: #d42426">{{ item.taxamount }}</span>
              </div>
              <div v-if="item.jypremium">
                驾意险：
                <span style="color: #d42426">{{ item.jypremium }}</span>
              </div>
              <div>{{ item.createtime }}</div>
            </div>
            <div v-show="item.orderstatus == '10' || item.orderstatus == '11'" style="width: 800px">
              {{ item.quoteErrMsg }}
            </div>
            <div slot="reference" class="name-wrapper flex a-c j-c">
              <el-tag style="
                  color: #33a08d;
                  border-color: #33a08d;
                  background: rgba(51, 160, 141, 0.1);
                " v-if="item.orderstatus == '0' || item.orderstatus == '1'" size="small">{{ item.orderstatus | cap
                }}</el-tag>
              <el-tag style="border-color: #e75b5d" type="danger" v-else-if="item.orderstatus == '3'" size="small">{{
                item.orderstatus | cap }}</el-tag>
              <el-tag v-else style="
                  color: #2d4d89;
                  border-color: #2d4d89;
                  background: rgba(45, 77, 137, 0.1);
                " size="small">{{ item.orderstatus | cap }}</el-tag>
            </div>
            <div class="flex a-c">
              <el-button size="mini" type="text" v-if="
                item.orderstatus == '1' &&
                [
                  '中煤财险',
                  '大家财险',
                  '永诚财险',
                  '国任财险',
                  '太平财险',
                  '华农财险',
                  '恒邦财险',
                  '诚泰财险',
                  '众安平安',
                  '中国人寿',
                  '人保财险',
                  '安盛天平',
                  '紫金财险',
                  '渤海财险',
                  '泰康财险',
                  '华泰财险',
                  '太平洋财险',
                  '大地财险',
                  '阳光财险',
                ].includes(item.inscompany)
              " @click="refreshStatus(item)" class="red_color">更新订单</el-button>
              <el-button size="mini" type="text" v-if="item.orderstatus == '4' && item.inscompany == '华泰财险'"
                @click="updateStatusHuatai(item)" class="red_color">更新订单</el-button>
              <el-button size="mini" type="text" v-if="
                (item.orderstatus == '1' ||
                  item.orderstatus == '2' ||
                  item.orderstatus == '4') &&
                ['紫金财险', '诚泰财险', '阳光财险'].includes(item.inscompany)
              " @click="cancelorder(item)" class="red_color">撤单</el-button>
              <el-button size="mini" type="text" v-if="item.orderstatus == '2'" @click="carcode(item)"
                class="red_color">二维码</el-button>
              <!-- <el-button  size="mini"  class="red_color" v-if="item.orderstatus == '2' && item.inscompany == '平安财险'" type="text" @click="signature(item)">生成签章</el-button> -->
              <el-button v-if="item.orderstatus == '10'"  size="mini" type="text" class="blue_color"
                @click="supplementOrder(item)">补录订单</el-button>
              <el-button size="mini" type="text" class="green_color"
                @click="OrderDetails(scope.row, item)">查看详情</el-button>
              <el-button size="mini" type="text" :loading="item.querystatusLoaing" v-if="
                item.orderstatus == '2' &&
                [
                  '太平财险',
                  '华农财险',
                  '恒邦财险',
                  '诚泰财险',
                  '众安平安',
                  '中国人寿',
                  '人保财险',
                  '安盛天平',
                  '紫金财险',
                  '永诚财险',
                  '大家财险',
                  '华泰财险',
                  '华安财险',
                  '泰山财险',
                  '国任财险',
                  '中煤财险',
                  '渤海财险',
                  '泰康财险',
                  '平安财险',
                  '太平洋财险',
                  '阳光财险',
                  '永安财险',
                  '申能财险',
                  '大地财险'
                ].includes(item.inscompany)
              " class="blue_color" @click="querystatus(item, index)">状态更新</el-button>
              <el-button v-if="item.orderstatus !== '2'" size="mini" type="text" class="blue_color"
                @click="orderTrajectory(scope.row, item)">订单轨迹</el-button>
              <el-button size="mini" type="primary" @click="bjdpreview(item.id, scope.row.userid)">报价单</el-button>
              <el-button v-if="
                (item.orderstatus == '1' || item.orderstatus == '4') &&
                item.inscompany == '平安财险' &&
                item.fileStatus
              " size="mini" type="text" class="green_color"
                @click="additionalInformation(item.id, scope.row)">补充资料</el-button>
              <!-- <el-button size="mini" type="text" @click="CloseEdit(scope.$index, scope.row)">编辑</el-button> -->
              <el-button type="text" size="mini" v-if="item.orderstatus == '2'">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link blue_color">
                    更多
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-button size="mini" type="text" style="color: #2d4d89"
                        @click="orderTrajectory(scope.row, item)">订单轨迹</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="item.inscompany !== '平安财险'">
                      <el-button type="text" size="mini" style="color: #2d4d89"
                        @click="revokeCode(item.id)">撤销二维码</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="item.vehicleInspectionUrl">
                      <el-button type="text" size="mini" style="color: #2d4d89"
                        @click="validateCarCode(scope.row, item)">验车二维码</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderno" label="订单号" align="center" width="160"></el-table-column>
      <el-table-column prop="username" :label="managementSource == 1 ? '会员名称' : '业务员'" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" :label="managementSource == 1 ? '会员号' : '业务员工号'" align="center" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.userid }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="insCompany" label="已承保的公司" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.insCompany ? scope.row.insCompany : "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="partnerCompaniesName" label="合作公司" width="80" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.partnerCompaniesName
              ? scope.row.partnerCompaniesName
              : "--"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="licenseno" label="车牌号" width="100" align="center"></el-table-column>
      <el-table-column prop="insuredname" label="投保人姓名" align="center" width="100"></el-table-column>
      <el-table-column prop="product" label="投保险种" align="center" width="100"></el-table-column>
      <el-table-column prop="orderstatus" label="状态" align="center" width="150">
        <template slot-scope="scope">
          <!-- <el-tag :type="capType(scope.row.orderstatus)" size="small">{{
              scope.row.orderstatus | cap
          }}</el-tag>-->
          <el-tag style="
              color: #33a08d;
              border-color: #33a08d;
              background: rgba(51, 160, 141, 0.1);
            " v-if="scope.row.orderstatus == '0' || scope.row.orderstatus == '1'" size="small">{{ scope.row.orderstatus
              | cap }}</el-tag>
          <el-tag type="danger" style="border-color: #e75b5d" v-else-if="scope.row.orderstatus == '3'" size="small">{{
            scope.row.orderstatus | cap }}</el-tag>
          <el-tag v-else style="
              color: #2d4d89;
              border-color: #2d4d89;
              background: rgba(45, 77, 137, 0.1);
            " size="small">{{ scope.row.orderstatus | cap }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createtime" label="录单日期" align="center" width="150"></el-table-column>
      <el-table-column prop="insureTime" label="承保确认时间" align="center" width="150"></el-table-column>

      <el-table-column label="操作" align="center" fixed="right" min-width="250">
        <template slot-scope="scope">
          <!-- <el-button v-if="scope.row.orderstatus != '3'" size="mini" type="text" style="color: #2d4d89"
            @click="resendData(scope.$index, scope.row)">补传资料</el-button> -->
          <el-button v-if="scope.row.orderstatus != '3'" size="mini" type="text" style="color: #2d4d89"
            @click="CloseEdit(scope.$index, scope.row)">重新报价</el-button>
          <el-button size="mini" style="color: #2d4d89" type="text"
            @click="onoffQuotationHistory(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="430px" top="10vh" class="saomazhifucodeClass">
      <div class="ORcodebody" v-watermark="qrCodeId">
        <div slot="title" class="dialog-title">
          <span>扫码付款</span>
        </div>
        <div class="ORcode">
          <div style="padding: 13px; position: relative">
            <div id="qrcode" ref="qrcode"></div>
          </div>
        </div>
        <img style="margin-left: -16px" src="../../../assets/image/divider.png" alt />
        <div style="
            font-size: 32px;
            text-align: center;
            color: #d42426;
            margin-top: 20px;
          ">
          <span style="font-size: 24px; font-weight: bold">￥</span>
          {{ sumpremium }}
        </div>
        <div class="ORtitle">
          <div>
            <span>保险公司：</span>
            <span>{{ inscompany }}</span>
          </div>
          <div>
            <span>车牌号：</span>
            <span>{{ licenseNo }}</span>
          </div>
          <div>
            <span>投保人：</span>
            <span>{{ applyName }}</span>
          </div>
          <div v-show="jqpremium">
            <span>交强：</span>
            <span>{{ jqpremium }}</span>
          </div>

          <div v-show="sypremium">
            <span>商业：</span>
            <span>{{ sypremium }}</span>
          </div>
          <div v-show="taxamount">
            <span>车船税：</span>
            <span>{{ taxamount }}</span>
          </div>

          <div v-show="jqstartdate">
            <span>交强险起保日期：</span>
            <span>{{ jqstartdate }}</span>
          </div>
          <div v-show="systartdate">
            <span>商业险起保日期：</span>
            <span>{{ systartdate }}</span>
          </div>
          <div v-if="jypremium">
            <span>驾意险：</span>
            <span>{{ jypremium }}</span>
          </div>
          <div v-if="jypremium">
            <span>驾意险险起保日期：</span>
            <span>{{ systartdate || jqstartdate }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer display">
        <el-button size="small" style="width: 100px; border-color: #d42426; color: #d42426"
          @click="codedialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!--第二种 二维码 -->
    <el-dialog :visible.sync="codedialogVisiblePro" width="660px" class="proSaomazhifucodeClass" top="10vh"
      title="扫码付款">
      <div class="flex j-s">
        <div class="scan-code">
          <div style="font-weight: bold">
            总金额：
            <span style="color: #2d4d89">{{ sumpremium }}</span>
          </div>
          <div>交强险：{{ jqpremium }}</div>
          <div>车船税：{{ taxamount }}</div>
          <div>商业险：{{ sypremium }}</div>
          <div>驾意险：{{ jypremium }}</div>
        </div>
        <div id="qrcode" ref="qrcode"></div>
        <div class="scan-code">
          <div>保险公司：{{ inscompany }}</div>
          <div>车牌号：{{ licenseNo }}</div>
          <div>投保人：{{ applyName }}</div>
          <div>交强险起保日期：{{ jqstartdate }}</div>
          <div>商业险起保日期：{{ systartdate }}</div>
          <div>驾意险起保日期：{{ systartdate || jqstartdate }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" style="
            width: 100px;
            background: #eaedf1;
            border-color: #eaedf1;
            color: #2d4d89;
          " @click="codedialogVisiblePro = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 车辆报价新页面 -->
    <detailsDialog ref="detailsDialog" :orderInfo.sync="orderInfo" :Feepermissions="false"></detailsDialog>
    <!-- 订单轨迹 -->
    <el-dialog :visible.sync="ddgjdialogVisible" width="500px">
      <div slot="title" class="dialog-title">
        <span>订单轨迹</span>
      </div>
      <div style="height: 300px; overflow-y: auto">
        <el-steps direction="vertical" :active="trajectoryTable.length - 1">
          <el-step :title="item.desc" :key="item.id" v-for="item in trajectoryTable">
            <template slot="description">
              <template style="margin-top: 10px; margin-bottom: 10px">
                <div>保险公司：{{ item.insCompany }}</div>
                <div>车牌号：{{ item.licenseNo }}</div>
                <div>被保人：{{ item.insuredname }}</div>
                <div>
                  <span>操作人：{{ item.operator }}</span>
                  <span style="margin-left: 10px">操作人工号：{{ item.audituser }}</span>
                </div>
                <span v-if="item.operatorTime">
                  操作时间：{{ item.operatorTime }}
                </span>
              </template>
            </template>
          </el-step>
        </el-steps>
      </div>
    </el-dialog>
    <!-- 报价历史 -->
    <el-dialog :visible.sync="quotationhistorydialogVisible" v-dialogDrag width="90%">
      <div slot="title" class="dialog-title">
        <img src="../../../../src/icon/报价历史.png" alt class="icon-img" />
        <span>报价历史</span>
      </div>
      <div style="padding: 20px">
        <el-table size="small" :data="HistoryList" height="400" border style="width: 100%" v-loading="loading"
          :header-cell-style="{
            background: '#F2F7FC',
          }" highlight-current-row>
          <el-table-column prop="inscompany" label="保险公司" align="center"></el-table-column>
          <el-table-column prop="username" label="业务员" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}({{ scope.row.userId }})</span>
            </template>
          </el-table-column>
          <el-table-column prop="licenseno" label="车牌号" align="center"></el-table-column>
          <el-table-column prop="createtime" label="报价时间" align="center"></el-table-column>
          <el-table-column prop="jqpremium" label="交强险" align="center"></el-table-column>
          <el-table-column prop="sypremium" label="商业险" align="center"></el-table-column>
          <el-table-column prop="taxamount" label="车船税" align="center"></el-table-column>
          <el-table-column prop="sumpremium" label="总保费" align="center"></el-table-column>
          <el-table-column prop="orderstatus" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag style="
                  color: #33a08d;
                  border-color: #33a08d;
                  background: rgba(51, 160, 141, 0.1);
                " v-if="
                  scope.row.orderstatus == '0' || scope.row.orderstatus == '1'
                " size="small">{{ scope.row.orderstatus | cap }}</el-tag>
              <el-tag type="danger" style="border-color: #e75b5d" v-else-if="scope.row.orderstatus == '3'"
                size="small">{{ scope.row.orderstatus | cap }}</el-tag>
              <el-tag v-else style="
                  color: #2d4d89;
                  border-color: #2d4d89;
                  background: rgba(45, 77, 137, 0.1);
                " size="small">{{ scope.row.orderstatus | cap }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="180" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" v-if="scope.row.orderstatus == '1'"
                         @click="updateStatusHuatai(scope.row)" class="red_color">更新订单</el-button>
              <el-button size="mini" type="text" v-if="scope.row.orderstatus == '2'"
                         @click="querystatus(scope.row)" class="red_color">状态更新</el-button>
              <el-button type="text" size="small" style="color: #2d4d89"
                @click="OrderDetails(quotationhistoryRow, scope.row)">查看详情</el-button>
              <el-button size="small" type="text" @click="bjdpreview(scope.row.id, scope.row.userId)">报价单</el-button>
              <el-button size="small" v-show="scope.row.orderstatus == '2'" type="text"
                @click="carcode(scope.row)">付款码</el-button>
              <!-- <el-button  size="small"  v-if="scope.row.orderstatus == '2' && scope.row.inscompany == '平安财险'" type="text" @click="signature(item)">生成签章</el-button> -->
              <el-button size="mini" type="text" v-if="
                (scope.row.orderstatus == '1' ||
                  scope.row.orderstatus == '2' ||
                  scope.row.orderstatus == '4') &&
                ['紫金财险', '诚泰财险', '阳光财险'].includes(
                  scope.row.inscompany
                )
              " @click="cancelorder(scope.row)">撤单</el-button>
              <el-button type="text" size="mini" style="color: #2d4d89" v-if="
                scope.row.orderstatus == '2' &&
                scope.row.inscompany !== '平安财险'
              " @click="revokeCode(scope.row.id)">撤销二维码</el-button>
              <el-button type="text" size="mini" style="color: #2d4d89" v-if="
                scope.row.orderstatus == '2' &&
                [
                  '太平财险',
                  '华农财险',
                  '恒邦财险',
                  '诚泰财险',
                  '众安平安',
                  '中国人寿',
                  '人保财险',
                  '安盛天平',
                  '紫金财险',
                  '永诚财险',
                  '大家财险',
                  '华泰财险',
                  '华安财险',
                  '泰山财险',
                  '国任财险',
                  '中煤财险',
                  '渤海财险',
                  '泰康财险',
                  '平安财险',
                  '太平洋财险',
                  '阳光财险',
                  '永安财险',
                  '大地财险',
                ].includes(scope.row.inscompany)
              " @click="querystatus(scope.row, 'history')">状态更新</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 生成签章 -->
    <el-dialog :visible.sync="signaturedialogVisible" title="生成签章" width="14%">
      <div>
        <img :src="resultMessageImg" alt style="width: 100%" />
        <!-- <div  id="signaturecode" ref="signaturecode"></div> -->
      </div>
    </el-dialog>
    <el-dialog :visible.sync="imageUploaddialogVisible" width="1070px">
      <div slot="title" class="dialog-title">
        <span>影像上传</span>
      </div>
      <el-row>
        <el-col :span="3">
          <div class="tab-style">
            <li class="liMenu" :class="idx == tabLiIndex ? 'tabLi-style' : ''" @click="tabLiScroll(item.scroll, idx)"
              v-for="(item, idx) in tabLimenu" :key="idx">
              {{ item.name }}
            </li>
          </div>
        </el-col>
        <el-col :span="21" style="height: 320px; overflow-y: auto">
          <div class="flex" id="vehicle">
            <div class="aaa">
              <span>1.行驶证主页</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList1', 'imgList1', 'C01')
                " :file-list="imgList1" ref="upload1" :class="{ styleB: imgList1.length == 1 }">
                <img v-show="imgList1.length == 0" src="../../../../static/carfront.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }" v-if="imgList1.length > 0">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList1', 'imgList1')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>2.行驶证副页</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList1', 'imgList2', 'D01')
                " :file-list="imgList2" ref="upload2" :class="{ styleB: imgList2.length === 1 }">
                <img v-show="imgList2.length == 0" src="../../../../static/carback.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList1', 'imgList2')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>1.新车合格证</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) =>
                drivingupload(file, 'imageList5', 'imgList9', 'XC00')
                " :file-list="imgList9" multiple ref="upload3" :class="{ styleB: imgList9.length === 1 }">
                <img v-show="imgList9.length == 0" src="../../../../static/userfront.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList5', 'imgList9')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>2.购车发票</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) =>
                drivingupload(file, 'imageList5', 'imgList10', 'GC00')
                " :file-list="imgList10" multiple ref="upload4" :class="{ styleB: imgList10.length === 1 }">
                <img v-show="imgList10.length == 0" src="../../../../static/userfront.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList5', 'imgList10')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="flex" id="owner">
            <div class="aaa">
              <span>1.车主身份证（正面）</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList2', 'imgList3', 'C02')
                " :file-list="imgList3" multiple ref="upload3" :class="{ styleB: imgList3.length === 1 }">
                <img v-show="imgList3.length == 0" src="../../../../static/userfront.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList2', 'imgList3')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>2.车主身份证（反面）</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList2', 'imgList4', 'D02')
                " :file-list="imgList4" multiple ref="upload4" :class="{ styleB: imgList4.length === 1 }">
                <img v-show="imgList4.length == 0" src="../../../../static/userback.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList2', 'imgList4')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>3.营业执照</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag multiple
                ref="upload4">
                <img src="../../../../static/userfront.png" style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList2', 'imgList4')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="flex" id="applicant">
            <div class="aaa">
              <span>1.投保人身份证（正面）</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList3', 'imgList5', 'C03')
                " :file-list="imgList5" multiple ref="upload5" :class="{ styleB: imgList5.length === 1 }">
                <img v-show="imgList5.length == 0" src="../../../../static/userfront.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList3', 'imgList5')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>2.投保人身份证（反面）</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList3', 'imgList6', 'D03')
                " :file-list="imgList6" multiple ref="upload6" :class="{ styleB: imgList6.length === 1 }">
                <img v-show="imgList6.length == 0" src="../../../../static/userback.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList3', 'imgList6')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>3.营业执照</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag multiple
                ref="upload4">
                <img src="../../../../static/userfront.png" style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList2', 'imgList4')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="flex">
            <div class="aaa">
              <span id="insured">1.被保人身份证（正面）</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList4', 'imgList7', 'C04')
                " :file-list="imgList7" multiple ref="upload7" :class="{ styleB: imgList7.length === 1 }">
                <img v-show="imgList7.length == 0" src="../../../../static/userfront.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList4', 'imgList7')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>2.被保人身份证（反面）</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) => drivingupload(file, 'imageList4', 'imgList8', 'D04')
                " :file-list="imgList8" multiple ref="upload8" :class="{ styleB: imgList8.length === 1 }">
                <img v-show="imgList8.length == 0" src="../../../../static/userback.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList4', 'imgList8')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="aaa">
              <span>3.营业执照</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag multiple
                ref="upload4">
                <img src="../../../../static/userfront.png" style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList2', 'imgList4')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="flex" id="relationship">
            <div class="aaa">
              <span>1.关系证明</span>
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" drag :on-change="(file) =>
                drivingupload(file, 'imageList5', 'imgList11', 'GX00')
                " :file-list="imgList11" multiple ref="upload3" :class="{ styleB: imgList11.length === 1 }">
                <img v-show="imgList11.length == 0" src="../../../../static/userfront.png"
                  style="width: 100%; height: 100%" />
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file, 'imageList5', 'imgList11')">
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file.url)"></i>
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="imageUploaddialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="uploadinformation">上传资料</el-button>
      </span>
    </el-dialog>

    <!-- 生成验车二维码 -->
    <el-dialog :visible.sync="validateCarCodeShow" width="30%" title="验车二维码">
      <div class="QRCode" ref="qrcode" @click="resetCode"></div>
    </el-dialog>

    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
    <!-- 报价单 -->
    <quotationDialog ref="quotationDialog" :queryOrders="queryOrders"></quotationDialog>
    <quotationDialogPro ref="quotationDialogPro" :queryOrders="queryOrders"></quotationDialogPro>

    <imageDialog ref="imageDialog" :companyId="companyId" :type="2"></imageDialog>
  </div>
</template>
<script>
let _self;
import { pathToBase64, base64ToPath } from "@/common/image-tools-base64.js";
import CommonUtil from "@/utils/comutil.js";
import Cookies from "js-cookie";
import QRCode from "qrcodejs2";
import quotationDialog from "@/views/Core/components/quotationDialog.vue";
import quotationDialogPro from "@/views/Core/components/quotationDialogPro.vue";
import detailsDialog from "@/views/Core/components/detailsDialog.vue";
import imageDialog from "@/views/Core/components/imageDialog.vue";
import { debounce } from "lodash";

export default {
  data() {
    return {
      companyId: "",
      orderLoaing: false,
      qrcodeWidth: "180",
      qrcodeHeight: "180",
      qrCodeId: Cookies.get("user"),
      ddgjdialogVisible: false,
      signaturedialogVisible: false,
      signaturecode: null,
      trajectoryTable: [],
      queryOrders: {
        carinfo: {},
        ownerinfo: {},
        applyinfo: {},
        insureinfo: {},
        extendInfo: {},
      },
      logoImg: "", //报价单保险公司logo图
      value2: "",
      optionsStatus: [],
      optionsStatusAll: [],
      codedialogVisible: false,
      codedialogVisiblePro: 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: {},
        orderCommissionVo: {},
        extendInfo: {},
      },
      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: "", //车船税
      jypremium: "", //驾意险
      jqstartdate: "", //交强时间
      systartdate: "", //商业时间
      mobile: "", //投保人手机号
      qrcode: null,
      paycodeimg: "",
      userid: "",
      downloadstatus: 0,
      expands: [],
      productsTypeoptions: [],
      InsInsuranceKindoptions: [],
      width: document.documentElement.clientWidth,
      tabelHeight: document.documentElement.clientHeight - 440,
      insAreaCompanyList: [], //子订单list
      companyList: [], //保险公司
      querystatusLoaing: false,
      quotationhistorydialogVisible: false, //报价历史显示状态
      HistoryList: [], //报价历史数据
      natureOfVehicleUseoptions: [],
      businessVehicleUseoptions: [],
      energyTypeoptions: [],
      vehicleTypeoptions: [],
      trafficManagementVehicleTypeoptions: [],
      outOfBusinessVehicleUseoptions: [],
      userIdPor: Cookies.get("user"),
      statusPor: "",
      deptIdPor: "",
      apiType: "",
      resultMessageImg: "",
      institutionOptions: [],
      imageUploaddialogVisible: false,
      tabLiIndex: 0,
      tabLimenu: [
        {
          name: "车辆信息",
          scroll: "vehicle",
        },
        {
          name: "车主信息",
          scroll: "owner",
        },
        {
          name: "投保人信息",
          scroll: "applicant",
        },
        {
          name: "被保人信息",
          scroll: "insured",
        },
        {
          name: "关系证明",
          scroll: "relationship",
        },
      ],
      //影像回显列表
      imgList1: [],
      imgList2: [],
      imgList3: [],
      imgList4: [],
      imgList5: [],
      imgList6: [],
      imgList7: [],
      imgList8: [],
      imgList9: [],
      imgList10: [],
      imgList11: [],
      //影像上传列表
      imageList1: [],
      imageList2: [],
      imageList3: [],
      imageList4: [],
      imageList5: [],
      showViewer: false,
      ProViewImg: "",
      managementSource: "",
      validateCarCodeShow: false,
      vehicleInspectionUrl: "",
    };
  },
  components: {
    quotationDialog,
    detailsDialog,
    quotationDialogPro,
    imageDialog,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  created() {
    this.managementSource = JSON.parse(
      localStorage.getItem("user_data")
    ).managementSource;
    this.getDicType("natureOfVehicleUse"); //车辆使用性质
    this.getDicType("vehicleType"); //车辆种类
    this.getDicType("trafficManagementVehicleType"); //车辆类型
    this.getDicType("energyType"); //能源种类
    this.getDicType("businessVehicleUse"); //（车辆用途）营业
    this.getDicType("outOfBusinessVehicleUse"); //（车辆用途）非营业
    this.getDicType("productsType"); //（车辆用途）非营业
    this.$api.letter.gainTopList().then((res) => {
      this.companyList = res.data;
    });

    this.$api.insCompany.dicType("insOrderStatusAll").then((res) => {
      this.optionsStatusAll = res.data.ddList;
    });
    this.$api.insCompany.dicType("insOrderStatus").then((res) => {
      this.optionsStatus = res.data.ddList;
    });
    this.peopleid = Cookies.get("user");
    this.$api.dept.findDeptTree().then((res) => {
      this.institutionOptions = res.data;
    });
    // this.findPage();
    if (this.isLetterOrder) {
      this.$api.user.sysMenuRecordAdd(2, 2).then((res) => { });
      this.pageRequest.deptId = JSON.parse(
        localStorage.getItem("user_data")
      ).deptId;
      if (this.peopleid != "admin") {
        this.pageRequest.userId = this.peopleid;
        this.findPage();
      } else {
        this.pageRequest.userId = "admin";
      }
    }
  },
  props: {
    isLetterOrder: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    window.addEventListener("resize", this.getDimensions);
  },
  beforeCreate() {
    _self = this;
  },
  // props:{
  //   isdisabled:{
  //       type:Boolean,
  //       default:true
  //   },
  // },
  filters: {
    cap(ele) {
      return _self.optionsStatus.find((item) => {
        return item.dictValue === ele;
      }).dictTag;
    },
    caps(ele) {
      return _self.optionsStatusAll.find((item) => {
        return item.dictValue === ele;
      }).dictTag;
    },
  },
  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: {
    additionalInformation(companyId, row) {
      this.companyId = companyId;
      this.$refs.imageDialog.imageEcho(row.quoteno);
      this.$refs.imageDialog.setBackupVisible(true);
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },
    handlePictureCardPreview(img) {
      this.ProViewImg = img;
      this.showViewer = true;
    },

    //影像上传
    drivingupload(file, imageIdList, imgurl, type) {
      let that = this;
      let size = file.size / 1024 / 1024 < 5;
      const isJPG =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      if (!size) {
        this.$message.error("上传图片大小不能超过 5MB!");
        this[imgurl] = [];
        return false;
      }
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG、PNG 格式!");
        this[imgurl] = [];
        return false;
      }
      this[imgurl].push(file);

      var file = file.raw;
      const params = new FormData(); // 声明formData数据类型
      params.append("multipartFile", file);
      params.append("type", "image");
      this.$api.letter.uploadFile(params).then((res) => {
        if (res.code == "200") {
          if (this[imageIdList].some((v) => v.imageType == type)) {
            this[imageIdList].map((val) => {
              if (val.imageType == type) {
                val.imageId = res.data.id;
              }
            });
          } else {
            this[imageIdList].push({
              imageId: res.data.id,
              imageType: type,
            });
          }
        }
      });
    },
    handleRemove1(file, imageIdList, imgList) {
      this[imageIdList].map((ele, index) => {
        if (file.imageId === ele.imageId) {
          this[imageIdList].splice(index, 1);
        }
        return ele;
      });
      if (file.imageId) {
        this[imgList].map((ele, index) => {
          if (file.imageId === ele.imageId) {
            this[imgList].splice(index, 1);
          }
          return ele;
        });
      } else {
        this[imgList].map((ele, index) => {
          if (file.uid === ele.uid) {
            this[imgList].splice(index, 1);
          }
          return ele;
        });
      }
    },
    //影像上传
    uploadinformation() {
      // //上传图片
      const mergedArray = [
        ...this.imageList1,
        ...this.imageList2,
        ...this.imageList3,
        ...this.imageList4,
        ...this.imageList5,
      ];
      let imageparam = {
        imageList: mergedArray,
        quoteNo: this.quoteno,
      };
      this.$api.letter.uploadImages(imageparam).then((responses) => {
        if (responses.code == "200") {
          this.imageEcho(this.quoteno);
          this.$message({ message: responses.msg, type: "success" });
        } else {
          this.$message({ message: responses.msg, type: "error" });
        }
      });
      this.imageUploaddialogVisible = false;
    },
    tabLiScroll(id, idx) {
      this.tabLiIndex = idx;
      document.getElementById(id).scrollIntoView({ behavior: "smooth" });
    },
    imageEcho(quotenos) {
      //影像查询
      this.$api.letter.findByQuoteNo(quotenos).then((res) => {
        if (res.code == "200") {
          this.imageList1 = [];
          this.imageList2 = [];
          this.imageList3 = [];
          this.imageList4 = [];
          this.imageList5 = [];
          this.imgList1 = [];
          this.imgList2 = [];
          this.imgList3 = [];
          this.imgList4 = [];
          this.imgList5 = [];
          this.imgList6 = [];
          this.imgList7 = [];
          this.imgList8 = [];
          this.imgList9 = [];
          this.imgList10 = [];
          this.imgList11 = [];
          Object.keys(res.data).forEach((keys) => {
            if (res.data[keys].url) {
              res.data[keys].url = process.env.BASE_URL + res.data[keys].url;
              switch (keys) {
                case "C01":
                  this.imageList1.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList1.push(res.data[keys]);
                  break;
                case "D01":
                  this.imageList1.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList2.push(res.data[keys]);
                  break;
                case "C02":
                  this.imageList2.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList3.push(res.data[keys]);
                  break;

                case "D02":
                  this.imageList2.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList4.push(res.data[keys]);
                  break;
                case "C03":
                  this.imageList3.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList5.push(res.data[keys]);
                  break;
                case "D03":
                  this.imageList3.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList6.push(res.data[keys]);
                  break;
                case "C04":
                  this.imageList4.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList7.push(res.data[keys]);
                  break;
                case "D04":
                  this.imageList4.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList8.push(res.data[keys]);
                  break;
                case "XC00":
                  this.imageList5.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList9.push(res.data[keys]);
                  break;
                case "GC00":
                  this.imageList5.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList10.push(res.data[keys]);
                  break;
                case "GX00":
                  this.imageList5.push({
                    imageId: res.data[keys].imageId,
                    imageType: res.data[keys].imageType,
                  });
                  this.imgList11.push(res.data[keys]);
                  break;
                default:
                  break;
              }
            }
          });
        } else {
          this.$message({ message: res.msg, type: "info" });
        }
      });
    },
    //报价历史点击事件
    onoffQuotationHistory(row) {
      this.quotationhistoryRow = row;
      this.RadioHistoryChange();
      this.quotationhistorydialogVisible = true;
    },
    //报价轨迹查询
    RadioHistoryChange() {
      let params = {
        orderNo: this.quotationhistoryRow.orderno,
        orderStatus: "",
      };
      this.$api.letter.queryQuoteHistory(params).then((res) => {
        res.data.forEach((item) => {
          if (item.accidentInfo) {
            item.accidentInfo.constructor === Object
              ? [item.accidentInfo]
              : item.accidentInfo;
          }
        });
        this.HistoryList = res.data;
      });
    },
    getDicType(type) {
      this.$api.insCompany.dicType(type).then((res) => {
        if (res.code == 200) {
          this[type + "options"] = res.data.ddList;
        }
      });
    },
    capType(val) {
      if (val == "0") {
        return "success";
      }
      if (val == "1") {
        return "warning";
      }
      if (val == "2" || val == "3" || val == "4") {
        return "danger";
      }
    },
    // 撤销二维码
    revokeCode(id) {
      this.$confirm("确定撤销二维码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.letter.getRevokeQrCode(id).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.quotationhistorydialogVisible
                ? this.RadioHistoryChange()
                : "";
              this.findPage();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消撤销二维码",
          });
        });
    },
    // 验车二维码
    validateCarCode(row, item) {
      this.validateCarCodeShow = true;
      this.vehicleInspectionUrl = item.vehicleInspectionUrl;
      this.$nextTick(() => {
        this.qrcode = new QRCode(this.$refs.qrcode, {
          // text 需要转二维码的内容 可以是文本也可以是一个链接 是链接会直接跳走
          text: item.vehicleInspectionUrl,
          width: 200,
          height: 200,
          colorDark: "#333", //二维码颜色
          colorLight: "#fff", //二维码背景颜色
          correctLevel: QRCode.CorrectLevel.L, //容错率,L/M/H
        });
      });
    },
    resetCode() {
      if (this.qrcode) {
        this.qrcode.clear();
        this.qrcode.makeCode(this.vehicleInspectionUrl);
      }
    },
    bjdpreview(companyId, userId) {
      let params = {
        companyId: companyId,
      };
      this.$api.letter.getByCompanyId(params).then((res) => {
        if (res.code == "200") {
          var data = res.data;
          if (data.kindinfo != null) {
            data.kindinfo.map((ele, index) => {
              switch (ele.kindCode) {
                case "A":
                  if (ele.amount == 1) {
                    ele.amount = "投保";
                  } else {
                    ele.amount = ele.amount;
                  }
                  break;
                case "D4":
                case "SY_FJ_YBW2":
                  ele.unitAmount = this.toChinesNum(ele.unitAmount);
                  break;
                case "MJ1":
                case "MJ2":
                case "MJ3":
                case "MJ4":
                  ele.deductibleRate = ele.deductibleRate + "%";
                  break;
                default:
                  ele.amount = this.toChinesNum(ele.amount);
              }
              return ele;
            });
          }
          data.logoImg = this.iconfftter(res.data.inscompany);
          this.queryOrders = data;
          this.$api.letter.getThemeByUserId(this.userIdPor).then((res) => {
            if (res.code == 200) {
              if (res.data[0] == "GD") {
                this.$refs.quotationDialogPro.setBackupVisible(true);
              } else {
                this.$refs.quotationDialog.setBackupVisible(true);
              }
            }
          });
        }
      });
    },
    toChinesNum(num) {
      if (num.toString().length == 4) {
        let overQian = Math.floor(num / 1000);
        let result = overQian + "千";
        return result;
      } else {
        let overWan = Math.floor(num / 10000);
        let result = overWan + "万";
        return result;
      }
    },
    iconfftter(icon) {
      return CommonUtil.getDataName({
        dataList: this.global.insCompanyList,
        value: "name",
        label: "icon",
        data: icon,
      });
    },
    getRowClass(scope, rowIndex) {
      if (scope.row.insAreaCompanyList.length == 0) {
        //判断当前行是否有子数据或者根据实际情况设置
        return "row-expand-cover";
      }
    },
    getDimensions() {
      this.width = document.documentElement.clientWidth - 350 + "px";
      this.tabelHeight = document.documentElement.clientHeight - 330 + "px";
    },
    //订单修改
    CloseEdit(index, row) {
      this.$api.letter.getByOrderNo({ orderNo: row.orderno }).then((res) => {
        if (res.code == 200) {
          // console.log(this.isLetterOrder,res.data )
          if (this.isLetterOrder) {
            this.$router.push({
              path: "/letter/letter",
              query: { data: res.data },
            });
          } else {
            res.data.activeName = "999";
            this.$emit("orderEdit", res.data);
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    resendData(index, row) {
      this.quoteno = row.quoteno;
      this.imageEcho(row.quoteno);
      this.imageUploaddialogVisible = true;
    },
    //二维码生成插件
    creatQrCode(text) {
      // 查找并删除旧的二维码DOM元素
      this.$refs["qrcode"].innerHTML = "";
      let element = document.getElementById("qrcode");
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
      // 创建新的QRCode实例
      // this.qrcode = new QRCode("qrcode", {
      this.qrcode = new QRCode(this.$refs["qrcode"], {
        text: text,
        width: this.qrcodeWidth,
        height: this.qrcodeHeight,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    //更新订单状态
    refreshStatus(item) {
      let inscompany = {
        国任财险: "updateOrderInfoGuoren",
        太平财险: "auditStatusQuery",
        泰康财险: "auditStatusQuery",
        华农财险: "auditStatusQuery",
        恒邦财险: "auditStatusQuery",
        太平洋财险: "auditStatusQuery",
        众安平安: "auditStatusQuery",
        中国人寿: "auditStatusQuery",
        人保财险: "auditStatusQuery",
        安盛天平: "auditStatusQuery",
        紫金财险: "auditStatusQueryZijin",
        渤海财险: "orderStatusbohai",
        阳光财险: "yangGuangproposalStatusQuery",
        大地财险: "auditStatusQuery"
      };
      Object.keys(inscompany).forEach((val) => {
        if (val == item.inscompany) {
          this.$api.letter[inscompany[val]]({ companyId: item.id }).then(
            (res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg ? res.msg : "已刷新状态",
                  type: "success",
                });
                this.findPage();
              } else {
                this.$message({
                  showClose: true,
                  dangerouslyUseHTMLString: true,
                  message: res.msg.replace(/\n/g, "<br><br>"),
                  type: "error",
                  duration: 7000,
                });
                // this.$message({ message: res.msg, type: "error" });
              }
            }
          );
        }
      });
      if (item.inscompany == "永诚财险") {
        this.$api.letter.orderStatusyongcheng(item.id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: res.msg.replace(/\n/g, "<br><br>"),
              type: "error",
              duration: 7000,
            });
          }
        });
      }
      if (item.inscompany == "华泰财险") {
        let HtApiType =
          item.apiType == 2 ? "auditStatusQuery" : "orderStatushuatai";
        this.$api.letter[HtApiType]({ companyId: item.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: res.msg.replace(/\n/g, "<br><br>"),
              type: "error",
              duration: 7000,
            });
          }
        });
      }
      if (item.inscompany == "大家财险") {
        let HtApiType =
          item.apiType == 2 ? "auditStatusQuery" : "updateOrderInfoDajia";
        this.$api.letter[HtApiType]({ companyId: item.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: res.msg.replace(/\n/g, "<br><br>"),
              type: "error",
              duration: 7000,
            });
          }
        });
      }

      // 诚泰财险: "auditStatusQuery",
      if (item.inscompany == "诚泰财险") {
        let ZMApiType =
          item.apiType == 2 ? "auditStatusQuery" : "orderStatuschengtai";
        this.$api.letter[ZMApiType]({ companyId: item.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: res.msg.replace(/\n/g, "<br><br>"),
              type: "error",
              duration: 7000,
            });
          }
        });
      }

      // 中煤财险: "orderStatuszhongmei",
      if (item.inscompany == "中煤财险") {
        let ZMApiType =
          item.apiType == 2 ? "auditStatusQuery" : "orderStatuszhongmei";
        this.$api.letter[ZMApiType]({ companyId: item.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: res.msg.replace(/\n/g, "<br><br>"),
              type: "error",
              duration: 7000,
            });
          }
        });
      }
      if (item.inscompany == "紫金财险") {
        let ZJApiType =
          item.apiType == 2 ? "auditStatusQuery" : "auditStatusQueryZijin";
        this.$api.letter[ZJApiType]({ companyId: item.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: res.msg.replace(/\n/g, "<br><br>"),
              type: "error",
              duration: 7000,
            });
          }
        });
      }
    },
    //华泰刷新核保状态
    updateStatusHuatai(item) {
      let HtApiType =
        item.apiType == 2 ? "auditStatusQuery" : "orderStatushuatai";
      this.$api.letter[HtApiType]({ companyId: item.id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg ? res.msg : "已刷新状态",
            type: "success",
          });
          this.findPage();
        } else {
          this.$message({
            showClose: true,
            dangerouslyUseHTMLString: true,
            message: res.msg.replace(/\n/g, "<br><br>"),
            type: "error",
            duration: 7000,
          });
        }
      });
    },
    //查询缴费状态
    querystatus(item, index) {
      // this.querystatusLoaing = true;
        item.querystatusLoaing = true
      let inscompany = {
        国任财险: "updateOrderInfoGuoren",
        大家财险: "updateOrderInfoDajia",
        紫金财险: "getOrderDetail",
        渤海财险: "getOrderDetailboHai",
        平安财险: "getDocumentStatusList",
        阳光财险: "yangGuangproposalStatusQuery",
      };
      Object.keys(inscompany).forEach((val) => {
        if (val == item.inscompany) {
          this.$api.letter[inscompany[val]]({ companyId: item.id }).then(
            (res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg ? res.msg : "已刷新状态",
                  type: "success",
                });
                this.quotationhistorydialogVisible
                  ? this.RadioHistoryChange()
                  : "";
                this.findPage();
                  item.querystatusLoaing = false;
              } else {
                  item.querystatusLoaing = false;
                this.$message({ message: res.msg, type: "error" });
              }
            }
          );
        }
      });
      if (item.inscompany == "永诚财险") {
        this.$api.letter.orderStatusyongcheng(item.id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.quotationhistorydialogVisible ? this.RadioHistoryChange() : "";
            this.findPage();
              item.querystatusLoaing = false;
          } else {
              item.querystatusLoaing = false;
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      if (item.inscompany == "华泰财险") {
        let HtApiType =
          item.apiType == 2 ? "pychonverifyPayment" : "updateOrderInfoHuatai";

        this.$api.letter[HtApiType]({
          [item.apiType == 2 ? "subOrderNo" : "companyId"]: item.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.quotationhistorydialogVisible ? this.RadioHistoryChange() : "";
            this.findPage();
              item.querystatusLoaing = false;
          } else {
              item.querystatusLoaing = false;
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      if (item.inscompany == "大家财险") {
        let DJApiType =
          item.apiType == 2 ? "pychonverifyPayment" : "updateOrderInfoDajia";

        this.$api.letter[DJApiType]({
          [item.apiType == 2 ? "subOrderNo" : "companyId"]: item.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.quotationhistorydialogVisible ? this.RadioHistoryChange() : "";
            this.findPage();
              item.querystatusLoaing = false;
          } else {
              item.querystatusLoaing = false;
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      // item.inscompany == "诚泰财险" ||
      if (item.inscompany == "诚泰财险") {
        // 中煤财险: "paymentEnquiry",
        let CtApiType =
          item.apiType == 2 ? "pychonverifyPayment" : "getOrderDetailchengtai";

        this.$api.letter[CtApiType]({
          [item.apiType == 2 ? "subOrderNo" : "companyId"]: item.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.quotationhistorydialogVisible ? this.RadioHistoryChange() : "";
            this.findPage();
              item.querystatusLoaing = false;
          } else {
              item.querystatusLoaing = false;
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      if (item.inscompany == "中煤财险") {
        // 中煤财险: "paymentEnquiry",
        let ZMApiType =
          item.apiType == 2 ? "pychonverifyPayment" : "paymentEnquiry";

        this.$api.letter[ZMApiType]({
          [item.apiType == 2 ? "subOrderNo" : "companyId"]: item.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.quotationhistorydialogVisible ? this.RadioHistoryChange() : "";
            this.findPage();
              item.querystatusLoaing = false;
          } else {
              item.querystatusLoaing = false;
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      if (item.inscompany == "紫金财险") {
        // 中煤财险: "paymentEnquiry",
        let ZJApiType =
          item.apiType == 2 ? "pychonverifyPayment" : "getOrderDetail";

        this.$api.letter[ZJApiType]({
          [item.apiType == 2 ? "subOrderNo" : "companyId"]: item.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.quotationhistorydialogVisible ? this.RadioHistoryChange() : "";
            this.findPage();
              item.querystatusLoaing = false;
          } else {
              item.querystatusLoaing = false;
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      if (
        item.inscompany == "恒邦财险" ||
        item.inscompany == "太平洋财险" ||
        item.inscompany == "众安平安" ||
        item.inscompany == "中国人寿" ||
        item.inscompany == "人保财险" ||
        item.inscompany == "安盛天平" ||
        item.inscompany == "太平财险" ||
        item.inscompany == "泰康财险" ||
        item.inscompany == "华农财险" ||
        item.inscompany == "华安财险" ||
        item.inscompany == "泰山财险" ||
        item.inscompany == "永安财险" ||
        item.inscompany == "大地财险" ||
        item.inscompany == "申能财险"
      ) {
        this.$api.letter
          .pychonverifyPayment({ subOrderNo: item.id })
          .then((res) => {
            if (res.code == "200") {
              this.$message({
                message: "订单支付成功，正在更改状态",
                type: "success",
              });
              this.quotationhistorydialogVisible
                ? this.RadioHistoryChange()
                : "";
              this.findPage();
                item.querystatusLoaing = false;
            } else {
                item.querystatusLoaing = false;
              this.$message({ message: res.msg, type: "error" });
            }
          });
      }
    },
    cancelorder(item) {
      if (item.inscompany == "紫金财险") {
        this.$api.letter
          .zijincancelorder({ companyId: item.id })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.findPage();
            }
          });
      } else if (item.inscompany == "诚泰财险") {
        this.$api.letter
          .chengtaicancelorder({ companyId: item.id })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.findPage();
            }
          });
      } else if (item.inscompany == "阳光财险") {
        this.$api.letter
          .yangGuangautoWriteOff({ companyId: item.id })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.findPage();
            }
          });
      }
    },
    //二维码
    carcode(item) {
      this.apiType = item.apiType;
      this.$api.letter.getQrCode(item.id).then((res) => {
        if (res.code == "200") {
          this.inscompany = res.data.inscompany; //保险公司
          this.sumpremium = res.data.sumpremium; //总价
          this.licenseNo = res.data.cPlateNo; //车牌号
          this.applyName = res.data.cApplyNme; //车主
          this.jqpremium = res.data.jqpremium; //交强
          this.sypremium = res.data.sypremium; //商业
          this.taxamount = res.data.taxamount; //车船税
          this.jypremium = res.data.jypremium; //驾意险
          this.jqstartdate = res.data.jqStartDate; //交强起保日期
          this.systartdate = res.data.syStartDate; //商业起保日期
          // this.mobile = res.data.applyinfo.mobile;//投保人手机号
          let qrCodeUrl = res.data.qrCodeUrl;
          this.$api.letter.getThemeByUserId(this.userIdPor).then((res) => {
            if (res.code == 200) {
              if (res.data[0] == "GD") {
                this.codedialogVisiblePro = true;
                this.qrcodeWidth = "154";
                this.qrcodeHeight = "154";
              } else {
                this.codedialogVisible = true;
              }
              this.$nextTick(function () {
                this.creatQrCode(qrCodeUrl);
              });
            }
          });
        } else {
          this.$message({ message: res.msg, type: "warning" });
        }
      });
      // 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.jypremium = res.data.jypremium;//驾意险
      //     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 "紫金财险":
      //         this.$nextTick(() => {
      //           this.creatQrCode(res.data.paymentLink);
      //         });
      //         break;
      //       case "众安平安":
      //       this.paycodeimg = res.data.paymentLink;
      //         break;
      //       case "中国人寿":
      //         this.$nextTick(() => {
      //           this.creatQrCode(res.data.paymentLink);
      //         });
      //         break;
      //       case "恒邦财险":
      //         this.paycodeimg = 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" })
      //   }
      // })
    },

    signature(row) {
      this.$api.letter.pingAnsignEleApply({ companyId: row.id }).then((res) => {
        if (res.code == 200 && res.data) {
          this.resultMessageImg = process.env.BASE_URL + res.data.resultMessage;
          this.signaturedialogVisible = true;
          // 查找并删除旧的二维码DOM元素
          // let element = document.getElementById("signaturecode");
          // while (element.firstChild) {
          //   element.removeChild(element.firstChild);
          // }
          // this.signaturecode = new QRCode("signaturecode", {
          //   text:  resultMessage,
          //   width: 180,
          //   height: 180,
          //   colorDark: "#000000",
          //   colorLight: "#ffffff",
          //   correctLevel: QRCode.CorrectLevel.H,
          // });
        } else {
          this.$message({
            message: res.msg || "暂无数据！",
            type: "warning",
          });
        }
      });
    },
    orderTrajectory(row, item) {
      this.$api.letter.queryBySuborderDetails(item.id).then((res) => {
        if (res.code == 200 && res.data.length > 0) {
          this.ddgjdialogVisible = true;
          this.trajectoryTable = res.data;
        } else {
          this.$message({
            message: res.msg || "暂无数据！",
            type: "warning",
          });
        }
      });
    },
    capTypedictTag(val, option) {
      if (option.find((item) => item.dictValue == val)) {
        return option.find((item) => item.dictValue == val).dictTag;
      } else {
        return "-";
      }
    },
    //补录订单
    supplementOrder(item) {
      let params = {
        companyId: item.id,
      };
      this.$api.letter.getByCompanyId(params).then((res) => {
        if (res.code == "200") {
          this.$router.push({
              path: "/task/external/externalOrders",
              query: { data: res.data },
            });
        }
      })
    },

    //应用详情
    OrderDetails(dy, item) {
      console.log(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; //保险公司
          // res.data.carinfo.carnature = this.natureOfVehicleUseCap(
          //   res.data.carinfo.carnature
          // );
          if (
            (res.data.carinfo.carnature &&
              res.data.carinfo.carnature == "02") ||
            res.data.carinfo.carnature == "非营业"
          ) {
            res.data.carinfo.vehicleUse = this.capTypedictTag(
              res.data.carinfo.vehicleUse,
              this.outOfBusinessVehicleUseoptions
            );
          } else {
            res.data.carinfo.vehicleUse = this.capTypedictTag(
              res.data.carinfo.vehicleUse,
              this.businessVehicleUseoptions
            );
          }
          res.data.carinfo.carnature = this.capTypedictTag(
            res.data.carinfo.carnature,
            this.natureOfVehicleUseoptions
          );
          res.data.carinfo.cartype = res.data.carinfo.cartype
            ? this.capTypedictTag(
              res.data.carinfo.cartype,
              this.trafficManagementVehicleTypeoptions
            )
            : "";
          res.data.carinfo.cimodelclass = res.data.carinfo.cimodelclass
            ? this.capTypedictTag(
              res.data.carinfo.cimodelclass,
              this.vehicleTypeoptions
            )
            : "";
          res.data.carinfo.energyType = res.data.carinfo.energyType
            ? this.capTypedictTag(
              res.data.carinfo.energyType,
              this.energyTypeoptions
            )
            : "";
          if (res.data.accidentInfo) {
            res.data.accidentInfo.constructor === Object
              ? [res.data.accidentInfo]
              : res.data.accidentInfo;
          }
          Object.assign(this.orderInfo, res.data);
          if (this.orderInfo.riskinfo && this.orderInfo.riskinfo.length > 0) {
            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 = resImage.data[keys].url
                  ? process.env.BASE_URL + resImage.data[keys].url
                  : null;
                switch (keys) {
                  case "C01":
                  case "D01":
                    resImage.data[keys].url
                      ? this.carImageList.push(resImage.data[keys].url)
                      : "";
                    break;
                  case "C02":
                  case "D02":
                    resImage.data[keys].url
                      ? this.ownerImageList.push(resImage.data[keys].url)
                      : "";
                    break;
                  case "C03":
                  case "D03":
                    resImage.data[keys].url
                      ? this.policyImageList.push(resImage.data[keys].url)
                      : "";
                    break;
                  case "C04":
                  case "D04":
                    resImage.data[keys].url
                      ? this.insuredImageList.push(resImage.data[keys].url)
                      : "";
                    break;
                  case "XC00":
                  case "GC00":
                  case "GX00":
                    resImage.data[keys].url
                      ? this.carCheckImageList.push(resImage.data[keys].url)
                      : "";
                    break;
                  default:
                    break;
                }
              }
            });
            let obj = {
              carImageList: this.carImageList,
              ownerImageList: this.ownerImageList,
              policyImageList: this.policyImageList,
              insuredImageList: this.insuredImageList,
              carCheckImageList: this.carCheckImageList,
            };
            this.$refs.detailsDialog.imageFun(obj);
          });
          this.pic1Control = false;
          this.pic2Control = false;
          this.pic3Control = false;
          this.pic4Control = false;
          this.pic5Control = false;
          this.oldfileList = [];
          let businessList = [];
          let accidentList = [];
          if (res.data.orderstatus == "3") {
            /**
            if (res.data.isExternal == 1) {
              this.$api.letter
                .getPolicyPrintexternalOrder(res.data.id)
                .then((res1) => {
                  if (res1.code == 200) {
                    if (res1.data.jqPolicy) {
                      this.oldfileList.push({
                        fileTitle: "交强电子保单",
                        filename: this.orderInfo.jqpolicyno,
                        fileurl: res1.data.jqPolicy,
                      });
                    }
                    if (res1.data.jqSign) {
                      this.oldfileList.push({
                        fileTitle: "交强电子标志",
                        filename: this.orderInfo.jqpolicyno,
                        fileurl: res1.data.jqSign,
                      });
                    }
                    if (res1.data.syPolicy) {
                      businessList.push({
                        fileTitle: "商业电子保单",
                        filename: "商业电子保单",
                        fileurl: res1.data.syPolicy,
                      });
                    }
                    if (res1.data.noPolicy) {
                      accidentList.push({
                        fileTitle: "驾意险保单",
                        filename: "驾意险保单",
                        fileurl: res1.data.noPolicy,
                      });
                    }
                  } else {
                    this.$message.error(res1.msg);
                  }
                });
            } else {
              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) => {
                            if (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) => {
                            if (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) => {
                            if (path) {
                              businessList.push({
                                fileTitle: "商业电子保单",
                                filename: this.orderInfo.sypolicyno,
                                fileurl: path,
                              });
                            }
                          });
                        }
                      });
                  }
                  break;
                case "华泰财险":
                  switch (item.apiType) {
                    case 1:
                      if (this.orderInfo.jqpolicyno) {
                        this.$api.letter
                          .HuataigetPolicyPrint({
                            companyId: item.id,
                            riskCode: "0507",
                            type: "2", //2:保单
                          })
                          .then((res) => {
                            if (res.data) {
                              if (res.data.jqxPolicyUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子保单",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxPolicyUrl,
                                });
                              }
                              if (res.data.jqxFlagUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子标志",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxFlagUrl,
                                });
                              }
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                      }
                      if (this.orderInfo.sypolicyno) {
                        this.$api.letter
                          .HuataigetPolicyPrint({
                            companyId: item.id,
                            riskCode: "0510",
                            type: "2", //2:保单
                          })
                          .then((res) => {
                            if (res.data && res.data.syxPolicyUrl) {
                              businessList.push({
                                fileTitle: "商业电子保单",
                                filename: this.orderInfo.sypolicyno,
                                fileurl: res.data.syxPolicyUrl,
                              });
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                      }
                      break;
                    case 2:
                      if (
                        this.orderInfo.jqpolicyno ||
                        this.orderInfo.sypolicyno
                      ) {
                        this.$api.letter
                          .pythongetPolicyPrint({
                            subOrderNo: item.id,
                          })
                          .then((res) => {
                            if (res.code == 200 && res.data) {
                              if (res.data.jqxPolicyUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子保单",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxPolicyUrl,
                                });
                              }
                              if (res.data.jqxFlagUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子标志",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxFlagUrl,
                                });
                              }
                              if (res.data.syxPolicyUrl) {
                                businessList.push({
                                  fileTitle: "商业电子保单",
                                  filename: this.orderInfo.sypolicyno,
                                  fileurl: res.data.syxPolicyUrl,
                                });
                              }
                              if (
                                res.data.jyxInfoList &&
                                res.data.jyxInfoList.length > 0
                              ) {
                                res.data.jyxInfoList.forEach((val) => {
                                  accidentList.push({
                                    fileTitle: "驾意险保单",
                                    filename: "驾意险保单",
                                    fileurl: val.jyx_policy_url,
                                  });
                                });
                              }
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                      }
                      break;
                  }

                  break;
                case "中煤财险":
                  switch (item.apiType) {
                    case 1:
                    if (this.orderInfo.jqpolicyno) {
                      this.$api.letter
                        .ZhongmeigetPolicyPrint({
                          companyId: item.id,
                          riskCode: "0507",
                          type: "2", //2:保单
                        })
                        .then((res) => {
                          if (res.data && res.data[0]) {
                            this.oldfileList.push({
                              fileTitle: "交强电子保单",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: res.data[0],
                            });
                          } else {
                            this.$message.error(res.msg);
                          }
                        });
                      this.$api.letter
                        .ZhongmeigetPolicyPrint({
                          companyId: item.id,
                          riskCode: "0507",
                          type: "1", // 1：标志
                        })
                        .then((res) => {
                          if (res.data && res.data[0]) {
                            this.oldfileList.push({
                              fileTitle: "交强电子标志",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: res.data[0],
                            });
                          } else {
                            this.$message.error(res.msg);
                          }
                        });
                    }
                    if (this.orderInfo.sypolicyno) {
                      this.$api.letter
                        .ZhongmeigetPolicyPrint({
                          companyId: item.id,
                          riskCode: "0510",
                          type: "2", //2:保单
                        })
                        .then((res) => {
                          if (res.data && res.data[0]) {
                            businessList.push({
                              fileTitle: "商业电子保单",
                              filename: this.orderInfo.sypolicyno,
                              fileurl: res.data[0],
                            });
                          } else {
                            this.$message.error(res.msg);
                          }
                        });
                    }
                    if (this.orderInfo.crossInsurance.length > 0) {
                      this.orderInfo.crossInsurance.map((ele) => {
                        this.$api.letter
                          .ZhongmeigetPolicyPrint({
                            ridePolicyNo: ele.ridePolicyNo,
                            companyId: item.id,
                            riskCode: "0513",
                            type: "2", //2:保单
                          })
                          .then((res) => {
                            if (res.code == 200 && res.data) {
                              accidentList.push({
                                fileTitle: "驾意险保单",
                                filename: this.orderInfo.sypolicyno,
                                fileurl: res.data[0],
                              });
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                      });
                    }
                    break;
                    case 2:
                      if (
                        this.orderInfo.jqpolicyno ||
                        this.orderInfo.sypolicyno
                      ) {
                        this.$api.letter
                          .pythongetPolicyPrint({
                            subOrderNo: item.id,
                          })
                          .then((res) => {
                            if (res.code == 200 && res.data) {
                              if (res.data.jqxPolicyUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子保单",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxPolicyUrl,
                                });
                              }
                              if (res.data.jqxFlagUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子标志",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxFlagUrl,
                                });
                              }
                              if (res.data.syxPolicyUrl) {
                                businessList.push({
                                  fileTitle: "商业电子保单",
                                  filename: this.orderInfo.sypolicyno,
                                  fileurl: res.data.syxPolicyUrl,
                                });
                              }
                              if (
                                res.data.jyxInfoList &&
                                res.data.jyxInfoList.length > 0
                              ) {
                                res.data.jyxInfoList.forEach((val) => {
                                  accidentList.push({
                                    fileTitle: "驾意险保单",
                                    filename: "驾意险保单",
                                    fileurl: val.jyx_policy_url,
                                  });
                                });
                              }
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                      }
                      break;
                  }

                  break;
                case "永诚财险":
                  if (this.orderInfo.jqpolicyno) {
                    this.$api.letter
                      .yongchenggetPolicyPrint({
                        companyId: item.id,
                        riskCode: "0507",
                        type: "2", //2:保单
                      })
                      .then((res) => {
                        if (res.code == 200 && res.data) {
                          if (res.data.jqUrl) {
                            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,
                            });
                          }
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  if (this.orderInfo.sypolicyno) {
                    this.$api.letter
                      .yongchenggetPolicyPrint({
                        companyId: item.id,
                        riskCode: "0510",
                        type: "2", //2:保单
                      })
                      .then((res) => {
                        if (res.data && res.data.syUrl) {
                          businessList.push({
                            fileTitle: "商业电子保单",
                            filename: this.orderInfo.sypolicyno,
                            fileurl: res.data.syUrl,
                          });
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  if (this.orderInfo.crossInsurance.length > 0) {
                    this.orderInfo.crossInsurance.map((ele) => {
                      this.$api.letter
                        .yongchenggetPolicyPrint({
                          companyId: item.id,
                          policyNumber: ele.policyNumber,
                          riskCode: "0513",
                          type: "2", //2:保单
                        })
                        .then((res) => {
                          if (res.code == 200 && res.data) {
                            accidentList.push({
                              fileTitle: "驾意险保单",
                              filename: ele.policyNumber,
                              fileurl: res.data.jyUrl,
                            });
                          } else {
                            this.$message.error(res.msg);
                          }
                        });
                    });
                  }
                  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,
                          });
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                    this.$api.letter
                      .guoRengetPolicyPrint({
                        companyId: item.id,
                        riskCode: "0507",
                        type: "1", //1:标志
                      })
                      .then((res) => {
                        if (res.data) {
                          this.oldfileList.push({
                            fileTitle: "交强电子标志",
                            filename: this.orderInfo.jqpolicyno,
                            fileurl: res.data,
                          });
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  if (this.orderInfo.sypolicyno) {
                    this.$api.letter
                      .guoRengetPolicyPrint({
                        companyId: item.id,
                        riskCode: "0510",
                        type: "2", //2:保单
                      })
                      .then((res) => {
                        if (res.data) {
                          businessList.push({
                            fileTitle: "商业电子保单",
                            filename: this.orderInfo.sypolicyno,
                            fileurl: res.data,
                          });
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  if (this.orderInfo.crossInsurance.length > 0) {
                    this.orderInfo.crossInsurance.map((ele) => {
                      this.$api.letter
                        .guoRengetPolicyPrint({
                          companyId: item.id,
                          policyNumber: ele.policyNumber,

                          riskCode: "0513",
                          type: "2", //2:保单
                        })
                        .then((res) => {
                          if (res.data) {
                            accidentList.push({
                              fileTitle: "驾意险保单",
                              filename: ele.policyNumber,
                              fileurl: res.data,
                            });
                          } else {
                            this.$message.error(res.msg);
                          }
                        });
                    });
                  }
                  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,
                          });
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                    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,
                          });
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  if (this.orderInfo.sypolicyno) {
                    this.$api.letter
                      .zijingetPolicyPrint({
                        companyId: item.id,
                        riskCode: "0510",
                        type: "2", //2:保单
                      })
                      .then((res) => {
                        if (res.data) {
                          businessList.push({
                            fileTitle: "商业电子保单",
                            filename: this.orderInfo.sypolicyno,
                            fileurl: res.data,
                          });
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  if (this.orderInfo.crossInsurance.length > 0) {
                    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) {
                            accidentList.push({
                              fileTitle: "驾意险保单",
                              filename: ele.policyNumber,
                              fileurl: res.data,
                            });
                          } else {
                            this.$message.error(res.msg);
                          }
                        });
                    });
                  }
                  break;
                case "渤海财险":
                  if (this.orderInfo.jqpolicyno) {
                    this.$api.letter
                      .getPolicyPrintboHai({
                        companyId: item.id,
                      })
                      .then((res) => {
                        if (res.code == 200 && res.data) {
                          if (res.data.jqxPolicyUrl) {
                            this.oldfileList.push({
                              fileTitle: "交强电子保单",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: res.data.jqxPolicyUrl,
                            });
                          }
                          if (res.data.jqxFlagUrl) {
                            this.oldfileList.push({
                              fileTitle: "交强电子标志",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: res.data.jqxFlagUrl,
                            });
                          }
                          if (res.data.syxPolicyUrl) {
                            businessList.push({
                              fileTitle: "商业电子保单",
                              filename: this.orderInfo.sypolicyno,
                              fileurl: res.data.syxPolicyUrl,
                            });
                          }
                          if (
                            res.data.jyxInfoList &&
                            res.data.jyxInfoList.length > 0
                          ) {
                            res.data.jyxInfoList.forEach((val) => {
                              accidentList.push({
                                fileTitle: "驾意险保单",
                                filename: "驾意险保单",
                                fileurl: val.jyx_policy_url,
                              });
                            });
                          }
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  break;
                case "平安财险":
                  if (this.orderInfo.jqpolicyno) {
                    this.$api.letter
                      .pingangetPolicyPrint({
                        companyId: item.id,
                      })
                      .then((res) => {
                        if (res.code == 200 && res.data) {
                          if (res.data.jqxPolicyUrl) {
                            this.oldfileList.push({
                              fileTitle: "交强电子保单",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: process.env.BASE_URL + res.data.jqxPolicyUrl,
                            });
                          }
                          if (res.data.jqxFlagUrl) {
                            this.oldfileList.push({
                              fileTitle: "交强电子标志",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: process.env.BASE_URL + res.data.jqxFlagUrl,
                            });
                          }
                          if (res.data.syxPolicyUrl) {
                            businessList.push({
                              fileTitle: "商业电子保单",
                              filename: this.orderInfo.sypolicyno,
                              fileurl: process.env.BASE_URL + res.data.syxPolicyUrl,
                            });
                          }
                          if (
                            res.data.jyxInfoList &&
                            res.data.jyxInfoList.length > 0
                          ) {
                            res.data.jyxInfoList.forEach((val) => {
                              accidentList.push({
                                fileTitle: "驾意险保单",
                                filename: "驾意险保单",
                                fileurl: process.env.BASE_URL + val.jyx_policy_url,
                              });
                            });
                          }
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  break;
                case "诚泰财险":
                case "恒邦财险":
                case "安盛天平":
                case "中国人寿":
                case "太平财险":
                case "华农财险":
                case "众安平安":
                case "泰康财险":
                  if (this.orderInfo.jqpolicyno || this.orderInfo.sypolicyno) {
                    this.$api.letter
                      .pythongetPolicyPrint({
                        subOrderNo: item.id,
                      })
                      .then((res) => {
                        if (res.code == 200 && res.data) {
                          if (res.data.jqxPolicyUrl) {
                            this.oldfileList.push({
                              fileTitle: "交强电子保单",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: res.data.jqxPolicyUrl,
                            });
                          }
                          if (res.data.jqxFlagUrl) {
                            this.oldfileList.push({
                              fileTitle: "交强电子标志",
                              filename: this.orderInfo.jqpolicyno,
                              fileurl: res.data.jqxFlagUrl,
                            });
                          }
                          if (res.data.syxPolicyUrl) {
                            businessList.push({
                              fileTitle: "商业电子保单",
                              filename: this.orderInfo.sypolicyno,
                              fileurl: res.data.syxPolicyUrl,
                            });
                          }
                          if (
                            res.data.jyxInfoList &&
                            res.data.jyxInfoList.length > 0
                          ) {
                            res.data.jyxInfoList.forEach((val) => {
                              accidentList.push({
                                fileTitle: "驾意险保单",
                                filename: "驾意险保单",
                                fileurl: val.jyx_policy_url,
                              });
                            });
                          }
                        } else {
                          this.$message.error(res.msg);
                        }
                      });
                  }
                  break;
                case "大家财险":
                  switch (item.apiType) {
                    case 1:
                      if (this.orderInfo.jqpolicyno) {
                        this.$api.letter
                          .obtainWarranty({
                            companyId: item.id,
                            riskCode: "0507",
                            type: "2", //2:保单
                          })
                          .then((res) => {
                            if (res.data) {
                              this.oldfileList.push({
                                fileTitle: "交强电子保单",
                                filename: this.orderInfo.jqpolicyno,
                                fileurl: res.data,
                              });
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                        this.$api.letter
                          .obtainWarranty({
                            companyId: item.id,
                            riskCode: "0507",
                            type: "1", //1:标志
                          })
                          .then((res) => {
                            if (res.data) {
                              this.oldfileList.push({
                                fileTitle: "交强电子标志",
                                filename: this.orderInfo.jqpolicyno,
                                fileurl: res.data,
                              });
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                      }
                      if (this.orderInfo.sypolicyno) {
                        this.$api.letter
                          .obtainWarranty({
                            companyId: item.id,
                            riskCode: "0510",
                            type: "2", //2:保单
                          })
                          .then((res) => {
                            if (res.data) {
                              businessList.push({
                                fileTitle: "商业电子保单",
                                filename: this.orderInfo.sypolicyno,
                                fileurl: res.data,
                              });
                            }
                          });
                      }
                      if (this.orderInfo.crossInsurance.length > 0) {
                        this.orderInfo.crossInsurance.map((ele) => {
                          this.$api.letter
                            .obtainWarranty({
                              companyId: item.id,
                              policyNumber: ele.policyNumber,
                              riskCode: "0513",
                              type: "2", //2:保单
                            })
                            .then((res) => {
                              if (res.data) {
                                accidentList.push({
                                  fileTitle: "驾意险保单",
                                  filename: ele.policyNumber,
                                  fileurl: res.data,
                                });
                              } else {
                                this.$message.error(res.msg);
                              }
                            });
                        });
                      }
                      break;
                    case 2:
                      if (
                        this.orderInfo.jqpolicyno ||
                        this.orderInfo.sypolicyno
                      ) {
                        this.$api.letter
                          .pythongetPolicyPrint({
                            subOrderNo: item.id,
                          })
                          .then((res) => {
                            if (res.code == 200 && res.data) {
                              if (res.data.jqxPolicyUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子保单",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxPolicyUrl,
                                });
                              }
                              if (res.data.jqxFlagUrl) {
                                this.oldfileList.push({
                                  fileTitle: "交强电子标志",
                                  filename: this.orderInfo.jqpolicyno,
                                  fileurl: res.data.jqxFlagUrl,
                                });
                              }
                              if (res.data.syxPolicyUrl) {
                                businessList.push({
                                  fileTitle: "商业电子保单",
                                  filename: this.orderInfo.sypolicyno,
                                  fileurl: res.data.syxPolicyUrl,
                                });
                              }
                              if (
                                res.data.jyxInfoList &&
                                res.data.jyxInfoList.length > 0
                              ) {
                                res.data.jyxInfoList.forEach((val) => {
                                  accidentList.push({
                                    fileTitle: "驾意险保单",
                                    filename: "驾意险保单",
                                    fileurl: val.jyx_policy_url,
                                  });
                                });
                              }
                            } else {
                              this.$message.error(res.msg);
                            }
                          });
                      }
                      break;
                  }

                  break;
                default:
              }
            }

            let obj = {
              oldfileList: this.oldfileList,
              businessList,
              accidentList,
            };

            this.$refs.detailsDialog.warrantyFun(obj);
            */
            this.$api.readPdf.readPdfUrlList(this.orderInfo.id).then((res) => {
              console.log(res.data);
              if (res.code == 200) {
                this.$refs.detailsDialog.warrantyFun(res.data);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
          console.log(this.orderInfo);
          this.showInsureList = false;
          this.$refs.detailsDialog.setBackupVisible(true);
        } else {
          this.$message.error("订单获取失败");
        }
      });
    },
    //联级选择器触发事件
    handleChange(val) {
      if (val.length !== 0) {
        this.pageRequest.deptId = val.at(-1);
      } else {
        this.pageRequest.deptId = "";
      }
    },
    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");
    // },
    // //表格行点击下拉事件
    // handleRowClick(row) {
    //   if(!row.expanded){
    //     this.$api.letter.querySonOrders({orderNo:row.orderno}).then(res=>{
    //     if(res.code=='200' && res.data.length!=0){
    //       this.pageResult.map(item=>{
    //         if(item.orderno===row.orderno){
    //           item.insAreaCompanyList=res.data;
    //         }
    //         return item;
    //       })
    //         row.expanded = !row.expanded;
    //         this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
    //     }else{
    //       this.$message.info("暂无数据");
    //     }
    //   })
    //   }else{
    //     row.expanded = !row.expanded;
    //         this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
    //   }
    // },
    handleRowChange: debounce(function (row, expandedRows) {
      console.log(expandedRows);
      if (expandedRows.length > 0) {
        this.$api.letter
          .querySonOrders({ orderNo: row.orderno })
          .then((res) => {
            if (res.code == "200" && res.data.length != 0) {
              this.pageResult.map((item) => {
                if (item.orderno === row.orderno) {
                  item.insAreaCompanyList = res.data.map(item => {
                      return {
                          ...item,
                          querystatusLoaing: false
                      }
                  });
                }
                return item;
              });
              row.expanded = !row.expanded;
              this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
            } else {
              this.$message.info("暂无数据");
            }
          });
      }
      // else {
      //   row.expanded = !row.expanded;
      //   this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
      // }
    }, 500), // 300 毫秒内不会重复触发,

    // handleRowChange(row) {
    //   if (!row.expanded) {
    //     this.$api.letter
    //       .querySonOrders({ orderNo: row.orderno })
    //       .then((res) => {
    //         if (res.code == "200" && res.data.length != 0) {
    //           this.pageResult.map((item) => {
    //             if (item.orderno === row.orderno) {
    //               item.insAreaCompanyList = res.data;
    //             }
    //             return item;
    //           });
    //           row.expanded = !row.expanded;
    //           this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
    //         } else {
    //           this.$message.info("暂无数据");
    //         }
    //       });
    //   } else {
    //     row.expanded = !row.expanded;
    //     this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
    //   }
    // },
    //数据
    findPage() {
      this.orderLoaing = true;
      let orderStatus = "";
      if (this.isLetterOrder) {
        orderStatus =
          this.pageRequest.orderStatus == 888
            ? ""
            : this.pageRequest.orderStatus;
        this.$api.letter
          .queryOrders({ ...this.pageRequest, orderStatus })
          .then((res) => {
            if (res.code == "200") {
              this.orderLoaing = false;
              this.pageResult = res.data.content;
              this.pageNum = res.data.pageNum;
              this.totalSize = res.data.totalSize;
              this.pageResult.forEach((val, index) => {
                this.$set(val, "expanded", false);
              });
            } else {
              this.$message.error(res.msg);
              this.orderLoaing = false;
            }
          });
      } else {
        orderStatus = this.statusPor == 888 ? "" : this.statusPor;
        this.$api.task
          .queryPageHospitalityOrder({
            ...this.pageRequest,
            orderStatus,
            userId: this.userIdPor,
            deptId: this.deptIdPor,
          })
          .then((res) => {
            if (res.code == "200") {
              this.orderLoaing = false;
              this.$nextTick(() => {
                this.pageResult = res.data.content;
                this.pageNum = res.data.pageNum;
                this.totalSize = res.data.totalSize;
                this.pageResult.forEach((val, index) => {
                  this.$set(val, "expanded", false);
                });
              });
            } else {
              this.$message.error(res.msg);
              this.orderLoaing = false;
            }
          });
      }
    },
    //查询
    onSubmit() {
      this.pageRequest.pageNum = 1;
      this.pageRequest.pageSize = 20;
      this.findPage();
    },
    //时间js
    monthChange(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 lang="scss" scoped>
.scan-code {
  div {
    margin-top: 10px;
  }
}

.green_color {
  color: #068069;
  border: 1px solid #068069;
  padding: 7px 8px;
}

.red_color {
  color: var(--themeColor);
  border: 1px solid var(--themeColor);
  padding: 7px 8px;
}

.blue_color {
  color: #2d4d89;
  border: 1px solid #2d4d89;
  padding: 7px 8px;
}

.el-dropdown {
  font-size: 12px;
}

.el-step__description>span {
  margin-right: 10px;
}

/deep/ {
  .proSaomazhifucodeClass .el-dialog__header {
    background: rgba(45, 77, 137, 0.1);
    font-weight: bold;
  }

  .proSaomazhifucodeClass .el-dialog__footer {
    border-top: 1px solid #eef1f6;
  }

  .el-step__head {
    min-height: 90px;
  }

  .el-table .row-expand-cover .cell .el-table__expand-icon {
    display: none;
  }

  .el-descriptions-item__label {
    &:not(.is-bordered-label) {
      color: #333;
    }
  }

  .saomazhifucodeClass .el-dialog__body,
  .saomazhifucodeClass .el-dialog__header,
  .saomazhifucodeClass .el-dialog__footer {
    padding: 0;
    background: #f4e9e9;
  }

  .saomazhifucodeClass .el-dialog__body {
    padding: 15px;
  }

  .saomazhifucodeClass .el-dialog__footer {
    background: #f4e9e9;
    padding-bottom: 15px;
  }

  .saomazhifucodeClass .el-dialog__headerbtn {
    margin-top: 10px;
  }

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

.ORcodebody {
  height: auto;
  // background: url(../../../assets/image/group.png) #fff;
  padding: 16px;
  background-color: #fff;
}

.ORcode {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;

  &>div {
    width: 176px;
    height: 176px;
    border: 1px solid var(--themeColor);
    border-radius: 5px;
  }
}

.ORtitle {
  width: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;

  &>div {
    width: 100%;
    margin: 10px 0;
    font-size: 14px;

    &>span {
      &:nth-child(1) {
        color: #868b98;
        text-align: end;
        width: 150px;
      }

      &:nth-child(2) {
        color: #333333;
      }
    }
  }
}
</style>
<style scoped lang="scss">
#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;
  box-sizing: border-box;
}

.block {
  margin-top: 10px;
}

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

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

.widths {
  width: 200px;
}

.demo-table-expand {
  /* width:96vw; */
  height: auto;
  padding: 10px 20px 10px 50px;
  font-size: 14px;
}

.demo-table-expand-time {
  width: 40%;
}

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

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

.Enclosure {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.headers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 5px 0;
  font-weight: bold;
  color: #333;
}

/* 内容待定 */
.headers_Custom {
  div {
    padding: 2px 0px;
    font-size: 14px;

    &>span {
      color: rgb(226, 118, 10);
    }
  }
}

.back {
  color: #303133;
  font-weight: 700;
}

.u-f-ac {
  -webkit-box-align: center;
  align-items: center;
  /* padding: 10px; */
}

.bodyTitle {
  height: 40px;
  background: #f3f3f3;
  border: 1px solid #dddddd;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
}

.Risk {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.Risk_title {
  width: 100%;
  height: 40px;
}

.Risk_title>div {
  background: rgb(199, 20, 45);
  color: rgb(255, 255, 255);
  height: 100%;
  font-weight: 500;
  width: 33.3%;
  padding: 10px 20px;
  box-sizing: border-box;
  border: #fff solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;
}

.Risk_title>div:nth-child(2) {
  border-left: none;
  border-right: none;
}

.Risk_data {
  width: 100%;
  height: 40px;
}

.Risk_data>div {
  background: #fbf6f7;
  color: rgb(51, 51, 51);
  height: 100%;
  font-weight: 500;
  width: 33.3%;
  padding: 10px 20px;
  box-sizing: border-box;
  border: #fff solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;
}

.Risk_data>div :nth-child(2) {
  border-left: none;
  border-right: none;
}

.Risk_title>div :nth-child(3) {
  border-top-right-radius: 10px;
}

.jyxStyle>span {
  display: inline-block;
  text-align: center;
}

/* .el-step__description{
    color:#333
  } */
/deep/ {
  .el-step__title,
  .el-step__icon-inner {
    color: var(--themeColor);
  }

  .el-step__description.is-finish,
  .el-step__head.is-finish {
    color: #333;
    border: none;
  }

  .el-step__icon.is-text {
    border: none;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
  }

  .el-step__icon.is-text {
    font-size: 22px;
  }

  .el-step__icon {
    width: 28px;
    height: 28px;
  }

  .el-step.is-vertical .el-step__main {
    padding-left: 20px;
  }

  .el-step__line,
  .el-step.is-vertical .el-step__line {
    left: 14px;
    background-color: #e2e5eb;
    width: 1px;
  }

  .el-step__line-inner {
    height: 0;
    display: none;
  }

  .is-flex {
    .el-step__icon {
      background: var(--themeColor);
    }

    .el-step__icon-inner {
      color: #fff;
    }
  }

  .styleB {
    height: 128px;
  }

  .styleB .el-upload--picture-card {
    display: none;
  }
}

.tab-style {
  width: 110px;

  li {
    text-align: right;
    padding-right: 20px;
    line-height: 40px;
    cursor: pointer;
    box-sizing: border-box;
    border-right: 1px solid #e2e5eb;
  }

  li:focus {
    background: rgba(212, 36, 38, 0.1);
    border-right: 2px solid var(--themeColor);
    color: var(--themeColor);
  }
}

.tabLi-style {
  background: rgba(212, 36, 38, 0.1);
  border-right: 2px solid var(--themeColor);
  color: var(--themeColor);
}

.aaa {
  /deep/ {
    margin-bottom: 20px;
    margin-right: 50px;

    span {
      display: inline-block;
      margin-bottom: 10px;
    }

    .el-upload .el-upload-dragger {
      width: 180px;
      height: 120px;
      border: 1px dashed #c0ccda;
      padding: 0;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 180px;
      height: 120px;
    }

    .el-upload-list__item:first-child {
      margin-top: 0;
    }

    .el-upload--picture-card {
      width: 180px;
      height: 120px;
    }

    .el-upload-list__item {
      width: 180px;
      height: 120px;
      margin: 0 !important;
      display: block !important;
    }

    .el-upload-list--picture-card .el-upload-list__item-thumbnail {
      width: 180px;
      height: 120px;
    }
  }
}

.styleB .el-upload--picture-card {
  // display: none;
  opacity: 0;
}

.QRCode {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}
</style>