<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">{{year}}年{{month}}月份考试考场查询时间：{{timeControl.start_time}} 到 {{timeControl.end_time}}</span>
            </div>
          </div>
        </div>
        
        <el-select v-model="major" filterable placeholder="请选择专业" @change="majorChange" clearable size="medium" style="width:280px;">
          <el-option label="-请选择-" value="" ></el-option>
            <el-option v-for="(item,index) in majorList" :label="item.full_name" :value="item.id" :key="index"></el-option>
        </el-select>

        &nbsp;
        <el-select size="medium" v-model="exam_time_id" filterable clearable placeholder="请选择批次" @change="timesChange()" style="width:180px;">
          <el-option v-for="item in exam_times" :key="item.id" :label="item.exam_year_month" :value="item.id"></el-option>
        </el-select>

        <br>
        <div style="border-bottom: 2px solid #eee;">&nbsp;</div>
        <el-row style="margin-top: 10px;">
          <div v-if="welcome">
              <center>请选择专业查询</center>
          </div>
          <div v-if=" !welcome && courseListIsEmpty()">
              <center>无课程考试计划信息或专业已停考</center>
          </div>
          <el-col v-for="(course) in courseList" :key="course.id" :span="6">
            <el-card class="box-card" shadow="hover" style="margin-right: 10px;">
              <div slot="header" class="clearfix" style="font-size:15px;font-weight: 600;">
                <span>{{course.key}}</span>
              </div>
              <div v-if="course.data.length > 0" v-for="(item,index) in course.data" :key="index" class="text item" style="font-size:14px">
                  {{item.course_code}} - {{item.course_name }} <span v-if="item.is_social_enrol == 0" style="color:red;">*</span> - {{item.course_score}}

                  <div style="border-color:#ebeef5;border:1px solid;margin: 5px;padding:5px">
                    <table>
                       <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材大纲：</td>
                        <td style="font-size:10px">{{item.textbook_outline}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材：</td>
                        <td style="font-size:10px">{{item.textbook_name}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">主编：</td>
                        <td style="font-size:10px">{{item.textbook_writer}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">出版社：</td>
                        <td style="font-size:10px">{{item.textbook_publisher}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">版次：</td>
                        <td style="font-size:10px">{{item.textbook_revision}}</td>
                      </tr>
                    </table>
                  </div>
              </div>
              <div v-if="course.data.length == 0">
                  <center>不安排考试计划</center>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <h3 v-if="courseList2.length>0" style="margin-bottom:0px;padding-bottom:0px;margin-top:0px;padding-top:0px;height: 32px;border-bottom: 1px solid #0090ff;">
        </h3>

         <el-row style="margin-top: 10px;">
          
          <el-col v-if="courseList2.length>0" v-for="(course) in courseList2" :key="course.id" :span="6">
            <el-card class="box-card" shadow="hover" style="margin-right: 10px;">
              <div slot="header" class="clearfix" style="font-size:15px;font-weight: 600;">
                <span>{{course.key}}</span>
              </div>
              <div v-if="course.data.length > 0" v-for="(item,index) in course.data" :key="index" class="text item" style="font-size:14px">
                  {{item.course_code}} - {{item.course_name }} <span v-if="item.is_social_enrol == 0" style="color:red;">*</span> - {{item.course_score}}

                  <div style="border-color:#ebeef5;border:1px solid;margin: 5px;padding:5px">
                    <table>
                       <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材大纲：</td>
                        <td style="font-size:10px">{{item.textbook_outline}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材：</td>
                        <td style="font-size:10px">{{item.textbook_name}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">主编：</td>
                        <td style="font-size:10px">{{item.textbook_writer}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">出版社：</td>
                        <td style="font-size:10px">{{item.textbook_publisher}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">版次：</td>
                        <td style="font-size:10px">{{item.textbook_revision}}</td>
                      </tr>
                    </table>
                  </div>
              </div>
              <div v-if="course.data.length == 0">
                  <center>不安排考试计划</center>
              </div>
            </el-card>
          </el-col>
        </el-row>
     
      </el-tab-pane>
       <el-tab-pane label="选考课程考试计划" name="second">
         <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">{{year}}年{{month}}月份考试考场查询时间：{{timeControl.start_time}} 到 {{timeControl.end_time}}</span>
            </div>
          </div>
        </div>
        
       
        <el-select size="medium" v-model="exam_time_id2" filterable clearable placeholder="请选择批次" @change="timesChange2()" style="width:180px;">
          <el-option v-for="item in exam_times" :key="item.id" :label="item.exam_year_month" :value="item.id"></el-option>
        </el-select>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公告：<a style="color:blue;font-size: 16px;" href="https://www.gxeea.cn/view/content_1148_15806.htm" target="_new">我区高等教育自学考试英语和数学等课程由必考课改为选考课</a>


        <br>
        <div style="border-bottom: 2px solid #eee;">&nbsp;</div>
        <el-row style="margin-top: 10px;">
          <div v-if="welcome">
              <center>无课程考试计划信息</center>
          </div>
          <div v-if=" !welcome && secondcourseListIsEmpty()">
              <center>无课程考试计划信息</center>
          </div>
          <el-col v-for="(course) in secondcourseList" :key="course.id" :span="6">
            <el-card class="box-card" shadow="hover" style="margin-right: 10px;">
              <div slot="header" class="clearfix" style="font-size:15px;font-weight: 600;">
                <span>{{course.key}}</span>
              </div>
              <div v-if="course.data.length > 0" v-for="(item,index) in course.data" :key="index" class="text item" style="font-size:14px">
                  {{item.course_code}} - {{item.course_name }} <span v-if="item.is_social_enrol == 0" style="color:red;">*</span> - {{item.course_score}}

                  <div style="border-color:#ebeef5;border:1px solid;margin: 5px;padding:5px">
                    <table>
                       <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材大纲：</td>
                        <td style="font-size:10px">{{item.textbook_outline}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材：</td>
                        <td style="font-size:10px">{{item.textbook_name}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">主编：</td>
                        <td style="font-size:10px">{{item.textbook_writer}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">出版社：</td>
                        <td style="font-size:10px">{{item.textbook_publisher}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">版次：</td>
                        <td style="font-size:10px">{{item.textbook_revision}}</td>
                      </tr>
                    </table>
                  </div>
              </div>
              <div v-if="course.data.length == 0">
                  <center>不安排考试计划</center>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <h3 v-if="secondcourseList2.length>0" style="margin-bottom:0px;padding-bottom:0px;margin-top:0px;padding-top:0px;height: 32px;border-bottom: 1px solid #0090ff;">
        </h3>

         <el-row style="margin-top: 10px;">
          
          <el-col v-if="secondcourseList2.length>0" v-for="(course) in secondcourseList2" :key="course.id" :span="6">
            <el-card class="box-card" shadow="hover" style="margin-right: 10px;">
              <div slot="header" class="clearfix" style="font-size:15px;font-weight: 600;">
                <span>{{course.key}}</span>
              </div>
              <div v-if="course.data.length > 0" v-for="(item,index) in course.data" :key="index" class="text item" style="font-size:14px">
                  {{item.course_code}} - {{item.course_name }} <span v-if="item.is_social_enrol == 0" style="color:red;">*</span> - {{item.course_score}}

                  <div style="border-color:#ebeef5;border:1px solid;margin: 5px;padding:5px">
                    <table>
                       <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材大纲：</td>
                        <td style="font-size:10px">{{item.textbook_outline}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px;vertical-align: top;">教材：</td>
                        <td style="font-size:10px">{{item.textbook_name}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">主编：</td>
                        <td style="font-size:10px">{{item.textbook_writer}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">出版社：</td>
                        <td style="font-size:10px">{{item.textbook_publisher}}</td>
                      </tr>
                      <tr>
                        <td style="width:70px;font-weight:550;font-size:13px">版次：</td>
                        <td style="font-size:10px">{{item.textbook_revision}}</td>
                      </tr>
                    </table>
                  </div>
              </div>
              <div v-if="course.data.length == 0">
                  <center>不安排考试计划</center>
              </div>
            </el-card>
          </el-col>
        </el-row>

     
      </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 {
      welcome:true,
      major:"",
      exam_time_id: "",
      exam_time_id2: "",
      exam_times:[],
      loading: false,
      timeControl:null,
      majorList:[],
      courseList:[],
      courseList2:[],
      secondcourseList:[],
      secondcourseList2:[],
      year: null,
      month: null
    };
  },
  async mounted() {
    this.init();
  },
  methods: {
    async init(){
      // let loading = this.showLoading();
      this.loading = true;
      
      let res = await this.$http.post("/std/stdEnrol/queryMajor.htm");
      this.timeControl = res.data.map.timeControl;
      this.majorList =  res.data.map.majorList;//_.filter(res.data.map.majorList, function(o) { return o.status == 1; });
      this.major = this.stdReg.major_id;
      this.year= res.data.map.year;
      this.month = res.data.map.month;
      // this.hideLoading(loading);

    
      let yearcodeRes = await this.$http.post(
      "/pl/plExamTime/getCurrentYearCode.htm",
      {},
      this.$http.headers.FORM
      );
      let yearcode = yearcodeRes.data.entity;

      let timesRes = await this.$http.post(
      "/pl/plExamTime/listtime.htm",
      {},
      this.$http.headers.FORM
      );
      this.exam_times = timesRes.data.array;

      for (let i = 0; i < this.exam_times.length; i++) {
        const element = this.exam_times[i];
        //if(element.year_code == 202004){
        //  this.exam_time_id = element.id;
        //}

         if(element.currentYearCode == true){
           this.exam_time_id = element.id;
           this.exam_time_id2 = element.id;
           this.$nextTick(() => {
             this.majorChange(this.major);
             this.timesChange2();
           });

           break;
         }

      }
     
      this.loading = false;
    },
    async majorChange(major_id) {
      if (!String(major_id)) return;
      this.welcome = false;
      this.courseList = [];
      this.courseList2 = [];
      this.major_id = major_id;
      // let loading = this.showLoading();
      this.loading = true;
      let res = await this.$http.post("/std/stdEnrol/queryCourseEnrolByMajor.htm", this.Qs.stringify({
        major_id: major_id,//this.major_id, TESTDATA
        exam_time_id: this.exam_time_id
      }));
      this.courseList = this.transData(res.data.entity);

      //考试计划超过4条记录，则分两个数组存放，用于展示
      if(this.courseList && this.courseList.length>4){
        let array1 = [];
        let array2 = [];
        for (let index = 0; index < this.courseList.length; index++) {
            if(index<=3){
              array1.push(this.courseList[index])
            }else{
              array2.push(this.courseList[index])
            }
        }

        this.courseList = array1;
        this.courseList2 = array2;
      
      }

      // this.hideLoading(loading);
       this.loading = false;
    },
    async timesChange(){
      await this.majorChange(this.major_id);
    },
    async timesChange2(){
      this.welcome = false;
      this.secondcourseList = [];
      this.secondcourseList2 = [];
      this.loading = true;
      let res = await this.$http.post("/std/stdEnrol/listPublishCouseForSelected.htm", this.Qs.stringify({
        exam_time_id: this.exam_time_id2
      }));
      this.secondcourseList = this.transData(res.data.entity);

      //考试计划超过4条记录，则分两个数组存放，用于展示
      if(this.secondcourseList && this.secondcourseList.length>4){
        let array1 = [];
        let array2 = [];
        for (let index = 0; index < this.secondcourseList.length; index++) {
            if(index<=3){
              array1.push(this.secondcourseList[index])
            }else{
              array2.push(this.secondcourseList[index])
            }
        }

        this.secondcourseList = array1;
        this.secondcourseList2 = array2;
      
      }

      // this.hideLoading(loading);
       this.loading = false;
    },
    transData(mapData){
      
      let array = [];
      for (const key in mapData) {
        if (mapData.hasOwnProperty(key)) {
          const data = mapData[key];
          array.push({
            key:key,
            data:data,
            course_id:"",
          });
        }
      }
      return array;
    },
    courseListIsEmpty(){
      for (let index = 0; index < this.courseList.length; index++) {
        const element = this.courseList[index];
        if(element.data.length > 0){
          return false
        }
      }
      return true;
    },

    courseList2IsEmpty(){
      for (let index = 0; index < this.courseList2.length; index++) {
        const element = this.courseList2[index];
        if(element.data.length > 0){
          return false
        }
      }
      return true;
    },

    secondcourseListIsEmpty(){
      for (let index = 0; index < this.secondcourseList.length; index++) {
        const element = this.secondcourseList[index];
        if(element.data.length > 0){
          return false
        }
      }
      return true;
    },
  }
};
</script>

<style lang="scss">
</style>
