<template>
  <d2-container class="page">
    <el-tabs value="first">
      <el-tab-pane label="统考考试课程考场查询" name="first">
         <div style="margin-bottom: 8px; border-left: 3px solid; color: rgb(230, 162, 60);">
          <div role="alert" class="el-alert el-alert--warning">
            <div class="el-alert__content">
              <span class="el-alert__title">{{timeControl.exam_year}}年{{timeControl.exam_month}}月份考试考场查询时间：{{timeControl.start_time}} 到 {{timeControl.end_time}}</span>
            </div>
          </div>
        </div>
        <br>
        <el-select v-model="course" filterable placeholder="请选择课程" @change="courseChange">
            <el-option v-for="(item,index) in courseList" :label="item.course_code+' | '+item.course_name" :value="item.enrol_id + '_' +item.course_id + '_' + item.year_code + '-'+ item.course_code + '-' + item.course_name" :key="index"></el-option>
        </el-select>
        &nbsp;<el-button type="primary" @click="downExamLocation">下载考场通知单</el-button>
        <br>
        <br>
        <el-table
          v-loading="loading"
          :data="examCourseLocation"
          empty-text="请选择课程"
          style="width: 100%">
          <el-table-column
            prop="course_code"
            label="考试课程课程"
            width="180">
            <template slot-scope="scope">
              {{scope.row.course_code}}-{{scope.row.course_name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="ticket_no"
            label="准考证号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="exam_name"
            label="考点"
            width="200">
            <!-- <template slot-scope="scope">
              {{scope.row.course_code}}-{{scope.row.exam_name}}
            </template> -->
          </el-table-column>
          <el-table-column
            prop="exam_time"
            label="考试时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="seat_no"
            label="座位号 "
            width="80">
          </el-table-column>
          <el-table-column
            prop="adress"
            label="地址 "
            width="260">
          </el-table-column>
        </el-table>
        <div style="font-size:16px;color: red;margin:8px 8px">
          未按时到场的考生禁止参加考试，请准时根据考试到场时间到场
        </div>
      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  components: {},
  computed: {
    ...mapState({
      stdReg: state => state.enrol.StdReg,
    })
  },
  data() {
    return {
      course:"",
      loading: false,
      timeControl:{},
      courseList:[],
      examCourseLocation:[],
      enrol_id: "",
      course_id: "",
      fileName:""

    };
  },
  async mounted() {
    this.init();
  },
  methods: {
    async init(){
      //special_flag 统考
      let res = await this.$http.post("/std/enrol/examCourseSeatedList.htm?special_flag=0");
      this.timeControl = res.data.map.timeControl;
      this.courseList = res.data.map.courseList;
    },
    async courseChange(ids) {
      if (!ids) return;
      console.log(ids);
      this.examCourseLocation = [];
      let idArray = ids.split('_');
      this.enrol_id = idArray[0];
      this.course_id = idArray[1];
      this.fileName = idArray[2];
      this.loading = true;
      let res = await this.$http.post("/std/enrol/examCourseLocation.htm", this.Qs.stringify({
        enrol_id: this.enrol_id,
        course_id:this.course_id,
        fileName:this.fileName
      }));
      this.examCourseLocation.push(res.data.map.examCourseLocation)
      this.loading = false;
      


    },
    async downExamLocation(){
      if(!this.enrol_id){
        this.alert("请选择课程","信息提示");
        return;
      }

     let res = await this.$http({
        method:'post',
        url:`/std/enrol/downExamCourseLocation.htm?enrol_id=${this.enrol_id}&course_id=${this.course_id}`,
        responseType:'blob',
      })
      // let content = res.headers['content-disposition'];
      // let name = content.substring(content.indexOf("=")+1,content.length);
      // let suffix = name.substring(name.lastIndexOf(".")+1);
      let url = window.URL.createObjectURL(new Blob([res.data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download',  "123123.pdf");// this.fileName + ".pdf")

      document.body.appendChild(link)
      link.click()
      
    }
  }
};
</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>
