<template>
  <div v-loading.fullscreen.lock="loading" element-loading-spinner="page-loading" class="app-container page-rnr-audit-detail">
    <div v-if="orderDetail.bizDetail" class="detail-group-title matop0">
      <page-module :path="iconPath" name="业务信息">
        <table v-if="orderDetail.bizDetail" class="custom-table">
          <tr>
            <td class="custom-table-head"><span>业务类型</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.bizDetail.orderType | ORDER_TYPE }}</span></td>
            <td class="custom-table-head"><span>实名日期</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.bizDetail.createTime }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>认证进度</span></td>
            <td class="custom-table-td" colspan="3"><span>{{ orderDetail.bizDetail.orderStatus | ORDER_STATUS }}</span></td>
          </tr>
        </table>
      </page-module>
    </div>
    <page-module :path="iconPath" name="车卡信息">
      <TableRender
        :schema="SCHEMA"
        :data="cardList"
        :config="{pagination: { pageSizes: [10, 20, 50], layout: 'total, prev, pager, next, sizes' }}"
        :pagination="pagination"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </page-module>

    <div v-if="orderDetail.rnrDetail" class="detail-group-title">
      <page-module :path="iconPath" name="新车主/责任人信息">
        <table v-if="orderDetail.rnrDetail" class="custom-table">
          <tr>
            <td class="custom-table-head"><span>姓名</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.rnrDetail.fullName }}</span></td>
            <td class="custom-table-head"><span>性别</span></td>
            <td class="custom-table-td"><span>{{ { 1: '男', 2: '女' }[orderDetail.rnrDetail.gender] }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>证件类型</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.rnrDetail.certTypeName }}</span></td>
            <td class="custom-table-head"><span>证件号码</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.rnrDetail.certNumber }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>手机号</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.rnrDetail.phone }}</span></td>
            <td class="custom-table-head"><span>证件有效期</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.rnrDetail.expiredDate }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>证件照片</span></td>
            <td class="custom-table-td" colspan="3"><el-link @click="handlePreviewImage(orderDetail.rnrDetail.rnrInfoFile)">点击查看</el-link></td>
          </tr>
        </table>
      </page-module>
    </div>
    <div v-if="orderDetail.liaisonDetail" class="detail-group-title">
      <page-module :path="iconPath" name="代办人信息">
        <table v-if="orderDetail.liaisonDetail" class="custom-table">
          <tr>
            <td class="custom-table-head"><span>姓名</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.liaisonDetail.fullName }}</span></td>
            <td class="custom-table-head"><span>性别</span></td>
            <td class="custom-table-td"><span>{{ { 1: '男', 2: '女' }[orderDetail.liaisonDetail.gender] }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>证件类型</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.liaisonDetail.certTypeName }}</span></td>
            <td class="custom-table-head"><span>证件号码</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.liaisonDetail.certNumber }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>手机号</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.liaisonDetail.phone }}</span></td>
            <td class="custom-table-head"><span>证件有效期</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.liaisonDetail.expiredDate }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>证件照片</span></td>
            <td class="custom-table-td" colspan="3"><el-link @click="handlePreviewImage(orderDetail.liaisonDetail.rnrInfoFile)">点击查看</el-link></td>
          </tr>
        </table>
      </page-module>
    </div>
    <div v-if="orderDetail.companyDetail" class="detail-group-title">
      <page-module :path="iconPath" name="企业信息">
        <table v-if="orderDetail.companyDetail" class="custom-table">
          <tr>
            <td class="custom-table-head"><span>企业名称</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.companyDetail.companyName }}</span></td>
            <td class="custom-table-head"><span>企业性质</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.companyDetail.companyTypeName }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>行业类型</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.companyDetail.industryTypeName }}</span></td>
            <td class="custom-table-head"><span>企业证件类型</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.companyDetail.companyCertTypeName }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>企业证件号码</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.companyDetail.companyCertNumber }}</span></td>
            <td class="custom-table-head"><span>证件地址</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.companyDetail.companyCertAddress }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>通讯地址</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.companyDetail.companyContactAddress }}</span></td>
            <td class="custom-table-head"><span>企业证件照片</span></td>
            <td class="custom-table-td" :colspan="3"><el-link @click="handlePreviewImage(orderDetail.companyDetail.companyFile)">点击查看</el-link></td>
          </tr>
        </table>
      </page-module>
    </div>
    <div v-if="orderDetail.authenticationList && orderDetail.authenticationList.length > 0" class="detail-group-title">
      <page-module :path="iconPath" name="认证信息">
        <table v-if="orderDetail.authenticationList && orderDetail.authenticationList.length > 0" class="custom-table">
          <tr v-for="(authentication, index) in orderDetail.authenticationList" :key="index">
            <td class="custom-table-head"><span>{{ { LIVENESS: '活体', OCR: '光符识别', CERT_CHECK: '身份信息核查', ID_COMPARE: '人证比对', FACE_COMPARE: '人脸比对' }[authentication.authWayType] }}</span></td>
            <td class="custom-table-td"><span>{{ authentication.authResultMsg }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head">活体照片/视频</td>
            <td class="custom-table-td">
              <el-image
                v-for="(item, index) in orderDetail.authMap"
                :key="index"
                :src="item"
                :preview-src-list="orderDetail.authMap"
                fit="contain"
                class="preview-photo"
              />
              <div v-for="video in orderDetail.authVideo" :key="video" class="video-wrapper">
                <div class="video-item">
                  <i class="el-icon-video-play" @click="handlePlay(video)" />
                  <video preload="auto" class="cvp-file">
                    <source :src="video" type="video/mp4">
                    <p>暂不支持预览</p>
                  </video>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </page-module>
    </div>
    <div v-if="orderDetail.fileMap" class="detail-group-title">
      <page-module :path="iconPath" name="文件信息">
        <el-image
          v-for="(item, index) in orderDetail.fileMap"
          :key="index"
          :src="item"
          :preview-src-list="orderDetail.fileMap"
          fit="contain"
          class="preview-photo"
        />
      </page-module>
    </div>
    <div v-if="orderDetail.auditDetail" class="detail-group-title">
      <page-module :path="iconPath" name="人工审核信息" >
        <table v-if="orderDetail.auditDetail" class="custom-table">
          <tr>
            <td class="custom-table-head"><span>审核人员</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.auditDetail.operatorName }}</span></td>
            <td class="custom-table-head"><span>审核日期</span></td>
            <td class="custom-table-td"><span>{{ orderDetail.auditDetail.auditTime }}</span></td>
          </tr>
          <tr>
            <td class="custom-table-head"><span>审核意见</span></td>
            <td class="custom-table-td" colspan="3"><span>{{ orderDetail.auditDetail.content }}</span></td>
          </tr>
        </table>
      </page-module>
    </div>
    <image-viewer v-if="showViewer" :z-index="2010" :on-close="handleCloseViewer" :url-list="urlList" />
    <el-dialog
      :visible.sync="videoVisible"
      width="50%"
      :close-on-click-modal="false"
      :center="true"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <video-player v-if="videoVisible" :src="videoUrl" />
    </el-dialog>
  </div>
