<template>
  <d2-container class="page" v-loading="loading">
     
    <el-tabs value="first" >
      <el-tab-pane label="课程报考" name="first">
         <div style="margin-bottom: 0px;border-left: 3px solid;color: #e6a23c;">
          <div role="alert" class="el-alert el-alert--warning">
            <div class="el-alert__content" v-if="timeControl && year && month">
              <span class="el-alert__title">{{year}}年{{month}}报考时间：{{timeControl.start_time}} 到 {{timeControl.end_time}}

                <div style="margin-top:10px" v-if="!timeControl || !inTime">
                  <font style="color:red;font-size:16px">暂时不允许报考。</font>
                </div>
              </span>
            
            </div>

           

            <div class="el-alert__content" v-if="!timeControl">
              <span class="el-alert__title">报考时间暂无安排，现在无法报考。请等待通知。</span>
            
            </div>
          </div>

          <div role="alert" class="el-alert el-alert--warning" style="margin-top:0px;padding-top:0px;">
            

            <div class="el-alert__content" v-if="enrolControl">
              <span class="el-alert__title" v-html="enrolControl"></span>
            
            </div>

           
          </div>
        </div>
       
        <div v-if="stdReg && stdMajor" style="margin: 15px 10px;font-size:  16px;">
          {{stdReg.std_name}}  报考准考证号: {{stdReg.ticket_no}} - {{stdMajor.major_name}} - {{stdMajor.major_level_name}} &nbsp;<span style="background-color: #fdf6ec; color: #e6a23c;">如需修改报考的课程或考区，请进入报考缴费。</span>

        </div>



        <el-tabs tab-position="left" style="height: 250px;overflow: auto;" v-if="timeControl && inTime" >
          <el-tab-pane label="本专业课程" style="padding: 10px 10px;">
            <div v-for="(item,index ) in majorCouse" :key="index" class="text item" style="margin-bottom: 5px;">
              {{item.key}}： <el-select size="medium" v-model="selectedMajorCourse.id[index]" @change="courseChange('selectedMajorCourse',index,selectedMajorCourse.id[index])" clearable filterable placeholder="请选择课程">
                              <el-option
                                v-for="opt in item.data"
                                :key="'majorCouse_'+item.key+opt.id"
                                :label="opt.course_code + '-' +opt.course_name"
                                :value="opt.id">
                              </el-option>
                            </el-select>
                            &nbsp;--&nbsp;
                            <el-select size="medium" v-model="selectedMajorCourse.examAreaId[index]" clearable filterable placeholder="请选择考区">
                              <el-option
                                v-for="opt in selectedMajorCourse[`examAreaArray${index+1}`]"
                                :key="'majorCouse_examAreaArray'+item.key+opt.org_id+index"
                                :label="opt.org_code+'-'+opt.org_name+'('+opt.city_name+')'"
                                :value="opt.org_id">
                              </el-option>
                            </el-select>
                            &nbsp;<span style="font-size: 12px;" v-html="selectedMajorCourse.calculator[index]"></span>

            </div>

          </el-tab-pane>
          <el-tab-pane label="其他专业课程" style="padding: 10px 10px">
            <div v-for="(item,index ) in otherCouse" :key="index" class="text item" style="margin-bottom: 5px;">
              {{item.key}}： <el-select size="medium" v-model="selectedOtherCourse.id[index]" @change="courseChange('selectedOtherCourse',index,selectedOtherCourse.id[index])" clearable filterable placeholder="请选择课程">
                              <el-option
                                v-for="opt in item.data"
                                :key="'otherCouse_'+item.key+opt.id"
                                :label="opt.course_code + '-' +opt.course_name"
                                :value="opt.id">
                              </el-option>
                            </el-select>
                            &nbsp;--&nbsp;
                            <el-select size="medium" v-model="selectedOtherCourse.examAreaId[index]" clearable filterable placeholder="请选择考区">
                              <el-option
                                v-for="opt in selectedOtherCourse[`examAreaArray${index+1}`]"
                                :key="'otherCouse_examAreaArray'+item.key+opt.org_id+index"
                                :label="opt.org_code+'-'+opt.org_name+'('+opt.city_name+')'"
                                :value="opt.org_id">
                              </el-option>
                            </el-select>
                             &nbsp;<span style="font-size: 12px;" v-html="selectedOtherCourse.calculator[index]"></span>


            </div>

            

          </el-tab-pane>

          <el-tab-pane label="选考课程" style="padding: 10px 10px">
            <div v-for="(item,index ) in selectedCouse" :key="index" class="text item" style="margin-bottom: 5px;">
              {{item.key}}： <el-select size="medium" v-model="selectedSelectedCourse.id[index]" @change="courseChange('selectedSelectedCourse',index,selectedSelectedCourse.id[index])" clearable filterable placeholder="请选择课程">
                              <el-option
                                v-for="opt in item.data"
                                :key="'selectedCouse_'+item.key+opt.id"
                                :label="opt.course_code + '-' +opt.course_name"
                                :value="opt.id">
                              </el-option>
                            </el-select>
                            &nbsp;--&nbsp;
                            <el-select size="medium" v-model="selectedSelectedCourse.examAreaId[index]" clearable filterable placeholder="请选择考区">
                              <el-option
                                v-for="opt in selectedSelectedCourse[`examAreaArray${index+1}`]"
                                :key="'selectedCouse_examAreaArray'+item.key+opt.org_id+index"
                                :label="opt.org_code+'-'+opt.org_name+'('+opt.city_name+')'"
                                :value="opt.org_id">
                              </el-option>
                            </el-select>
                            &nbsp;<span style="font-size: 12px;" v-html="selectedSelectedCourse.calculator[index]"></span>

            </div>

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

            </div>

          </el-tab-pane>
        </el-tabs>
        <!--
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本专业课程</span>
          </div>
          <div v-for="(item,index ) in majorCouse" :key="index" class="text item" style="margin-bottom: 5px;">
           {{item.key}}   <el-select v-model="selectedMajorCourse.id[index]" filterable placeholder="请选择">
                            <el-option
                              v-for="opt in item.data"
                              :key="'majorCouse_'+item.key+opt.id"
                              :label="opt.course_name"
                              :value="opt.id">
                            </el-option>
                          </el-select>
          </div>
        </el-card>
        <br>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>非本专业课程</span>
          </div>
          <div v-for="(item,index ) in otherCouse" :key="index" class="text item" style="margin-bottom: 5px;">
           {{item.key}}   <el-select v-model="selectedOtherCourse.id[index]" filterable placeholder="请选择">
                            <el-option
                              v-for="opt in item.data"
                              :key="'otherCouse_'+item.key+opt.id"
                              :label="opt.course_name"
                              :value="opt.id">
                            </el-option>
                          </el-select>
          </div>
        </el-card>
        -->
      </el-tab-pane>
    </el-tabs>
    <el-row>
      <center>
        <div style="margin-top:10px" v-if="timeControl && inTime">
          <el-button type="primary" @click="saveEnrol()">提交报考课程</el-button>
        </div>

        
      </center>
    </el-row>
  </d2-container>
