<template>
  <div>
    <el-dialog
      v-loading="loading"
      v-if="visible"
      :visible.sync="visible"
      :append-to-body="true"
      title="查看"
      width="60%">
      <table class="table-ui" style="margin-bottom: 20px;">
        <div class="level-title">
          <h1>人员信息</h1>
        </div>
        <tr>
          <th>照片</th>
          <td>
            <span v-if="imgUrl != ''">
              <div class="img-flex">
                <viewer>
                  <img :src="imgUrl" width="40" height="40" style="object-fit: cover;">
                </viewer>
              </div>
            </span>
            <span v-else/>
          </td>
          <th>姓名</th>
          <td>{{ userDetailForm.NAME }}</td>
          <th>性别</th>
          <td>{{ userDetailForm.SEX === '0' ? '男' : '女' }}</td>
        </tr>
        <tr>
          <th>出生年月</th>
          <td>{{ userDetailForm.DATE_OF_BIRTH }}</td>
          <th>年龄</th>
          <td>{{ userDetailForm.AGE }}</td>
          <th>手机号</th>
          <td>{{ userDetailForm.PHONE }}</td>
        </tr>
        <tr>
          <th>身份证</th>
          <td>{{ userDetailForm.CARD_ID }}</td>
          <th>身份证照片</th>
          <!--if条件不可删除-->
          <td v-if="userCardIDPhotoFile.length>0" colspan="3">
            <span>
              <div class="img-flex">
                <viewer>
                  <img
                    v-for="item in userCardIDPhotoFile"
                    :src="config.fileUrl + item.FILEPATH"
                    :key="item.IMGFILES_ID"
                    width="40"
                    height="40"
                    style="object-fit: cover;">
                </viewer>
              </div>
            </span>
          </td>
        </tr>

        <tr>
          <th>民族</th>
          <td>{{ userDetailForm.minzuName ? userDetailForm.minzuName : '暂无信息' }}</td>
          <th>婚姻状况</th>
          <td>{{ userDetailForm.MARITALSTATUS === '0' ? '未婚' : '已婚' }}</td>
          <th>政治面貌</th>
          <td>{{ userDetailForm.zzName }} {{
            userDetailForm.zzName == '中共党员' ? '入党时间' + userDetailForm.POLITICAL_TIME : ''
          }}
          </td>
        </tr>

        <tr>
          <th>户口所在地</th>
          <td>{{ userDetailForm.HKLOCAL ? userDetailForm.HKLOCAL : '暂无信息' }}</td>
          <th>现住址</th>
          <td>{{ userDetailForm.ADDRESS ? userDetailForm.ADDRESS : '暂无信息' }}</td>
          <th>联系电话</th>
          <td>{{ userDetailForm.PHONE }}</td>
        </tr>
        <tr>
          <th>文化程度</th>
          <td>{{ userDetailForm.DEGREE_OF_EDUCATION_NAME }}</td>
          <th>岗位名称(工种)</th>
          <td colspan="5">{{ userDetailForm.POST_ID }}</td>
        </tr>
        <tr>
          <th>是否缴纳社保</th>
          <td :colspan="userDetailForm.IS_SOCIAL === '1' ? '':5">{{ formatLabel(userDetailForm.IS_SOCIAL) }}</td>
          <th v-if="userDetailForm.IS_SOCIAL === '1'">社会保障号码</th>
          <td v-if="userDetailForm.IS_SOCIAL === '1'">{{ userDetailForm.SOCIAL_NUMBER }}</td>
          <th v-if="userDetailForm.IS_SOCIAL === '1'">社保卡照片</th>
          <td v-if="userDetailForm.IS_SOCIAL === '1'&& socialPhotoFile.length>0" colspan="3">
            <span>
              <div class="img-flex">
                <viewer>
                  <img
                    v-for="item in socialPhotoFile"
                    :src="config.fileUrl + item.FILEPATH"
                    :key="item.IMGFILES_ID"
                    width="40"
                    height="40"
                    style="object-fit: cover;">
                </viewer>
              </div>
            </span>
          </td>
        </tr>
        <tr>
          <th>是否按期缴纳工伤保险</th>
          <td :colspan="userDetailForm.IS_INJURIES_PAY === '1' ? '':5">{{ formatLabel(userDetailForm.IS_INJURIES_PAY) }}</td>
          <th v-if="userDetailForm.IS_INJURIES_PAY === '1'">工伤保险有效期</th>
          <td v-if="userDetailForm.IS_INJURIES_PAY === '1'">{{ userDetailForm.IS_INJURIES_PAY_TIME }}</td>
          <th v-if="userDetailForm.IS_INJURIES_PAY === '1'">工伤保险凭证</th>
          <td v-if="userDetailForm.IS_INJURIES_PAY === '1'">
            <span>
              <viewer>
                <img
                  v-for="item in gongshangbaoxianFile"
                  :src="config.fileUrl + item.FILEPATH"
                  :key="item.IMGFILES_ID"
                  width="40"
                  height="40"
                  style="object-fit: cover;">
              </viewer>
            </span>
          </td>
        </tr>
        <tr>
          <th>是否缴纳商业保险</th>
          <td :colspan="userDetailForm.ISPAY === '1' ? '' : 5">
            {{ formatLabel(userDetailForm.ISPAY) }}
          </td>
          <th v-if="userDetailForm.ISPAY === '1'">商业保险附件</th>
          <td v-if="userDetailForm.ISPAY === '1'">
            <span>
              <viewer>
                <img
                  v-for="item in insuranceFileList"
                  :src="config.fileUrl + item.FILEPATH"
                  :key="item.IMGFILES_ID"
                  width="40"
                  height="40"
                  style="object-fit: cover;">
              </viewer>
            </span>
          </td>
          <th v-if="userDetailForm.ISPAY === '1'">商业保险单号</th>
          <td v-if="userDetailForm.ISPAY === '1'">{{ userDetailForm.ISPAY_NUMBER }}</td>
        </tr>
        <tr>
          <th>是否签订劳动合同</th>
          <td :colspan="userDetailForm.IS_SIGN_LABOR === '1' ? '' : 5">
            {{ formatLabel(userDetailForm.IS_SIGN_LABOR) }}
          </td>
          <th v-if="userDetailForm.IS_SIGN_LABOR === '1'">劳动合同附件</th>
          <td v-if="userDetailForm.IS_SIGN_LABOR === '1'" colspan="3">
            <span>
              <viewer>
                <img
                  v-for="item in contractFileList"
                  :src="config.fileUrl + item.FILEPATH"
                  :key="item.IMGFILES_ID"
                  width="40"
                  height="40"
                  style="object-fit: cover;">
              </viewer>
            </span>
          </td>
        </tr>
        <tr/><tr>
          <th>是否参加三级安全培训</th>
          <td>{{ formatLabel(userDetailForm.IS_LEVEL_THREE) }}</td>
          <th v-if="userDetailForm.IS_LEVEL_THREE == 1">三级安全培训照片</th>
          <td v-if="userDetailForm.IS_LEVEL_THREE == 1 && photosOfLevel.length>0" colspan="5">
            <span>
              <div class="img-flex">
                <viewer>
                  <img
                    v-for="item in photosOfLevel"
                    :src="config.fileUrl + item.FILEPATH"
                    :key="item.IMGFILES_ID"
                    width="40"
                    height="40"
                    style="object-fit: cover;">
                </viewer>
              </div>
            </span>
          </td>
        </tr>
        <tr>
          <th>是否缴纳保险</th>
          <td>{{ formatLabel(userDetailForm.IS_BF) }}</td>
          <th>是否特殊工种</th>
          <td>{{ formatLabel(userDetailForm.IS_SPECIAL_JOB) }}</td>
          <th>是否流动人员</th>
          <td>{{ formatLabel(userDetailForm.ISFLOW) }}</td>
        </tr>
      </table>
      <div v-if="false">
        <div class="level-title">
          <h1>培训记录</h1>
        </div>
        <el-table
          :data="trainRecordList"
          :header-cell-style="{'font-weight': 'bold','color': '#000'}"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row>
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column prop="CLASS_NAME" label="班级名称" align="center"/>
          <el-table-column prop="OPENING_TIME" label="开班时间" align="center"/>
          <el-table-column prop="TRAINING_TYPE_NAME" label="培训类型" align="center"/>
          <el-table-column prop="PLACE_NAME" label="培训地点" align="center"/>
          <el-table-column label="培训有效期" align="center">
            <template slot-scope="{row}">
              <span>{{ formatDate(row.VALIDITY_PERIOD_START) }} 至 {{ formatDate(row.VALIDITY_PERIOD_END) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="userDetailForm.IS_SPECIAL_JOB == '1'" class="level-title">
          <h1>特种作业人员信息</h1>
        </div>
        <table v-for="(item,index) in specialUsersList" :key="index" class="table-ui" style="margin-bottom: 20px;">
          <tr>
            <th style="width: 150px">证书名称</th>
            <td style="width: 150px">{{ item.CERTIFICATE }}</td>
            <th style="width: 150px">作业类别</th>
            <td style="width: 180px">{{ item.SPECIAL_TYPE_NAME }}</td>
            <th style="width: 150px">操作项目</th>
            <td>{{ item.OPERATION_TYPE_NAME }}</td>
          </tr>
          <tr>
            <th>特种作业证书编号</th>
            <td>{{ item.SPECIAL_NUMBER }}</td>
            <th>发证机关</th>
            <td colspan="3">{{ item.ISSUING_AUTHORITY }}</td>
          </tr>
          <tr>
            <th>复审时间</th>
            <td>{{ item.REVIEW_TIME }}</td>
            <th>有效期</th>
            <td colspan="3">{{ item.VALIDITY_TIME_START }} 至 {{ item.VALIDITY_TIME_END }}</td>
          </tr>
        </table>
        <div
          v-if="detailForm.SUPERVISION_STATE === 0 || detailForm.MANAGER_STATE === 0 || detailForm.TERRITORIALITY_STATE === 0"
          class="level-title mt-20">
          <h1>打回信息</h1>
        </div>
        <table
          v-if="detailForm.SUPERVISION_STATE === 0 || detailForm.MANAGER_STATE === 0 || detailForm.TERRITORIALITY_STATE === 0"
          class="table-ui"
          style="margin-bottom: 20px;">
          <tr>
            <th>打回人</th>
            <td v-if="detailForm.SUPERVISION_STATE === 0">{{ detailForm.SUPERVISION_USER_NAME }}</td>
            <td v-if="detailForm.MANAGER_STATE === 0">{{ detailForm.MANAGER_USER_NAME }}</td>
            <td
              v-if="detailForm.TERRITORIALITY_STATE === 0 && detailForm.MANAGER_USER_NAME !== detailForm.TERRITORIALITY_USER_NAME">
              {{ detailForm.TERRITORIALITY_USER_NAME }}
            </td>
            <th>打回原由</th>
            <td v-if="detailForm.SUPERVISION_STATE === 0">{{ detailForm.SUPERVISION_OPINION }}</td>
            <td v-if="detailForm.MANAGER_STATE === 0">{{ detailForm.MANAGER_OPINION }}</td>
            <td
              v-if="detailForm.TERRITORIALITY_STATE === 0 && detailForm.MANAGER_USER_NAME !== detailForm.TERRITORIALITY_USER_NAME">
              {{ detailForm.TERRITORIALITY_OPINION }}
            </td>
          </tr>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import dateformat from '@/utils/dateformat'
import { requestFN } from '@/utils/request'

export default {
  components: { vueQr },
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      imgUrl: '',
      userDetailForm: {},
      userCardIDPhotoFile: [], // 身份证照片
      trainRecordList: [],
      detailForm: {},
      photosOfLevel: [], // 三级教育照片
      specialUsersList: {},
      insuranceFileList: [], // 保险文件
      contractFileList: [],
      socialPhotoFile: [],
      gongshangbaoxianFile: [],
      userEntryForm: {},
      loading: false,
      heirloom: {},
      config: config
    }
  },
  methods: {
    init(e) {
      this.visible = true
      this.heirloom = JSON.parse(JSON.stringify(e))
      this.getUserInfoById(this.heirloom)
    },
    formatDate(date, column) {
      if (date) {
        return dateformat(date, 'YYYY-MM-DD')
      } else {
        return ''
      }
    },
    getUserInfoById(row) {
      this.loading = true
      requestFN(
        'user/getDetailByUserIdAndCorpInfoId',
        {
          USER_ID: row.USER_ID,
          CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID,
          CER_TYPE: '7498057c4c1f4a11b9a960e66ea04a7a'
        }
      ).then((data) => {
        Object.assign(this.userDetailForm, data.pd)
        this.userPhotoFile = data.userPhotoFile
        if (this.userPhotoFile.length > 0) {
          this.imgUrl = config.fileUrl + this.userPhotoFile[0].FILEPATH
        }
        this.photosOfLevel = data.photosOfLevel
        this.specialUsersList = data.specialUsers
        this.insuranceFileList = data.insuranceFile
        this.contractFileList = data.contractFile
        this.userCardIDPhotoFile = data.userCardIDPhotoFile
        this.socialPhotoFile = data.socialPhotoFile
        this.gongshangbaoxianFile = data.gongshangbaoxianFile
        // qr内容初始化
        if (row.STATUS === '2') {
          this.qrCodeStr = config.messageUrl + '?USER_ID=' + row.USER_ID
        } else {
          this.qrCodeStr = ''
        }

        requestFN(
          '/user/getFloatPersonDetailById',
          {
            USER_ID: row.USER_ID,
            CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID
          }
        ).then((data) => {
          this.userEntryForm = Object.assign(this.userEntryForm, data.eCard)
          this.detailForm = Object.assign(this.detailForm, data.userDetail)
          this.trainRecordList = data.recordList
          this.loading = false
        }).catch((e) => {
          console.log(e)
        })
      }).catch((e) => {
        console.log(e)
      })
    },
    formatLabel(value) {
      if (value == '1') {
        return '是'
      } else if (value == '0') {
        return '否'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
