<template>
  <div class="m-right-block fr mh576" style="position: relative;">
    <div class="right-block-bd">
      <div class="mb10 tc mt20">
        <span class="p-ico2 worm-ico-o"></span>
        注：<span class="txt-o"></span>考试前三天才会生成,若未看到，请联系管理员
      </div>

      <div  class="ng-scope">
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
          <el-table-column label="准考号" align="center" width="120" prop="uuid"/>
          <el-table-column label="考试科目" prop="courseName" align="center" width="110"/>

          <el-table-column label="考试地点" prop="address" align="center"/>

          <el-table-column label="考试时间" prop="examTime" align="center" width="175"/>

          <el-table-column label="考试时长" prop="duration" align="center" width="80"/>

          <el-table-column label="考试座位" prop="seat" align="center" width="80"/>

          <el-table-column label="操作" fixed="right" align="center" width="100">
            <template slot-scope="{row}">
              <el-button  @click="printCert( row )" type="text" size="small">打印</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
           :page-size="size"
           layout="total, prev,pager, next"
           :total="list.length">
        </el-pagination>

      </div>

      <el-dialog title="" class="previewDialog" :visible.sync="printCertDialog"
        top="0" append-to-body width="1024px"
        @close="printCertDialog=false">
        <div class="el-dialog__body" style="margin-top:-30px">
          <IPrintCert :info="info" ></IPrintCert>
        </div>

      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import {formatTimeToStr} from "@/utils/date.js";
 import { mapGetters } from "vuex";
  import IPrintCert from "./components/iPrintCert.vue";
  export default {
    name: "Index",
    data() {
      return {
        page:1,
        size:10,
        total: 20,
        info:{},
        list: [],
        printCertDialog:false,
        listLoading: false
      };
    },
    beforeMount() {
      this.getData()
    },
    components:{IPrintCert},
    computed: {
    	...mapGetters("user", ["userInfo"])
    },
    methods: {
      getData() {
        this.listLoading = true
        httpServer('User.GetUserSeatList', {}).then( res=>{
            if( res.code == 200){
              this.list = res.data||[]
            }
            this.listLoading = false
        })
      },
      printCert( row  ){
        document.title = window.baseConfig.userSeatTitle;
        this.info = Object.assign(this.info, row);
        if( !this.userInfo.headImg ){
          this.$message.errorMsg("还未上传头像", 2)
          return;
        }
        this.info.headImg = this.userInfo.headImg;
        this.printCertDialog = true;
      },

      handleCurrentChange: function(page) {
        this.page = page
        this.getData()
      }
    }
  }
</script>

<style>
  .previewDialog{
      text-align: center;
  }
  .previewDialog.el-dialog {
    .el-dialog__header {
      display: none;
    }
    .dj-dialog-content {
      padding: 0;
      overflow: unset;
    }
  }
</style>
