<!--
  @description:专家职业资格查看组件
  @Modifier: wxy
  @routerPath:
  @date:  2020-09-08 10:35:00
-->
<template>
  <div class="projectInfoDetail">
    <div class="page-title">
      5.职业资格
    </div>
    <section>
      <el-table ref="smallTable" :data="tableData" class="tableLimit" border>
        <el-table-column
          prop="practiceQualificationName"
          label="职业资格证书"
          header-align="center"
          align="center"
          min-width="140"
        />
        <el-table-column
          prop="certificateCompany"
          label="颁发机构"
          header-align="center"
          align="center"
          min-width="140"
        />
        <el-table-column
          prop="certificateNo"
          label="注册证书编号"
          header-align="center"
          align="center"
          min-width="140"
        />
        <el-table-column
          prop="acquisitionDate"
          label="获得时间"
          header-align="center"
          align="center"
          min-width="140"
        >
          <template slot-scope="scope">
            <span>{{ $Moment(scope.row.acquisitionDate).format(momentDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="invalidDate"
          label="有效期至"
          header-align="center"
          align="center"
          min-width="140"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.longTerm === '01'">长期</span>
            <span v-else>{{ $Moment(scope.row.invalidDate).format(momentDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="150" fixed="right">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click.stop="clickDetail(scope.row)"
            >
              [查看]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <ExpertVocationalQualificationsDetailDialog v-if="dialogData.dialog" :dialog-data="dialogData" />
  </div>
</template>

<script>
/* 接口*/
import { getExpertCertificationById } from '@/api/expert/expertscloud.js'
import { commonMxin } from '@/mixins/commonMxin'
/* 组件 */
import ExpertVocationalQualificationsDetailDialog from '@/views/expert/experImprovetBaseInfo/expertVocationalQualifications/expertVocationalQualificationsDetail-dialog'
export default {
  components: {
    ExpertVocationalQualificationsDetailDialog
  },
  mixins: [commonMxin],
  data() {
    return {
      tableData: [], // 职业资格信息
      // 弹框数据
      dialogData: {
        dialog: false,
        id: ''
      }
    }
  },
  created() {
    // 查询职业资格信息
    this.initData()
  },
  methods: {
    initData() {
      const data = {
        expertId: this.$route.params.expertId
      } // 专家id
      getExpertCertificationById(data).then(res => {
        this.tableData = res.data.records // 职业资格信息
      }).catch(() => {})
    },
    clickDetail(row) {
      this.dialogData = {
        dialog: true,
        id: row.id
      }
    }
  }
}
</script>

<style lang='less' scoped>
.baseInfo{
   font-weight: bolder;
}
</style>
