<template>
  <d2-container class="page" id="major_query_index_scoped">
    <el-tabs value="first">
      <el-tab-pane label="专业查询" name="first" v-loading="loading">

        专业层次: 
         <!-- @change="major_level_change()" -->
        <el-select  @change="query()" size="medium" v-model="item.major_level" filterable clearable placeholder="专科/本科">
            <el-option label="专科" value="0"></el-option>
            <el-option label="本科" value="1"></el-option>
        </el-select>
<!--
        &nbsp;&nbsp;
        是否新专业:
        <el-select size="medium" v-model="item.is_new_major" filterable clearable placeholder="是否新专业">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
        </el-select>
        
        &nbsp;&nbsp;
          <el-button @click="query()" type="primary" size="small" plain>查询</el-button> 
          -->
          &nbsp;&nbsp;<a style="color:blue;font-size: 12px;" target="_new" href="http://www.gxeea.cn/view/content_1013_24985.htm?from=singlemessage">关于设置与调整自考专业的通知</a>
           &nbsp;&nbsp;

          <a style="color:blue;font-size: 12px;" href="https://www.gxeea.cn/view/content_1148_30196.htm" target="_new">关于调整广西高等教育自学考试专业的公告</a>

         &nbsp;&nbsp;
           <a style="color:blue;font-size: 12px;" href="https://www.gxeea.cn/view/content_1148_15806.htm" target="_new">我区高等教育自学考试英语和数学等课程由必考课改为选考课</a>

        <br>
        <br>

        <el-col :span="8" v-for="(item,index) in majorList" :key="item.id" >
          <div style="height: 25px;vertical-align: middle;cursor:pointer;" class="cell_" @click="goShowCourseList(item)">
            <font style="font-size:14px">
              {{index + 1}}. {{item.major_code}} - {{item.major_name}}
            </font>
          </div>
        </el-col>

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


    <el-dialog width="1000px" title="专业课程列表" :visible.sync="courseDialogVisible">
      <el-row>
        <el-col :span="24">
          <div v-if="selectedMajor" style="width:90%;heigth:100%;margin-left: 14px;;padding: 8px 16px;background-color: #ecf8ff;border-radius: 4px;margin: 0px 0;">
              <!-- <div style="font-size:17px;font-weight:400;margin-top: 8px 0"><center></center></div>
              

              <div style="font-size:17px;font-weight:400;margin-top: 8px 0"><center>主考院校</center></div> -->

              <table>
                <tr>
                  <td style="width:120px;"><div style="font-size:17px;font-weight:400;margin-top: 8px 0">专业说明：</div>
                  </td>
                  <td colspan="3">{{selectedMajor.remark?selectedMajor.remark:""}}
                  </td>
                </tr>
                <tr>
                  <td colspan="4">
                    <hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
                  </td>
                </tr>
                <tr>
                  <td style="width:120px;"><div style="font-size:17px;font-weight:400;margin-top: 8px 0">专业名称：</div></td>
                  <td>{{selectedMajor.major_code}}-{{selectedMajor.major_name}}</td>
              
                  <td style="width:120px;"><div style="font-size:17px;font-weight:400;margin-top: 8px 0">主考院校：</div></td>
                  <td>{{school_name}}</td>
                </tr>
              </table>

          </div>
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
        v-loading="courseLoading"
        :data="courseList"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="60">
        </el-table-column>
        <el-table-column
          prop="course_name"
          label="课程名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="course_code"
          label="课程代码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="course_nature"
          label="课程类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="course_score"
          label="学分"
          width="120"
          >
        </el-table-column>
      
        <!-- <el-table-column v-if="item.is_new_major == '0'"
          prop="repl_course_name"
          label="课程顶替名称"
          width="150">
        </el-table-column> -->
        <el-table-column
          prop=""
          label="课程教材"
          width="150">
           <template slot-scope="scope">
              <el-button @click="showCourseTextBook(scope.row)" type="primary" size="small" plain>查看</el-button>
            
          </template>
        </el-table-column>
      </el-table>
        </el-col>
        <!-- <el-col :span="9">
            <div v-if="selectedMajor" style="width:85%;heigth:100%;margin-left: 14px;;padding: 8px 16px;background-color: #ecf8ff;border-radius: 4px;margin: 0px 0;">
              <div style="font-size:17px;font-weight:400;margin-top: 8px 0"><center>专业说明</center></div>
              {{selectedMajor.remark}}
            </div>
        </el-col> -->
      </el-row>
      <center>
        <el-button type="alert" @click="courseDialogVisible=false;">关闭</el-button>
      </center>
    </el-dialog>

    <el-dialog width="1100px" title="课程教材列表" :visible.sync="textBookDialogVisible">
      <el-table
        v-loading="textBookLoading"
        :data="textBookList"
        style="width: 100%">
        <el-table-column
          prop="exam_year_month"
          label="考试批次"
          width="120">
        </el-table-column>
        <el-table-column
          prop="textbook_outline"
          label="教材大纲"
          width="250">
        </el-table-column>
        <el-table-column
          prop="textbook_name"
          label="教材名称"
          width="250">
        </el-table-column>
        <el-table-column
          prop="textbook_code"
          label="教材编码"
          width="120">
        </el-table-column>
        
        <el-table-column
          prop="textbook_writer"
          label="编著"
          width="120">
        </el-table-column>
        <el-table-column
          prop="textbook_publisher"
          label="出版社">
        </el-table-column>
        <el-table-column
          prop="textbook_revision"
          label="版次">
        </el-table-column>
   
      </el-table>

    </el-dialog>
 

  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { log } from "util";