</template>

<script>
import { queryCardPageByOrderId, queryOrderDetail } from '@/api/audit'
import TableRender from '@/components/TableRender'
import ImageViewer from '@/components/Uploader/image-viewer'
import VideoPlayer from '@/components/VideoPlayer'
import { imageViewer } from '@/utils/upload'

// 认证进度
const ORDER_STATUS = [
  { label: '已提交', value: 0 },
  { label: '待分派/认领', value: 1 },
  { label: '待审核', value: 2 },
  { label: '审核通过', value: 3 },
  { label: '未通过', value: 4 },
  { label: '作废', value: 9 }
]

// 业务类型
const ORDER_TYPE = [
  { label: '自然人新车实名认证', value: 1 },
  { label: '自然人二手车实名认证', value: 2 },
  { label: '企业新车实名认证', value: 3 },
  { label: '车企新车实名认证', value: 4 },
  { label: '企业责任人变更', value: 5 },
  { label: '车主解绑', value: 6 },
  { label: '二手车主解绑', value: 7 },
  { label: '车企实名解绑', value: 8 },
  { label: '设备更换', value: 9 },
  { label: '一车多卡绑定', value: 10 },
  { label: '重新绑定', value: 11 },
  { label: '企业解绑', value: 12 }
]

export default {
  name: 'RnrDetail',
  components: { TableRender, ImageViewer, VideoPlayer },
  filters: {
    ORDER_STATUS(value) {
      try {
        return ORDER_STATUS.find(item => +item.value === +value).label
      } catch (error) {
        console.log(error)
        return ''
      }
    },
    ORDER_TYPE(value) {
      try {
        return ORDER_TYPE.find(item => +item.value === +value).label
      } catch (error) {
        console.log(error)
        return ''
      }
    }
  },
  props: {
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ORDER_STATUS,
      ORDER_TYPE,
      loading: false,
      cardList: [],
      orderDetail: {},
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      urlList: [],
      fileList: [],
      showViewer: false,
      SCHEMA: [
        { type: 'index', label: '序号', width: '100px' },
        { label: 'VIN', prop: 'vin' },
        { label: 'ICCID', prop: 'iccid' }
      ],
      cacheImages: {},
      videoUrl: '',
      videoVisible: false,
      iconPath: require('@/assets/audit/icon_marker.png')
    }
  },
  mounted() {
    // 分页查询车卡数据接口
    this.queryCardPageByOrderId()
    // 查询订单详情接口
    this.queryOrderDetail()
  },
  methods: {
    /**
     * 预览照片
     * @param  {Array} fileList 文件列表
     * @time 2022-09-19 17:25:46
     */
    async handlePreviewImage(fileList) {
      // 增加loading
      this.loading = true
      try {
        // 获取的图片url
        this.urlList = await Promise.all(
          fileList.map(({ fileId }) => {
            // 如果当前有缓存的文件，则直接展示
            if (this.cacheImages[fileId]) {
              return this.cacheImages[fileId]
            }
            return imageViewer(fileId).then(url => {
              this.cacheImages[fileId] = url
              return url
            })
          })
        )
        // 打开图片预览
        this.showViewer = true
      } catch (error) {
        console.error(error)
      }
      // 关闭loading
      this.loading = false
    },

    /**
     * 尺寸变化方法
     * @param pageSize 每页展示条数
     */
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.queryCardPageByOrderId()
    },

    /**
     * 页码改变方法
     * @param page 页码
     */
    handlePageChange(page) {
      this.pagination.currentPage = page
      this.queryCardPageByOrderId()
    },

    /**
     * 分页查询车卡信息
     */
    async queryCardPageByOrderId() {
      // 展示loading框
      this.loading = true
      try {
        // 开始请求接口
        const { list, totalCount } = await queryCardPageByOrderId({
          orderId: this.orderId,
          currPage: this.pagination.currentPage,
          pageSize: this.pagination.pageSize
        })
        // 表格数据
        this.cardList = list
        // 分页的数据
        this.pagination.total = totalCount
      } catch (error) {
        console.error(error)
      }
      // 展示loading框
      this.loading = false
    },

    /**
     * 查询订单详情
     */
    async queryOrderDetail() {
      // 开始请求订单详情接口
      const respData = await queryOrderDetail({ orderId: this.orderId }) || {}
      // 订单详情
      this.orderDetail = respData
      // 获取的图片url
      if (respData.fileList && respData.fileList.length > 0) {
        // 文件列表
        const fileMap = []
        const authMap = []
        const authVideo = []
        // 将文件保存到上面的变量中
        const setFileMap = ({ fileId, fileType }) => {
          // 如果当前是活体相关的
          if ([6].includes(fileType)) {
            authVideo.push(this.cacheImages[fileId])
          } else if ([3, 4].includes(fileType)) {
            authMap.push(this.cacheImages[fileId])
          } else {
            fileMap.push(this.cacheImages[fileId])
          }
        }
        // 查询接口
        await Promise.all(
          respData.fileList.map(({ fileId, fileType }) => {
            // 如果当前有缓存的文件，则直接展示
            if (this.cacheImages[fileId]) {
              setFileMap({ fileId, fileType })
              return this.cacheImages[fileId]
            }
            return imageViewer(fileId).then(url => {
              // 保存到缓存中
              this.cacheImages[fileId] = url
              // 开始赋值
              setFileMap({ fileId, fileType })
              return url
            }).catch(err => {
              console.error(err)
              return ''
            })
          })
        )
        // 文件列表
        this.$set(this.orderDetail, 'fileMap', fileMap)
        this.$set(this.orderDetail, 'authMap', authMap)
        this.$set(this.orderDetail, 'authVideo', authVideo)
      }
    },

    /**
     * 视频播放
     * @time 2022-04-26 00:04:00
     */
    handlePlay(url) {
      this.videoUrl = url
      this.videoVisible = true
    },

    /**
    * 关闭预览的视图
    * @time 2022-09-19 19:04:53
    */
    handleCloseViewer() {
      this.showViewer = false
    },

    /**
    * 关闭视频播放弹框
    * @time 2022-09-19 19:05:00
    */
    handleClose() {
      this.videoVisible = false
    }
  }
}
</script>

