<!-- 我的证书 -->
<template>
  <div class="app-container myCertificates">
    <div class="page-container myCertificatesPage" v-if="pageType === 1">
      <p class="pageTitle">我的证书</p>
      <div class="page-content-box">
        <el-table class="table-box" border :data="dataList">
          <el-table-column label="证书名称" prop="certificateName" show-overflow-tooltip/>
          <el-table-column label="证书编号" prop="certificateNo" width="200" show-overflow-tooltip/>
          <el-table-column label="获得方式" prop="obtainWay" width="200" show-overflow-tooltip/>
          <el-table-column label="颁发单位" prop="issueDeptName" width="200" show-overflow-tooltip/>
          <el-table-column label="获得时间" prop="issueTime" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.issueTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="到期时间" prop="expireTime" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.expireTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   v-if="scope.row.certificateStatus == 1 && scope.row.certificatePrintEnabled == 1"
                   @click="tableButton(1,scope.row)"
                >查看下载</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <fullScreenFileLook ref="fullScreenFileLook"></fullScreenFileLook>
    <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
  </div>
</template>
<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  //import addPage from "./addPage.vue";
  import { examUserCertificateList, } from "@/api/safetyEducationExaminationNew/index";
  import fullScreenFileLook from "@/components/fullScreenFileLook/fullScreenFileLook.vue";
  export default {
    name: 'index',
    components: {
      fullScreenFileLook,
    },
    data() {
      return {
        tableButtonType: this.hasPermiDom(['demo:demo:detail', 'demo:demo:edit', 'demo:demo:del']),
        //页面状态
        pageType: 1,
        //查询条件
        queryParams: {
          page: 1,
          pageSize: 20,
        },
        //时间数据
        dateRange: [],
        //列表数据
        dataList: [],
        //数据数量
        total: 0,
        //组件传参
        propsData: {}
      }
    },
    created() {

    },
    mounted() {
      this.getList();
    },
    methods: {
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$set(this, 'dateRange', [])
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        examUserCertificateList(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //操作按钮
      tableButton(type, row) {
        let self = this
        if (type == 1) {
          //查看下载
          this.$refs['fullScreenFileLook'].initialize(row.certificateName,row.certificatePath,'docx');
        } else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      },
    }
  }
</script>
<style scoped lang="scss">
  .myCertificates {
    .myCertificatesPage {
      .pageTitle{
        height:60px;
        line-height:60px;
        padding:0 20px;
        border-bottom:1px solid #dedede;
      }
    }
  }
</style>
