<template>
  <div>
    <div v-if="formData.vinCardMsg && formData.vinCardMsg.length > 0" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>车卡信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <div class="custom-table-info">
            <el-table class="custom-table" :data="formData.vinCardMsg" border stripe >
              <el-table-column type="index" label="序号" align="center" width="80" />
              <el-table-column prop="vin" label="车辆VIN码" min-width="250" show-overflow-tooltip />
              <el-table-column prop="iccid" label="ICCID" min-width="250" show-overflow-tooltip />
              <el-table-column prop="status" label="车辆/设备/信息校验" min-width="250" show-overflow-tooltip />
            </el-table>
          </div>

        </el-col>
      </el-row>
    </div>
    <div v-if="formData.vinOwnerMsg && !formData.vinOwnerMsg.isCompany" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>车主信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <table class="custom-table">
            <tr>
              <td class="custom-table-head"><span>姓名</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.name }}</span></td>
              <td class="custom-table-head"><span>性别</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.sex }}</span></td>
              <td class="custom-table-head"><span>证件类型</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.idType }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>证件号码</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.idNo }}</span></td>
              <td class="custom-table-head"><span>证件有效期</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.idValidDate }}</span></td>
              <td class="custom-table-head"><span>证件地址</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.idAddress }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>手机号</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.phone }}</span></td>
              <td class="custom-table-head"><span>通讯地址</span></td>
              <td class="custom-table-td"><span>{{ formData.vinOwnerMsg.contactAddress }}</span></td>
              <td class="custom-table-head"><span>证件照片</span></td>
              <td class="custom-table-td">
                <span>
                  <el-link type="primary" icon="iconfont icon-search" @click="handlePreview(auditImages.ownerImages)">点击查看</el-link>
                </span>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </div>
    <div v-if="formData.vinLiaisonMsg" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>代办人信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <table class="custom-table">
            <tr>
              <td class="custom-table-head"><span>姓名</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.name }}</span></td>
              <td class="custom-table-head"><span>性别</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.sex }}</span></td>
              <td class="custom-table-head"><span>证件类型</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.idType }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>证件号码</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.idNo }}</span></td>
              <td class="custom-table-head"><span>证件有效期</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.idValidDate }}</span></td>
              <td class="custom-table-head"><span>证件地址</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.idAddress }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>手机号</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.phone }}</span></td>
              <td class="custom-table-head"><span>通讯地址</span></td>
              <td class="custom-table-td"><span>{{ formData.vinLiaisonMsg.contactAddress }}</span></td>
              <td class="custom-table-head"><span>证件照片</span></td>
              <td class="custom-table-td">
                <span>
                  <el-link type="primary" icon="iconfont icon-search" @click="handlePreview(auditImages.liaisonImages)">点击查看</el-link>
                </span>
              </td>
            </tr>
          </table>

        </el-col>
      </el-row>
    </div>
    <div v-if="formData.oldCompanyInfo" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>原企业和责任人信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <table class="custom-table">
            <tr>
              <td class="custom-table-head"><span>企业名称</span></td>
              <td class="custom-table-td"><span>{{ formData.oldCompanyInfo.companyName }}</span></td>
              <td class="custom-table-head"><span>责任人姓名</span></td>
              <td class="custom-table-td"><span>{{ formData.oldOwnerName }}</span></td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </div>
    <div v-if="formData.newOwnerInfo" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>新责任人信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <table class="custom-table">
            <tr>
              <td class="custom-table-head"><span>姓名</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.fullName }}</span></td>
              <td class="custom-table-head"><span>性别</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.gender }}</span></td>
              <td class="custom-table-head"><span>证件类型</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.certType }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>证件号码</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.certNumber }}</span></td>
              <td class="custom-table-head"><span>证件有效期</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.expiredDate }}</span></td>
              <td class="custom-table-head"><span>证件地址</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.certAddress }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>手机号</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.phone }}</span></td>
              <td class="custom-table-head"><span>通讯地址</span></td>
              <td class="custom-table-td"><span>{{ formData.newOwnerInfo.contactAddress }}</span></td>
              <td class="custom-table-head"><span>证件照片</span></td>
              <td class="custom-table-td">
                <span>
                  <el-link type="primary" icon="iconfont icon-search" @click="handlePreview(formData.newOwnerInfo.newCertList)">点击查看</el-link>
                </span>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </div>
    <div v-if="formData.companyInfoDetail" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>企业信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <table class="custom-table">
            <tr>
              <td class="custom-table-head"><span>企业名称</span></td>
              <td class="custom-table-td"><span>{{ formData.companyInfoDetail.companyName }}</span></td>
              <td class="custom-table-head"><span>企业性质</span></td>
              <td class="custom-table-td"><span>{{ formData.companyInfoDetail.companyType }}</span></td>
              <td class="custom-table-head"><span>行业类型</span></td>
              <td class="custom-table-td"><span>{{ formData.companyInfoDetail.industryType }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>企业证件类型</span></td>
              <td class="custom-table-td"><span>{{ formData.companyInfoDetail.companyCertType }}</span></td>
              <td class="custom-table-head"><span>企业证件号码</span></td>
              <td class="custom-table-td"><span>{{ formData.companyInfoDetail.companyCertNumber }}</span></td>
              <td class="custom-table-head"><span>证件地址</span></td>
              <td class="custom-table-td"><span>{{ formData.companyInfoDetail.companyCertAddress }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>通讯地址</span></td>
              <td class="custom-table-td"><span>{{ formData.companyInfoDetail.companyContactAddress }}</span></td>
              <td class="custom-table-head"><span>企业证件照片</span></td>
              <td class="custom-table-td" colspan="3">
                <span>
                  <el-link type="primary" icon="iconfont icon-search" @click="handlePreview(auditImages.companyImages)">点击查看</el-link>
                </span>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </div>
    <div v-if="formData.corporationInfoDetail && formData.corporationInfoDetail.isCompany" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>责任人信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <table class="custom-table">
            <tr>
              <td class="custom-table-head"><span>姓名</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationName }}</span></td>
              <td class="custom-table-head"><span>性别</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationGenderName || formData.corporationInfoDetail.corporationGender }}</span></td>
              <td class="custom-table-head"><span>证件类型</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationCertType }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>证件号码</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationCertNumber }}</span></td>
              <td class="custom-table-head"><span>证件有效期</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationCertExpirationDate }}</span></td>
              <td class="custom-table-head"><span>证件地址</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationCertAddress }}</span></td>
            </tr>
            <tr>
              <td class="custom-table-head"><span>手机号</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationPhone }}</span></td>
              <td class="custom-table-head"><span>通讯地址</span></td>
              <td class="custom-table-td"><span>{{ formData.corporationInfoDetail.corporationContactAddress }}</span></td>
              <td class="custom-table-head"><span>证件照片</span></td>
              <td class="custom-table-td">
                <span>
                  <el-link type="primary" icon="iconfont icon-search" @click="handlePreview(auditImages.corporationImages)">点击查看</el-link>
                </span>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </div>
    <div v-if="showFileModule" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>文件信息</span>
      </div>
      <el-row class="mb20" :gutter="14">
        <el-col :span="24">
          <el-image
            v-for="(item, index) in auditImages.fileImages"
            :key="index"
            class="preview-photo"
            :src="item"
            :preview-src-list="auditImages.fileImages"
          />
          <div
            v-for="(item, index) in auditImages.filePdfs"
            :key="index"
            class="preview-photo preview-pdf"
            @click="handleOpenPdf(item)"
          >
            <div class="pdf-container" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="auditImages.authInfoImages" class="detail-group-box">
      <div class="detail-group-title">
        <img :src="require('@/assets/img/icon_marker.png')">
        <span>认证信息</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="24">
          <table class="custom-table">
            <tr>
              <td class="custom-table-head"><span>活体照片/视频</span></td>
              <td class="custom-table-td" colspan="3">
                <el-image
                  v-for="(item, index) in auditImages.authInfoImages"
                  :key="index"
                  class="preview-photo"
                  :src="item"
                  :preview-src-list="auditImages.authInfoImages"
                />

                <div v-for="(item, index) in auditImages.auditVideoList" :key="'td' + index" class="vedio-wrap">
                  <div class="video-item">
                    <i class="el-icon-video-play" @click="handlePlay(item)" />
                    <video preload="auto" class="cvp-file">
                      <source :src="item" type="video/mp4">
                      <p>暂不支持预览</p>
                    </video>
                  </div>
                </div>

              </td>
            </tr>
            <tr v-for="(item, index) in auditImages.tableList" :key="index">
              <td
                v-for="(ite, idx) in item"
                :key="'t' + idx"
                :class="ite.className"
                :colspan="ite.colspan"
              >
                <span>{{ ite.name }}</span>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </div>
    <image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="previewList" />
    <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 ImageViewer from '@/components/Uploader/image-viewer.vue'