</template>

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

export default {
  components: {},
  computed: {
    stepImg: function() {
      if (!this.stdReg) return "";
      let uploadedPic = this.stdReg.photo_url ? true : false;
      let enterMajor =
        this.stdReg.major_id + "" || this.stdRegstdReg.major_id == undefined
          ? false
          : true;
      //图片未上传 专业未报考
      if (!uploadedPic && !enterMajor) {
        return "./image/step/2.png";
      }
      //图片已经上传 专业未报考
      if (uploadedPic && !enterMajor) {
        return "./image/step/3.png";
      }
      //图片已经上传 专业已报考
      if (uploadedPic && enterMajor) {
        return "./image/step/4.png";
      }
    },
    ...mapState({
      stdReg: state => state.enrol.StdReg,
      stdMajor: state => state.enrol.StdMajor,
      isEnroled:state => state.enrol.isEnroled
    })
  },
  data() {
    return {
      calculator:"",
      loading: false,
      year: null,
      month: null,
      tabPosition: "majorCouse",
      enrolControl:null,
      selectedMajorCourse: {
        id: [],
        calculator: [],
        examAreaId: [],
        // examAreaArray:[[],[],[],[]]
        examAreaArray1: [],
        examAreaArray2: [],
        examAreaArray3: [],
        examAreaArray4: [],
        examAreaArray5: [],
        examAreaArray6: []
      },

      selectedOtherCourse: {
        id: [],
        calculator: [],
        examAreaId: [],
        // examAreaArray:[[],[],[],[]]
        examAreaArray1: [],
        examAreaArray2: [],
        examAreaArray3: [],
        examAreaArray4: [],
        examAreaArray5: [],
        examAreaArray6: []
      },

       selectedSelectedCourse: {
        id: [],
        calculator: [],
        examAreaId: [],
        // examAreaArray:[[],[],[],[]]
        examAreaArray1: [],
        examAreaArray2: [],
        examAreaArray3: [],
        examAreaArray4: [],
        examAreaArray5: [],
        examAreaArray6: []
      },

      timeControl: {},
      majorCouse: [],
      otherCouse: [],
      selectedCouse: [],
      inTime:false
    };
  },
  async mounted() {
    let temp_std = this.stdReg;
    if(temp_std.std_name == "Ghost"){
        let res = await this.$http.post("/std/stdRegInfo/get.htm");
        temp_std = res.data.entity;
    }else if(!temp_std.ticket_no){
        let res = await this.$http.post("/std/stdRegInfo/get.htm");
        temp_std = res.data.entity;
    }
    
    if (!temp_std) return "";
    let uploadedPic = temp_std.photo_path ? true : false;
   

    if (!String(temp_std.major_id)) {
      this.confirm(
        "请完善基本信息再进行课程报考,现在处理?",
        "提示",
        {
          confirm: () => {
            this.goUrl("/personalInfo");
          }
        }
      );

      return;
    }

    if (!uploadedPic) {
      this.confirm(
        "请在个人基本信息中，上传考生照片.现在处理?",
        "提示",
        {
          confirm: () => {
            this.goUrl("/personalInfo");
          }
        }
      );
      return;
    }

    if (!temp_std.ticket_no) {
      this.confirm(
        "请在个人基本信息中，完善基本信息生成准考证号.现在处理?",
        "提示",
        {
          confirm: () => {
            this.goUrl("/personalInfo");
          }
        }
      );
      return;
    }

    //验证身份证认证
    let res_isIdentfiy = await this.$http.post("/std/checkIsIdentfiy.htm");
    if(res_isIdentfiy.data.success === false){
       this.confirm(
        "身份认证未通过，请先完成身份认证（证件号非身份证号，请现场认证），现在处理?",
        "提示",
        {
          confirm: () => {
            this.goUrl("/personalInfo");
          }
        }
      );
      return;
    }

    //验证照片合规性
    let res_photo = await this.$http.post("/std/checkPhotoCompliance.htm");
    if(res_photo.data.success === false){
       this.confirm(
        "照片审核未通过或未审核，请重新上传照片（或提交考生信息变更申请），现在处理?",
        "提示",
        {
          confirm: () => {
            this.goUrl("/personalInfo");
          }
        }
      );
      return;
    }

    //验证证件号
    let res = await this.$http.post("/std/checkCertNo18.htm");
    if(res.data.success === true){
       //更新store
       this.confirm(
         "身份证不是合法的18位身份证，请在个人基本信息中修改证件号.现在处理?(或暂不处理可以继续报考)",
        "提示",
        {
          confirm: async () => {
            res = await this.$http.post("/std/updateMustUpdeCertNo.htm");
            this.initCertNoMustUpdate(1);
            this.$nextTick(()=>{
              this.goUrl("/personalInfo");
            })
          },
          cancel:async () => {
              await this.init();
          }
        }
      );
      return;
    }else{
      await this.init();
    }
  },
  methods: {
    async init(){
      this.loading = true;
      let listres = await this.$http.post("/std/stdEnrol/list.htm");
      this.timeControl = listres.data.map.timeControl;
      this.inTime = listres.data.map.inTime;
      this.month = listres.data.map.month;
      this.year = listres.data.map.year;
      this.enrolControl = listres.data.map.enrolControl;

      let res = await this.$http.post("/std/stdEnrol/detail.htm");
      this.majorCouse = this.transData(res.data.map.majorCouse);
      this.otherCouse = this.transData(res.data.map.otherCouse);
      this.selectedCouse = this.transData(res.data.map.selectedCouse);
      this.loading = false;
    },
    async courseChange(type, index, val) {
      
      if (!val) {
          if (type == "selectedMajorCourse") {
          this.selectedMajorCourse.examAreaId[index] = "";
          this.selectedMajorCourse.calculator[index] = "";
        } else if (type == "selectedOtherCourse") {
          this.selectedOtherCourse.examAreaId[index] = "";
          this.selectedOtherCourse.calculator[index] = "";
        }else if (type == "selectedSelectedCourse") {
          this.selectedSelectedCourse.examAreaId[index] = "";
          this.selectedSelectedCourse.calculator[index] = "";
        }
        return;
      }
     
      let loading = this.showLoading();
      let res = await this.$http.post(
        "/pl/plExamAreaCourse/list.htm",
        this.Qs.stringify({ course_id: val })
      );

       let res_calculator = await this.$http.post(
        "/pl/plExamAreaCourse/queryCourseCalculator.htm",
        this.Qs.stringify({ course_id: val })
      );

      if (type == "selectedMajorCourse") {
        this.selectedMajorCourse[`examAreaArray${index + 1}`] = res.data.array;
        this.selectedMajorCourse.examAreaId[index] = "";
        if(res_calculator.data.entity){
          this.selectedMajorCourse.calculator[index] = res_calculator.data.entity.calculator;
        }else{
          this.selectedMajorCourse.calculator[index] = "";
        }
      } else if (type == "selectedOtherCourse") {
        this.selectedOtherCourse[`examAreaArray${index + 1}`] = res.data.array;
        this.selectedOtherCourse.examAreaId[index] = "";
        if(res_calculator.data.entity){
          this.selectedOtherCourse.calculator[index] = res_calculator.data.entity.calculator;
        }else{
          this.selectedOtherCourse.calculator[index] = "";
        }
      }else if (type == "selectedSelectedCourse") {
        this.selectedSelectedCourse[`examAreaArray${index + 1}`] = res.data.array;
        this.selectedSelectedCourse.examAreaId[index] = "";
        if(res_calculator.data.entity){
          this.selectedSelectedCourse.calculator[index] = res_calculator.data.entity.calculator;
        }else{
          this.selectedSelectedCourse.calculator[index] = "";
        }
      }
      this.hideLoading(loading);
    },
    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;
    },
    async saveEnrol() {
      let courseIdArray = [];
      let examAreaIdArray = [];
      let validate = true;
      let isDouble = false;
      let temp_examAreaId;

      this.selectedMajorCourse.id.forEach((id, index) => {
        if (id != null && id != "") {
          let examAreaId = this.selectedMajorCourse.examAreaId[index];
          if (examAreaId != null && examAreaId != "") {
            courseIdArray.push(id);
            examAreaIdArray.push(examAreaId);
          } else {
            this.alert("每个课程必须选择考区!", "信息提示");
            validate = false;
          }
        }
      });

      if (!validate) return;
      validate = true;

      this.selectedOtherCourse.id.forEach((id, index) => {
        if (id != null && id != "") {
          let examAreaId = this.selectedOtherCourse.examAreaId[index];

          if (examAreaId != null && examAreaId != "") {
            courseIdArray.push(id);
            examAreaIdArray.push(examAreaId);
          } else {
            this.alert("每个课程必须选择考区!", "信息提示");
            validate = false;
          }
        }
      });
      if (!validate) return;

      this.selectedSelectedCourse.id.forEach((id, index) => {
        if (id != null && id != "") {
          let examAreaId = this.selectedSelectedCourse.examAreaId[index];

          if (examAreaId != null && examAreaId != "") {
            courseIdArray.push(id);
            examAreaIdArray.push(examAreaId);
          } else {
            this.alert("每个课程必须选择考区!", "信息提示");
            validate = false;
          }
        }
      });
      if (!validate) return;

      if (courseIdArray.length == 0) {
        this.alert("请选择报考课程", "信息提示");
        return;
      }
      
      
      let newFilArr = examAreaIdArray.filter((item,i) =>{
        if(i == 0){
          temp_examAreaId = item;
        }

        if(false == isDouble && temp_examAreaId != item){
            isDouble = true;
        }
      });

      if(isDouble){
        this.confirm(
          "报考考区不一样,确认继续报考吗?",
          "操作确定",
          {
            confirm: function() {
              this.confirm(
                "报考考区不一样,再一次确认继续报考吗?",
                "操作确定",
                {
                  confirm: function() {
                    this.doSaveEnrol(courseIdArray,examAreaIdArray);
                  }
                }
              );

               
            }
          }
        );
      }else{
            this.doSaveEnrol(courseIdArray,examAreaIdArray);
      }
      
    },

    async doSaveEnrol(courseIdArray,examAreaIdArray) 
        {
          let res = await this.$http.post(
                "/std/stdEnrol/add.htm",
                this.Qs.stringify({
                  courseIds: courseIdArray.join(),
                  examIds: examAreaIdArray.join(),
                  std_id:this.stdReg.id
                })
              );
              if (res.data.success) {
                // this.alert("报考提交成功",'信息提示');
                this.confirm(
                  "报考已提交成功,现在跳转考试课程列表进行缴费?",
                  "操作确定",
                  {
                    confirm: function() {
                      this.goUrl("/enrolGuid");
                    }
                  }
                );
              } else {
                this.alert(res.data.errorMsg);
              }  
         }
  }
};


</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;
  }
}
.el-tabs--left,
.el-tabs--right {
  overflow: hidden;
  border-top: 2px solid #e4e7ed;
  /* padding-bottom: 5px; */
}
</style>