import QRCode from "qrcode";

export default {
  components: {},
  computed: {
    ...mapState({ 
      stdReg: state => state.enrol.StdReg,
      stdMajor: state => state.enrol.StdMajor,
    })
  },
  data() {
    return {
      loading: false,
      item:{
        major_level: "1"
      },
      majorList: null,
      selectedMajor: null,
      courseLoading: false,
      school_name:"",
      courseList: null,
      courseDialogVisible: false,
      textBookDialogVisible: false,
      textBookList:[],
      textBookLoading:false
    };
  },
  async mounted() {
    this.item.is_new_major = "1";
    // this.queryMajorList();
    this.query();
  },
  methods: {
    // async major_level_change(){
    //   let loading = this.showLoading();
    //   debugger
    //   let res = await this.$http.post("/pl/plMajor/listByMajorLevel.htm",
    //   this.Qs.stringify({
    //       major_level: this.item.major_level,
    //       is_new_major:this.item.is_new_major
    //     })
    //   )
    //   this.majorList = res.data.array;
    //   this.hideLoading(loading);
    // },

    async query(){
      let loading = this.showLoading();
      let res = await this.$http.post("/pl/plMajor/listByMajorLevel.htm",
      this.Qs.stringify({
          major_level: this.item.major_level,
          is_new_major:this.item.is_new_major
        })
      )
      this.majorList = res.data.array;
      this.hideLoading(loading);
    },
    //查询专业列表
    // async queryMajorList(){
    //   let loading = this.showLoading();
    //   let res = await this.$http.post("/pl/plMajor/listByMajorLevel.htm",
    //   this.Qs.stringify({
    //       major_level: this.item.major_level
    //     })
    //   )
    //   this.majorList = res.data.array;
    //   this.hideLoading(loading);
    // },

    //查询专业下课程列表
    async goShowCourseList(major){
      this.selectedMajor = major;
      this.courseLoading = true;

       let res = await this.$http.post("/std/cfOrganization/querySchoolListByMajorId.htm",
      this.Qs.stringify({
          major_id: major.id,
        }));
        
      let orgArray = res.data.array;
      if(orgArray.length >0){
        this.school_name = orgArray[0].org_code + "-" + orgArray[0].org_name;
      }


       res = await this.$http.post("/pl/plMajor/listCourseByMajor.htm",
      this.Qs.stringify({
          major_id: major.id
        })
      )
      
      this.courseList = res.data.array;
      this.courseDialogVisible = true;
      this.courseLoading = false;
    },
    async showCourseTextBook(item){
      this.textBookLoading = true;
      let res = await this.$http.post("pl/plMajorCourse/textBookListByCourse.htm",
      this.Qs.stringify({
          course_id: item.id
        })
      )
      this.textBookList = res.data.array;
      this.textBookDialogVisible = true;
      this.textBookLoading = false;
    }
    
  }
};
</script>

<style lang="scss">
#major_query_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;
  }
  .cell_:hover{
    background-color: #409eff
  }
}
</style>
