tenant-Platform/src/views/additionalOrder/order/orderDetail.vue

<template>
  <div class="orderDetail">
    <div class="state" v-if="dataDetail?.audit_status == 2">
      <el-icon :size="20" style="color: red; margin: 3px 10px 0 0;">
        <CircleClose />
      </el-icon>
      <div>
        <h3>审核不通过</h3>
        <p>{{ dataDetail?.auditComments }}如有问题，请联系审核人员或者拨打客服电话400-400-400。</p>
        <p>审核人：admin 审核时间：2025.3.15 12:00:00</p>
        <el-button link type="primary" @click="editDetail">修改并重提交</el-button>
      </div>
    </div>
    <div class="userInfo">
      <el-row :gutter="20">
        <el-col :span="12" class="right">
          <img class="userLogo" :src="car1"/>
          <span class="userName">{{ dataDetail?.quoteNo }}</span>
          <span class="userState">{{ dataDetail?.audit_status===0?'待审核':dataDetail?.audit_status===1?'已审核':dataDetail?.audit_status===2?'已驳回':'--' }}</span>
        </el-col>
        <el-col :span="12" class="left">
          <el-button class="radius-2px" plain type="primary" @click="editDetail">编辑</el-button>
          <el-button class="radius-2px" plain type="primary">删除</el-button>
        </el-col>
      </el-row>
      <div class="tap">
        <a class="anchor-item" :class="{'active': tapIndex===index}" v-for="(item, index) in taps" :href="`#${item.href}`" @click.prevent="handleTap(item, index)">
          <img :src="tapIndex===index?item.active:item.img"/>
          {{ item.text }}
        </a>
      </div>
    </div>
    <div class="content">
      <div id="quote">
        <div class="title">投保信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">保险公司：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.companyName || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">签单日期：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.signingTime || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">评分：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.scope || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">车船税：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.taxPremium || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">交强险保单号：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.jqApplyNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">交强险续保：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.jqRenewal || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">交强险保费：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.jqPremium || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">驾意险保费：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.jyPremium || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">商业险保单号：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.syPolicyNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">商业险续保：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.syRenewal || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">商业险保费：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.syPremium || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">保费总额：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.sumPremium || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">是否过户车：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.companyName || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">商业险是否过户：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.companyName || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">是否脱保：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.companyName || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">是否二手车：</span>
            <span>{{ dataDetail?.insOrdersOtherInfo?.companyName || '--' }}</span>
          </el-col>
        </el-row>
      </div>
      <div id="history">
        <div class="title">费用信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">交强险：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">费用字段：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">费用字段：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">

          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">商业险：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">费用字段：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">费用字段：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">

          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">驾意险：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">费用字段：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">费用字段：</span>
            <span>--</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">

          </el-col>
        </el-row>
      </div>
      <div id="insurance">
        <div class="title">险种信息</div>
        <el-row :gutter="20" style="margin-bottom: 16px">
          <el-col :span="14">
            <el-table
              :data="dataDetail?.insOrdersRiskList"
              :span-method="typeSpanMethod"
              border
            >
              <el-table-column label="类型"></el-table-column>
              <el-table-column label="时间">
                <template #default="scope">{{ scope.row.startDate }}至{{ scope.row.endDate }}</template>
              </el-table-column>
              <el-table-column label="险种" prop="riskName"></el-table-column>
              <el-table-column label="保额" prop="premium"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="10">
            <el-table
              :data="carData"
              :span-method="carSpanMethod"
              border
              class="hiddenHeader"
            >
              <el-table-column label="" prop="a"></el-table-column>
              <el-table-column label="" prop="b"></el-table-column>
              <el-table-column label="" prop="c"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div id="car">
        <div class="title">车辆信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">车牌号：</span>
            <span>{{ dataDetail?.carInfoVo?.licenseNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">车辆识别代码：</span>
            <span>{{ dataDetail?.carInfoVo?.vinNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">发动机号：</span>
            <span>{{ dataDetail?.carInfoVo?.engineNo || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">品牌型号：</span>
            <span>{{ dataDetail?.carInfoVo?.brandName || '--' }}</span>
          </el-col>
        </el-row>
      </div>
      <div id="ower">
        <div class="title">车主信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">类型：</span>
            <span>{{ dataDetail?.ownersInfo?.personType || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">车主姓名：</span>
            <span>{{ dataDetail?.ownersInfo?.name || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">证件类型号码：</span>
            <span>{{ dataDetail?.ownersInfo?.identifyNumber || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">手机号：</span>
            <span>{{ dataDetail?.ownersInfo?.mobile || '--' }}</span>
          </el-col>
        </el-row>
        <div class="title">投保人信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">类型：</span>
            <span>{{ dataDetail?.policyHolderInfo?.personType || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">车主姓名：</span>
            <span>{{ dataDetail?.policyHolderInfo?.name || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">证件类型号码：</span>
            <span>{{ dataDetail?.policyHolderInfo?.identifyNumber || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">手机号：</span>
            <span>{{ dataDetail?.policyHolderInfo?.mobile || '--' }}</span>
          </el-col>
        </el-row>
        <div class="title">被投保人信息</div>
        <el-row :gutter="20">
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">类型：</span>
            <span>{{ dataDetail?.insuredPersonInfo?.personType || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">车主姓名：</span>
            <span>{{ dataDetail?.insuredPersonInfo?.name || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">证件类型号码：</span>
            <span>{{ dataDetail?.insuredPersonInfo?.identifyNumber || '--' }}</span>
          </el-col>
          <el-col :span="6" class="col-m-b-16 item">
            <span class="name">手机号：</span>
            <span>{{ dataDetail?.insuredPersonInfo?.mobile || '--' }}</span>
          </el-col>
        </el-row>
      </div>
      <div id="file">
        <div class="title">影像资料</div>
        <div class="information">
          <el-tabs v-model="activeName" tab-position="left" class="demo-tabs">
            <el-tab-pane v-for="(item, index) in infoList" :label="item.label" :name="item.name">
              <el-row :gutter="10" class="list">
                <el-col :span="4" class="list-item" v-for="sub in item.list">
                  <img :src="sub.previewUrl"/>
                  <div class="tips">{{ sub.imageType === 'C01'?'行驶证主页':sub.imageType === 'D01'?'行驶证副页':sub.imageType === 'TAR05'?'机动车辆登记证书':sub.imageType === 'XC00'?'新车合格证':sub.imageType === 'GC00'?'购车发票':sub.imageType === 'C02'?'车主身份证（正面）':sub.imageType === 'D02'?'车主身份证（反面）':sub.imageType === 'Y02'?'车主营业执照':sub.imageType === 'C03'?'投保人身份证（正面）':sub.imageType === 'D03'?'投保人身份证（反面） ':sub.imageType === 'Y03'?'投保人营业执照':sub.imageType === 'C04'?'被保人身份证（正面）':sub.imageType === 'D04'?'被保人身份证（反面）':sub.imageType === 'Y04'?'被保人营业执照':sub.imageType === 'GX00'?'关系证明':sub.imageType === 'C0500'?'验车照（车架）':sub.imageType === 'C0501'?'验车照（后左）':sub.imageType === 'C0502'?'验车照（后右）':sub.imageType === 'C0503'?'验车照（前右）':sub.imageType === 'C0504'?'验车照（前左）':sub.imageType === 'C0506'?'验车照（正前）':sub.imageType === 'C0507'?'验车照（正后）':sub.imageType === 'C0505'?'验车照（人车合影）':sub.imageType === 'C0508'?'验车照（地标合影）':sub.imageType === 'C0509'?'验车照（工作台）':sub.imageType === 'C0510'?'验车照（天窗）':sub.imageType === 'LAST_INSURANCE_POLICY'?'上年商业险保单':'--' }}</div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="title">电子保单</div>
        <div class="fileList">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in fileList" :key="index">
              <p>{{ item.name }}</p>
              <div class="fileInfo">
                <img style="width: 40px; height: 40px" :src="item.fileName.includes('.png') || item.fileName.includes('.jpg') || item.fileName.includes('.jpeg')?image:item.fileName.includes('.pdf')?pdf:item.fileName.includes('.doc') || item.fileName.includes('.docx')?word:''" />
                <div class="fileName">{{ item.fileName }}</div>
                <div class="fileBtn">
<!--                  <el-upload :auto-upload="false"  :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 7)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>-->
                  <el-icon class="btn-icon" @click="imageView(item)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="download(item)"><Download /></el-icon>
<!--                  <el-icon class="btn-icon" @click="deleteImage(7)"><Delete /></el-icon>-->
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div id="line">
          <div class="title">订单轨迹</div>
          <el-table
            :data="lineData"
            height="300"
          >
              <el-table-column label="变更信息">
                  <template #default="scope">
                      {{ `${scope.row.createBy}：${scope.row.createTime}` }}
                  </template>
              </el-table-column>
              <el-table-column prop="optContent" label="变更内容"></el-table-column>
              <el-table-column prop="changeBefore" label="变更前">
                  <template #default="scope">
                      <span v-if="scope.row.changeBefore">{{ scope.row.changeBefore }}</span>
                      <el-button v-else type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
                  </template>
              </el-table-column>
              <el-table-column prop="changeAfter" label="变更后">
                  <template #default="scope">
                      <span v-if="scope.row.changeAfter">{{ scope.row.changeAfter }}</span>
                      <el-button v-else type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
                  </template>
              </el-table-column>
              <el-table-column prop="result" label="保司反馈"></el-table-column>
          </el-table>
      </div>
        <div id="equities" style="margin-top: 10px;">
            <div class="title">权益信息</div>
            <el-table
                    :data="equitiesData"
                    height="300"
            >
                <el-table-column prop="a" label="权益名称"></el-table-column>
                <el-table-column prop="a" label="权益类型"></el-table-column>
                <el-table-column prop="a" label="接收人"></el-table-column>
                <el-table-column prop="a" label="发放数量"></el-table-column>
                <el-table-column prop="a" label="价格"></el-table-column>
            </el-table>
            <div class="total">
                <div class="money">
                    <div class="totalItem">
                        <span>可用金额：</span>
                        <span>{{ useMoney }}</span>
                    </div>
                    <div class="totalItem">
                        <span>已使用：</span>
                        <span>{{ usedMoney }}</span>
                    </div>
                    <div class="totalItem">
                        <span>剩余金额：</span>
                        <span style="color: #FF8C21">{{ lastMoney }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog
      title="图片预览"
      v-model="imageShow"
    >
      <img class="image-view" :src="imageUrl" />
    </el-dialog>
    <el-dialog
      title="文件预览"
      v-model="fileShow"
    >
      <vue-office-docx
        :src="fileUrl"
        style="height: 600px; margin: 0; padding: 0"
      ></vue-office-docx>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import car1 from "@/assets/images/additional/car1.png";
import car2 from "@/assets/images/additional/car2.png";
import ower1 from "@/assets/images/additional/ower1.png";
import ower2 from "@/assets/images/additional/ower2.png";
import insurance1 from "@/assets/images/additional/insurance1.png";
import insurance2 from "@/assets/images/additional/insurance2.png";
import quote1 from "@/assets/images/additional/quote1.png";
import quote2 from "@/assets/images/additional/quote2.png";
import history1 from "@/assets/images/additional/history1.png";
import history2 from "@/assets/images/additional/history2.png";
import equities1 from '@/assets/images/additional/equities1.png'
import equities2 from '@/assets/images/additional/equities2.png'
import file1 from '@/assets/images/additional/file1.png'
import file2 from '@/assets/images/additional/file2.png'

import image from "@/assets/images/image.png";
import pdf from "@/assets/images/pdf.png";
import word from "@/assets/images/word.png";

import api from '@/api'

import VueOfficeDocx from "@vue-office/docx";
import { ElMessage } from "element-plus";

const myRouter = useRouter()
const myRoute = useRoute()

let dataDetail = ref({
  status: 5
})
const editDetail = () => {
  myRouter.push({
    path: '/additionalOrder/additionalOrderIndex',
    query: {
      id: myRoute.query.id
    }
  })
}


// 页签
let tapIndex = ref(0)
const taps = ref([
  {
    text: '投保信息',
    href: 'quote',
    img: quote1,
    active: quote2
  },
  {
    text: '费用信息',
    href: 'history',
    img: history1,
    active: history2
  },
  {
    text: '选择险种',
    href: 'insurance',
    img: insurance1,
    active: insurance2
  },
  {
    text: '车辆信息',
    href: 'car',
    img: car1,
    active: car2
  },
  {
    text: '关系人信息',
    href: 'ower',
    img: ower1,
    active: ower2
  },
  {
      text: '附件信息',
      href: 'file',
      img: file1,
      active: file2
  },
  {
      text: '订单轨迹',
      href: 'line',
      img: file1,
      active: file2
  },
    {
        text: '权益信息',
        href: 'equities',
        img: equities2,
        active: equities1
    }
])
const handleTap = (item, index) => {
  tapIndex.value = index
  const element = document.getElementById(`${item.href}`)
  if(element) {
    element.scrollIntoView({behavior: 'smooth'})
  }
}

// 险种信息
let typeData = ref([
  {
    a: 1,
    b: 1,
    c: 1,
    d: 1
  },{
    a: 1,
    b: 1,
    c: 1,
    d: 1
  },
])
let carData = ref([
  {
    a: '车船税',
    b: 1,
    c: 2,
    d: 3
  },{
    a: '车船税',
    b: 1,
    c: 2,
    d: 3
  },{
    a: '车船税',
    b: 1,
    c: 2,
    d: 3
  },
])

const typeSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if(columnIndex === 0) {
    if(rowIndex === 1) {
      return [typeData.value.length - 1, 1]
    }
  }
}
const carSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if(columnIndex === 0) {
    if(rowIndex === 0) {
      return [carData.value.length, 1]
    } else {
      return [0,0]
    }
  }
}

// 影像资料
let activeName = ref('car')
let infoList = ref([
  {
    label: '车辆',
    name: 'car',
    list: []
  },{
    label: '车主',
    name: 'ower',
    list: []
  },{
    label: '投保人',
    name: 'insured',
    list: []
  },{
    label: '被保人',
    name: 'person',
    list: []
  },{
    label: '关系证明',
    name: 'relation',
    list: []
  },{
    label: '验车照',
    name: 'photo',
    list: []
  },{
    label: '上年商业险保单',
    name: 'policy',
    list: []
  },
])
let fileList = ref([])

// 图片预览
let imageShow = ref(false)
let imageUrl = ref('')
let fileShow = ref(false)
let fileUrl = ref('')
const imageView = (item) => {
  if(item.fileName.includes('.png') || item.fileName.includes('.jpg') || item.fileName.includes('.jpeg')) {
    imageShow.value = true
    imageUrl.value = item.fileName
  }
  if(item.fileName.includes('.pdf')) {
    window.open(item.fileName, '_blank')
  }
  if(item.fileName.includes('.doc') || item.fileName.includes('.docx')) {
    fileShow.value = true
    nextTick(() => {
      filePreview(item.fileName)
    })
  }
}

// word预览
const filePreview = (file) => {
  nextTick(() => {
    fileUrl.value = file
  })
}

// 下载
const download = (item) => {
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = item.fileName; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  }
  image.src = item.fileName
}

// 订单轨迹
let lineData = ref([])
const initTrack = () => {
    api.insurancePolicyApi.orderTrack({
        orderNo: myRoute.query.id
    }).then((res: any) => {
        if(res.code == 200) {
            lineData.value = res.data
        } else {
            ElMessage({
                message: res.msg,
                type: 'warning'
            })
        }
    })
}

// 权益
let equitiesData = ref([])
let useMoney = ref(0)
let usedMoney = ref(0)
let lastMoney = ref(0)

const viewDetail = (row) => {
    myRouter.push({
        name: 'InsurancePolicyViewDetail',
        query: {
            module: row.module,
            subModule: row.subModule,
            optType: row.optType,
            createBy: row.createBy,
            createTime: row.createTime,
            content: row.optContent,
            obj: row.result
        }
    })
}

const initDetail = () => {
  api.additionalApi.selectById(myRoute.query.id).then((res: any) => {
    if(res.code == 200) {
      dataDetail.value = res.data
      // 影像资料
      let car = infoList.value.find(a => a.name === 'car'),
        carType = ['C01', 'D01', 'TAR05', 'XC00', 'GC00'],
        ower = infoList.value.find(a => a.name === 'ower'),
        owerType = ['C02', 'D02', 'Y02'],
        insured = infoList.value.find(a => a.name === 'insured'),
        insuredType = ['C03', 'D03', 'Y03'],
        person = infoList.value.find(a => a.name === 'person'),
        personType = ['C04', 'D04', 'Y04'],
        relation = infoList.value.find(a => a.name === 'relation'),
        relationType = ['GX00'],
        photo = infoList.value.find(a => a.name === 'photo'),
        photoType = ['C0500', 'C0501', 'C0502', 'C0503', 'C0504', 'C0505', 'C0506', 'C0507', 'C0508', 'C0509', 'C0510',  ],
        policy = infoList.value.find(a => a.name === 'policy'),
        policyType = ['LAST_INSURANCE_POLICY'],
        list = res.data?.imagesAdds?.images
      car.list = list.filter(a => carType.includes(a.imageType))
      ower.list = list.filter(a => owerType.includes(a.imageType))
      insured.list = list.filter(a => insuredType.includes(a.imageType))
      person.list = list.filter(a => personType.includes(a.imageType))
      relation.list = list.filter(a => relationType.includes(a.imageType))
      photo.list = list.filter(a => photoType.includes(a.imageType))
      policy.list = list.filter(a => policyType.includes(a.imageType))

      // 电子保单
      // jqPolicy
      // jqPolicyPreviewUrl
      // jqSign
      // jqSignPreviewUrl
      // noPolicy
      // noPolicyPreviewUrl
      // orderNo
      // syPolicy
      // syPolicyPreviewUrl
      // insOrdersExternalPolicy
      fileList.value = [
        {
          name: '交强电子保单',
          fileName: dataDetail.value?.insOrdersExternalPolicy?.jqPolicyPreviewUrl
        },{
          name: '商业电子保单',
          fileName: dataDetail.value?.insOrdersExternalPolicy?.syPolicyPreviewUrl
        },{
          name: '驾意险电子保单',
          fileName: dataDetail.value?.insOrdersExternalPolicy?.noPolicyPreviewUrl
        },{
          name: '交强险电子标志',
          fileName: dataDetail.value?.insOrdersExternalPolicy?.jqSignPreviewUrl
        }
      ]

    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

onMounted(() => {
  initDetail();
  initTrack();
})

</script>

<style scoped lang="scss">
@use "@/assets/styles/common/style";
.orderDetail{
  height: calc(100vh - 120px);
  overflow: hidden;
  .state{
    border: 1px solid #FF4545;
    border-radius: 10px;
    padding: 10px 20px;
    background: #FFF4F4;
    display: flex;
    margin: 10px 24px;
    font-weight: 400;
    color: #333333;
    h3{
      font-size: 16px;
      margin: 0 0 10px;
      color: rgba(0,0,0,.64);
    }
    p{
      font-size: 14px;
      margin: 10px 0;
    }
  }
  .userInfo{
    margin: 10px 24px;
    background: #FFFFFF;
    padding: 24px;
    border-radius: 6px;
    .right{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .userLogo{
        width: 26px;
        height: 26px;
      }
      .userName{
        font-size: 16px;
        color: #333333;
        margin: 0 12px 0 16px;
      }
      .userState{
        padding: 2px 12px;
        border: 1px solid #FF8C21;
        background: #FFF4E9;
        color: #FF8C21;
        font-size: 12px;
        border-radius: 3px;
      }
    }
    .left{
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .tap{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0 0;
      .anchor-item{
        width: 12%;
        height: 44px;
        text-decoration: none;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        border-radius: 4px;
        font-size: 18px;
        border: 1px solid #EEEEEE;
        img{
          width: 30px;
          height: 30px;
          margin-right: 5px;
        }
      }
      .active{
        color: #FFFFFF;
        background: linear-gradient( 91deg, #4FCAFF 0%, #2B62FF 100%);
      }
    }
  }
  .content{
    margin: 0 24px;
    height: calc(100% - 150px);
    background: #FFFFFF;
    border-radius: 6px;
    overflow-y: auto;
    padding: 24px;
    .title{
      border-left: 4px solid #00a0f4;
      padding: 0 0 0 12px;
      margin-bottom: 16px;
    }
    .item{
      color: #666666;
      font-size: 14px;
      display: flex;
      .name{
        width: 120px;
      }
    }
    .information{
      height: 280px;
      margin-bottom: 16px;
      .list{
        height: 290px;
        overflow-y: auto;
        .list-item{
          height: calc(50% - 12px);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin: 0 0 12px;
          border-radius: 0 0 6px 6px;
          img{
            width: 100%;
            height: 130px;
            border-radius: 0 0 6px 6px;
          }
          .tips {
            position: absolute;
            left: 5px;
            bottom: 0;
            width: calc(100% - 10px);
            height: 24px;
            background: url("@/assets/images/additional/tips.png") no-repeat;
            background-size: 100% 100%;
            text-align: center;
            line-height: 24px;
            color: #FFFFFF;
          }
        }
      }
    }
    .fileList{
      .fileInfo{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid #EEEEEE;
        border-radius: 4px;
        padding: 18px 24px;
        .fileName{
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fileBtn{
          display: flex;
          align-items: center;
          .btn-icon{
            margin: 0 10px;
            font-size: 16px;
            cursor: pointer;
            &:hover{
              color: #00a0f4;
            }
          }
        }

        .file-box{
          position: relative;
          .btn-top{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: absolute;
            top: 0;
            left: 0;
            .image-close{
              display: block;
              width: 12px;
              height: 12px;
            }
          }
          .file-img{
            display: block;
            width: 208px;
            height: 130px;
            border-radius: 5px;
          }
          .btn-bottom{
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            height: 24px;
            width: 100%;
            background: url("@/assets/images/btn-bg.png") no-repeat;
            background-size: 100% 100%;
            .width-50{
              width: 50%;
            }
          }
        }

      }
    }
    .total{
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      .money{
        width: 200px;
        margin-right: 30px;
        .totalItem{
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
  :deep(.hiddenHeader .el-table__header-wrapper) {
    display: none;
  }
}
</style>