<style lang="scss">
.page-rnr-audit-detail {
  .detail-group-title{
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    margin: 10px 0;
    &.matop0{
      margin-top: 0px;
    }
    img{
      width: 18px;
      vertical-align: -4px;
    }
  }
  .custom-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #F0F0F0;
    border-left: 1px solid #F0F0F0;
    margin-bottom: 10px;
    tr{
      height: 40px;
    }
    td{
      border-right: 1px solid #F0F0F0;
      border-top: 1px solid #F0F0F0;
    }
    .custom-table-head{
      font-size: 14px;
      font-weight: 400;
      color: #494B53;
      width: 140px;
      background-color: rgba(247, 248, 250, 0.7);
      padding-left: 20px;
    }
    .custom-table-td{
      font-size: 14px;
      font-weight: 400;
      color: #333841;
      padding: 10px 20px 10px;
    }
    .w180{
      width: 180px;
    }
  }
  .el-pagination {
    text-align: right;
    margin-top: 12px;
  }
  .preview-photo, .cvp-file {
    width: 68px;
    height: 68px;
    margin-right: 20px;
    border-radius: 4px;
    .el-image__preview {
      width: 100%;
      height: 100%;
    }
  }
  .video-wrapper {
    display: inline-block;
    .video-item{
      display: inline-block;
      position: relative;
      .el-icon-video-play{
        position: absolute;
        font-size: 30px;
        color: #fff;
        z-index: 1;
        display: inline-block;
        width: 68px;
        height: 68px;
        text-align: center;
        line-height: 68px;
        background-color: rgba(153, 153, 153, .4);
        cursor: pointer;
        border-radius: 4px;
      }
    }
  }
  img.module-icon {
    width: 22px;
    height: 22px
  }
}
</style>