import VideoPlayer from '@/components/VideoPlayer/index.vue'
export default {
  name: 'CompCertification',
  components: {
    ImageViewer,
    VideoPlayer
  },
  props: {
    formData: {
      type: Object,
      default: () => {}
    },
    auditImages: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableList: [],
      previewList: [],
      showViewer: false,
      prevOverflow: '',
      activityStatus: '',
      videoVisible: false,
      videoUrl: ''
    }
  },
  computed: {
    showFileModule() {
      if (this.auditImages.fileImages && this.auditImages.fileImages.length > 0) {
        return true
      }
      if (this.auditImages.filePdfs && this.auditImages.filePdfs.length > 0) {
        return true
      }
      return false
    }
  },
  mounted() {

  },
  methods: {
    /**
    * 打开图片预览
    * @param {Array} imgList 需要预览的大图
    * @time 2022-04-07 17:18:33
    */
    handlePreview(imgList) {
      if (imgList.length <= 0) {
        this.$message.error('没有相关证件照片可预览')
        return false
      }
      this.previewList = imgList
      this.prevOverflow = document.body.style.overflow
      document.body.style.overflow = 'hidden'
      this.showViewer = true
    },

    /**
    * 关闭图片预览
    * @time 2022-04-07 17:18:20
    */
    closeViewer() {
      document.body.style.overflow = this.prevOverflow
      this.showViewer = false
    },

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

    /**
    * 视频播放关闭
    * @time 2022-04-26 00:04:00
    */
    handleClose() {
      this.videoVisible = false
      this.videoUrl = ''
    },

    /**
     * 新窗口打开pdf
     * @param url pdf的链接
     */
    handleOpenPdf(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style lang="scss" >
.custom-table-info{
 .el-table {
        .cell {
          padding: 0 10px;
        }
      }
}

.preview-photo, .cvp-file{
  width: 68px;
  height: 68px;
  margin-right: 20px;
  border-radius: 4px;
}
.preview-pdf {
  align-items: center;
  background: #F7F8FA;
  border: 1px solid #CACCD0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  .pdf-container {
    align-items: center;
    background: #FF5F61;
    display: flex;
    width: 24px;
    height: 28px;
    justify-content: center;
    position: relative;
    &:before {
      color: #FFFFFF;
      content: "P";
      display: block;
      font-weight: 900;
    }
    &:after {
      background: linear-gradient(127deg, #FFE6E7 0%, #FFC5C6 100%);
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
      content: "";
      display: block;
      width: 7px;
      height: 6px;
      position: absolute;
      right: 0;
      top: 0
    }
  }
}
.mb20{
  margin-bottom: 10px;
}
.vedio-wrap, .video-item{
  display: inline-block;
}
.video-item{
  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;
  }
}
.ite-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
