<template>
  <d2-container class="page" v-loading="loading">
    <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" v-if="timeControl">
            <div class="el-alert__content">
              <span class="el-alert__title">{{timeControl.exam_year_month}}考试考场查询时间：{{timeControl.start_time}} 到 {{timeControl.end_time}}</span>
            </div>
          </div>

          <div role="alert" class="el-alert el-alert--warning" v-if="!timeControl">
            <div class="el-alert__content">
              <span class="el-alert__title">考试考场查询时间未配置，请耐心等待。</span>
            </div>
          </div>

           

        </div>
        <!-- <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" :key="index"></el-option>
        </el-select> 
       
        &nbsp; <div v-if="courseList.length>0"><el-button type="primary" @click="downExamLocation">下载考场通知单</el-button></div>
        <br>
         -->

        <div style="border-bottom: 2px solid #eee;">&nbsp;</div>
        <el-table v-if="timeControl"
          v-loading="loading"
          :data="examCourseLocation"
          empty-text="请选择课程"
          style="width: 100%">
          <el-table-column
            prop="course_code"
            label="考试课程"
            width="250">
            <template slot-scope="scope">
              {{scope.row.course_code}}-{{scope.row.course_name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="ticket_no"
            label="准考证号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="unit_name_bz"
            label="考点名称"
            width="170">
            <!-- <template slot-scope="scope">
              {{scope.row.course_code}}-{{scope.row.exam_name}}
            </template> -->
          </el-table-column>
           <el-table-column
            prop="room_code"
            label="考场号"
            width="70">
          </el-table-column>

          
          <el-table-column
            prop="exam_time"
            label="考试时间"
            width="220">
          </el-table-column>
          <el-table-column
            prop="seat_no"
            label="座位号 "
            width="70">
          </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>

    <el-dialog :title="ticket_promise_one_title" width="1200px" style="margin-top: -80px;" :visible.sync="applyDialogVisibleone">
          <div style="margin-top: -20px;padding-top:-20px;">
            <iframe :src="ticket_promise_one" style="margin-top: 0px;padding-top:0px;" width="1170px" height="450px" scrolling="auto"></iframe>


            <center>
              <el-checkbox v-model="checkedCourse[0]">考生承诺:本人已充分阅读、知晓以上全部内容并自愿遵守，如有违反，将自愿承担相应的法律责任。</el-checkbox>
            </center>
            <center>
              <el-button type="primary" @click="downTickettwo()">{{secCountInfoApplyDialogVisibleone}}</el-button>
            </center>
             
          </div>

        </el-dialog>

        <el-dialog :title="ticket_promise_two_title" width="1200px" style="margin-top: -80px;" :visible.sync="applyDialogVisibleone2">
          <div style="margin-top: -20px;padding-top:-20px;">
            <iframe :src="ticket_promise_two" style="margin-top: 0px;padding-top:0px;" width="1170px" height="450px" scrolling="auto"></iframe>
            <center>
              <el-checkbox v-model="checkedCourse2[0]">考生承诺:本人已充分阅读、知晓以上全部内容并自愿遵守，如有违反，将自愿承担相应的法律责任。</el-checkbox>
            </center>
            <center>
              <el-button type="primary" @click="downTicket()">{{secCountInfoApplyDialogVisibleone2}}</el-button>
            </center>
             
          </div>

        </el-dialog>

  </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,
      course:"",
      loading: false,
      isInTimeControl:false,
      timeControl:{},
      courseList:[],
      examCourseLocation:[],
      enrol_id: "",
      course_id: "",

    ticketTimeControl:null,
	  inTicketTime:null,
    secCountDownInfo:"准考证下载(使用电脑下载)",
    secCountDown: 0,
    applyDialogVisibleone:null,
    secCountInfoApplyDialogVisibleone:"确定",
    secCountApplyDialogVisibleone: 0,
    applyDialogVisibleone2:null,
    secCountInfoApplyDialogVisibleone2:"确定",
    secCountApplyDialogVisibleone2: 0,
    checkedCourse:[],
    checkedCourse2:[],
    ticket_promise_one:null,
    ticket_promise_one_title:null,
    ticket_promise_two:null,
    ticket_promise_two_title:null,

    };
  },
  async mounted() {
    this.init();
  },
  methods: {
    async init(){
      //special_flag 统考
      // let loading = this.showLoading();
      let loadingInstance = Loading.service({ fullscreen: true });

      let res = await this.$http.post("/std/enrol/examCourseSeatedList.htm",
      this.Qs.stringify({
          special_flag: 1
        })
      )

      this.timeControl = res.data.map.timeControl;
      this.isInTimeControl = res.data.map.isInTimeControl;
      
      this.courseList = res.data.map.courseList;

     res = await this.$http.post("/std/enrol/examCourseLocationAll.htm",
      this.Qs.stringify({
          special_flag: 1
        })
      )

      this.examCourseLocation = res.data.array;


     

      // this.hideLoading(loading);
      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        loadingInstance.close();
      });
    },
    async courseChange(ids) {
      if (!ids) return;
      this.examCourseLocation = [];
      let idArray = ids.split('_');
      this.enrol_id = idArray[0];
      this.course_id = idArray[1];
      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
      }));
      this.examCourseLocation.push(res.data.map.examCourseLocation)
      this.loading = false;
      


    },
    async downExamLocation(){
      if(!this.stdReg.photo_url){
        this.alert("请先上传图片后再下载!");
        return;
      }

      if(!this.isInTimeControl){
        this.alert("不在考试考场查询时间内,暂不允许下载");
        return;
      }
      
    //  let loading = this.showLoading();
     this.loading = true;
     let enrol_ids = [];
     let course_ids = [];
     this.courseList.forEach((item,index) =>{
       course_ids.push(item.course_id);
       enrol_ids.push(item.enrol_id);
     })
     let res = await this.$http({
        method:'post',
        url:`/std/enrol/downExamCourseLocation.htm?enrol_ids=${enrol_ids.join()}&course_ids=${course_ids.join()}&special_flag=1`,
        responseType:'blob',
      })
      // let course = _.find( this.courseList, {"enrol_id": parseInt(this.enrol_id)});
      let course = this.courseList[0];
      let fileName =  `考场通知单.pdf` 
      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);
      this.loading = false;
      
    },

    async downTicketone() {
      if(!this.ticketTimeControl || !this.inTicketTime){
        this.alert("不在下载时间内,暂不允许下载准考证");
        return;
      }

      let res_ = await this.$http.post("/std/stdEnrol/existFacePic.htm");
      if (!res_.data.success) {
        this.alert("考生图片不存在无法下载,请先上传图片");
        return;
      }

      let res_enrol = await this.$http.post("/std/stdEnrol/existStdEnrolPayed.htm");
      
      if (!res_enrol.data.success) {
        this.alert("您本批次没有报考并缴费任何课程，无法下载准考证");
        return;
      }

     // 已配置广西壮族自治区高等教育自学考试防疫承诺书公告路径，跳转该页面的弹出窗口
     if(this.ticket_promise_one){
        var _this = this;
        _this.secCountApplyDialogVisibleone = 10;
        var int = setInterval(function(){
          _this.secCountApplyDialogVisibleone--;
          if(_this.secCountApplyDialogVisibleone <= 0){
            clearInterval(int);
            //恢复 发送按钮
            _this.secCountInfoApplyDialogVisibleone = "确定";
          }else{
            //倒计时提示
            _this.secCountInfoApplyDialogVisibleone = "确定("+_this.secCountApplyDialogVisibleone+")";
          }
        },1000);

        this.applyDialogVisibleone = true; 
        this.applyDialogVisibleone2 = false; 
     }else{
        // 没有配置广西壮族自治区高等教育自学考试防疫承诺书公告路径
        this.downTickettwo();
     }
    },

    async downTickettwo() {
     // 已配置广西壮族自治区高等教育自学考试防疫承诺书公告路径 且防疫承诺书公告页面倒计时还没有完成时，按钮不可用
      if(this.ticket_promise_one && this.secCountApplyDialogVisibleone > 0){
        return;
      }

      // 已配置广西壮族自治区高等教育自学考试防疫承诺书公告路径 且没有选择我已认真阅读并已知晓时，按钮不可用
       if(this.ticket_promise_one && this.checkedCourse.length == 0) {
        this.alert("请勾选考生承诺后再点“确定”。");
        return;
      }

      // 已配置广西壮族自治区高等教育自学考试个人健康承诺书路径，跳转该页面的弹出窗口
      if(this.ticket_promise_two){
          var _this = this;
          _this.secCountApplyDialogVisibleone2 = 10;
          var int = setInterval(function(){
            _this.secCountApplyDialogVisibleone2--;
            if(_this.secCountApplyDialogVisibleone2 <= 0){
              clearInterval(int);
              //恢复 发送按钮
              _this.secCountInfoApplyDialogVisibleone2 = "确定";
            }else{
              //倒计时提示
              _this.secCountInfoApplyDialogVisibleone2 = "确定("+_this.secCountApplyDialogVisibleone2+")";
            }
          },1000);

          this.applyDialogVisibleone = false; 
          this.applyDialogVisibleone2 = true; 
      }else{
         // 没有配置广西壮族自治区高等教育自学考试个人健康承诺书路径
        this.downTicket();
      }
       
    },

    async downTicket() {
      // 已配置广西壮族自治区高等教育自学考试个人健康承诺书公告路径 且防疫承诺书公告页面倒计时还没有完成时，按钮不可用
      if(this.ticket_promise_two && this.secCountApplyDialogVisibleone2 > 0){
        return;
      }

      // 已配置广西壮族自治区高等教育自学考试个人健康承诺书公告路径 且没有选择我已认真阅读并已知晓时，按钮不可用
       if(this.ticket_promise_two && this.checkedCourse2.length == 0) {
        this.alert("请勾选考生承诺后再点“确定”。");
        return;
      }

      this.applyDialogVisibleone = false; 
      this.applyDialogVisibleone2 = false; 

      //if(!this.ticketTimeControl || !this.inTicketTime){
      //  this.alert("不在下载时间内,暂不允许下载准考证");
      //  return;
     // }

     // let res_ = await this.$http.post("/std/stdEnrol/existFacePic.htm");
     // if (!res_.data.success) {
     //   this.alert("考生图片不存在无法下载,请先上传图片");
     //   return;
     // }

     // let res_enrol = await this.$http.post("/std/stdEnrol/existStdEnrolPayed.htm");
      
     // if (!res_enrol.data.success) {
     //   this.alert("您本批次没有报考并缴费任何课程，无法下载准考证");
      //  return;
     // }

      var _this = this;
      _this.secCountDown = 30;
      var int = setInterval(function(){
        _this.secCountDown--;
        if(_this.secCountDown <= 0){
          clearInterval(int);
          //恢复 发送按钮
          _this.secCountDownInfo = "准考证下载(使用电脑下载)";
        }else{
          //倒计时提示
          _this.secCountDownInfo = _this.secCountDown+"秒后可重新下载准考证";
        }
      },1000);


      let res = await this.$http({
        method: "post",
        url: `/std/enrol/downTicket.htm`,
        responseType: "blob"
      });
      let fileName = null;
      
      if(this.stdReg.ticket_no){
        fileName = `${this.stdReg.ticket_no}.pdf`;
      }else{
        fileName = `准考证.pdf`;
      }
      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>
