<template>
    <div>
      <BaseDialog
        width="900px"
        :isShow.sync="isCertDetailDialog"
        title="详情"
        @close="close"
        :appendToBody="true"
        :confirmStatus="false"
        :isShowFooter="false"
      >
        <detailList :column="2" :border="true" :listLabel="listLabel" :listData="listData"></detailList>
        <div style="height: 1px; width: 100%; background: #DDDDDD; margin: 30px 0;"></div>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; text-align: center;"
            :border="true"
            fit
            :header-cell-style="{
              color: '#333',
              fontSize: '14px',
              'text-align': 'center'
            }"
            :cell-style="{
              'text-align': 'center'
            }"
          >
            <el-table-column min-width="150px" prop="certificateMajor" label="专业"></el-table-column>
            <el-table-column min-width="150px" prop="startEffectiveDate" label="有效日期开始">
              <template slot-scope="scope">
                {{  $methodsTools.timestampFormat(scope.row.startEffectiveDate) }}
              </template>
            </el-table-column>
            <el-table-column min-width="150px" prop="endEffectiveDate" label="有效日期结束">
              <template slot-scope="scope">
                {{  $methodsTools.timestampFormat(scope.row.endEffectiveDate) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </BaseDialog>
    </div>
  </template>
  
  <script>
    import detailList from '@/views/companyManagement/component/detailList'
  export default {
    components: { detailList },
    data() {
      return {
        isCertDetailDialog: false,
        listData: {},
        listLabel: [
            { label: '持证人', value: 'staffName' },
            { label: '身份证号', value: 'idCard' },
            { label: '所属企业', value: 'companyName' },
            { label: '证书类型', value: 'certificateTypeName' },
            { label: '证书名称', value: 'certificateName' },
            { label: '发证日期', value: 'startTime', type: 'time' },
            { label: '有效日期', value: 'endTime', type: 'time' },
            { label: '证书预览', value: 'previewImg', type: 'img'},
            { label: '备注', value: 'staffRemarks' }
          ],
        tableData: []
      };
    },
  
    mounted() {
    },
  
    methods: {
      openBoxs(row) {
        this.isCertDetailDialog = true
        this.listData = row
        this.tableData = JSON.parse(row.certificateMajor)
      },
      close() {},
    },
  };
</script>
  
<style lang="scss" scoped>
.content{
  .title{
    font-weight: bold;
    border-bottom: 1px solid #333;
    padding-bottom: 10px; 
    color: #000;
    margin: 15px 0;
  }
}
</style>
  