<template>
  <d2-container class="page" v-loading="loading">
    <el-tabs value="first">
      <el-tab-pane label="违纪告知书和决定书" name="first">
        
        <div style="border-bottom: 2px solid #eee;">&nbsp;</div>
        <el-table
          v-loading="loading"
          :data="examCourseLocation"
         
          style="width: 100%">
          <el-table-column
            prop="exam_year_month"
            label="考试批次"
            width="160">
          </el-table-column>
          <el-table-column
            prop="ticket_no"
            label="准考证号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="std_name"
            label="姓名"
            width="160">
           
          </el-table-column>
           <el-table-column
            prop="cert_no"
            label="证件号码"
            width="180">
            <template slot-scope="scope">{{scope.row.cert_no? scope.row.cert_no.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):""}}</template>
          </el-table-column>

          
          <el-table-column
            prop="file_type"
            label="文书类型"
            width="100">
          </el-table-column>
          <el-table-column
           
            label="操作"
            width="150">
            <template slot-scope="cope">
             <a v-if="cope.row.file_type == '告知书'" style="color:blue;cursor:pointer" title="点击下载违纪告知书" @click="downStdBreakDisciplineFile(cope.row.exam_time_id,cope.row.ticket_no,cope.row.file_type,cope.row.file_url)">下载违纪告知书 </a>
             <a v-if="cope.row.file_type == '决定书'"  style="color:blue;cursor:pointer" title="点击下载违纪决定书" @click="downStdBreakDisciplineFile(cope.row.exam_time_id,cope.row.ticket_no,cope.row.file_type,cope.row.file_url)">下载违纪决定书 </a>

              </template>

          </el-table-column>
          
        </el-table>
       
      </el-tab-pane>
    </el-tabs>

  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { Loading } from 'element-ui';

export default {
  components: {},
  computed: {
    ...mapState({
      stdReg: state => state.enrol.StdReg,
    })
  },
  data() {
    return {
      loading: false,
      examCourseLocation:[],

    };
  },
  async mounted() {
    this.init();
  },
  methods: {
    async init(){
     
      let loadingInstance = Loading.service({ fullscreen: true });

      let res = await this.$http.post("/std/stdBreakDiscipline/queryStdBreakDisciplineFile.htm",
      this.Qs.stringify({
          
        })
      )
      
      this.examCourseLocation = res.data.array;

      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        loadingInstance.close();
      });
    },

    async downStdBreakDisciplineFile(exam_time_id,ticket_no,file_type,file_url) {
    
      let res = await this.$http({
        method: "post",
        url: `/std/stdBreakDiscipline/downStdBreakDisciplineFile.htm?exam_time_id=`+exam_time_id+`&file_type=`+file_type,
        responseType: "blob"
      });
      let fileName = null;
      let fileExtension = file_url.split('.').pop();

      if(file_type=='告知书'){
        fileName = `${ticket_no}违纪告知书.`+fileExtension;
      }else{
        fileName = `${ticket_no}违纪决定书.`+fileExtension;
      }
      if (window.navigator.msSaveBlob) {
        try {
          var blobObject = new Blob([res.data]);
          window.navigator.msSaveBlob(blobObject, fileName);
        } catch (e) {
          console.log(e);
        }
      } else {
        let loading = this.showLoading();
        let url = window.URL.createObjectURL(new Blob([res.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", fileName);

        document.body.appendChild(link);
        link.click();
        this.hideLoading(loading);
      }
    }
  }
};
</script>

<style lang="scss">
#enrol_guid_index_scoped {
  .el-card__body {
    padding: 9px !important;
  }
  .el-card__header {
    padding: 11px 20px;
  }
  .cell {
    margin-left: 10px;
    border-bottom: 1px;
  }
  .el-table td,
  .el-table th {
    padding: 5px 0;
  }
  .el-card__header {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
  }
  .el-card__body {
    padding: 0px;
  }
  .redBold {
    color: red;
    font-size: 15px;
    font-weight: 200;
    font-weight: bold;
  }
  .el-button-group {
    margin-top: 10px;
  }
  .el-button {
    margin-right: 10px;
  }
  .title{
    color: #409EFF;
    margin-bottom: 15px;
  }
}
</style>
