<template>
  <d2-container class="page" id="preOrder">
    <el-tabs value="preOrder">
      <el-tab-pane label="面试预约功能" name="preOrder">
        <div v-if="map.WriteArray.length>0"> 
          <div class="title">笔试项目</div>
          <el-table
            v-loading="loading"
            :data="item in  map.WriteArray"
            style="width: 100%">
            <el-table-column
              prop="subject_name"
              label="笔试科目"
              width="180">
            </el-table-column>
            <el-table-column
              prop="bill_amount"
              label="考试日期"
              width="180">
              <template slot-scope="scope">
                {{shortDateString(scope.row.exam_date)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="exam_time"
              label="考试时段">
            </el-table-column>
            
          </el-table>
        </div>

        <div v-if="map.ParamArray.length>0"> 
          <div class="title">面试项目（请注意笔试考试时间，每个考试科目间隔时长建议大于2小时）</div>
          <el-table
            v-loading="loading"
            :data="item in  map.WriteArray"
            style="width: 100%">
            <el-table-column
              prop="s01"
              label="面试项目"
              width="180">
            </el-table-column>
            <el-table-column
              prop="s03"
              label="预约方式"
              width="180">
              <template slot-scope="scope">
                {{scope.row.s03=='Date'?'预约面试日期':'预约面试时段'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="t01"
              label="面试日期">
              <template slot-scope="scope">
               {{shortDateString(item.t01)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="s02"
              label="面试时段">
            </el-table-column>
            <el-table-column
              prop=""
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="goInputTracks(scope.row)" v-if="!map.success && scope.row.i03>0">输入面试曲目</el-button>
                <el-button type="primary" @click="queryParam(scope.row)" v-if="curStep=='Init' && !map.success && (scope.row.i03==undefined || scope.row.s19) && scope.row.t09==undefined">
                  {{scope.row.s03=='Date'?'预约面试日期':'预约面试时段'}}
                </el-button>
              </template>            
            </el-table-column>
            
          </el-table>
        </div>

        <div v-if="curStep =='Tracks'">
          <div class="title">请输入面试曲目</div>
          <el-row>
            <el-col :span="16">
              <el-input v-model="faceParam.s18" placeholder="请填入面试时使用的曲目"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="submitTracks()">确定使用该曲目</el-button>
            </el-col>
          </el-row>

        </div>

        <div v-if="DateMap.DateArray.length>0 && curStep =='Date'"> 
          <div class="title">【{{faceParam.s01}}】所有面试安排：请选择你要面试日期</div>
          <el-table
            v-loading="loading"
            :data="item in  map.WriteArray"
            style="width: 100%">
            <el-table-column
              prop="s01"
              label="面试日期"
              width="180">
              <template slot-scope="scope">
                {{shortDateString(scope.row.t01)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="i01"
              label="面试人数"
              width="180">

            </el-table-column>
            <el-table-column
              prop="i11"
              label="已预约人数">
            </el-table-column>
            <el-table-column
              prop=""
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="chooseDate(scope.row)" v-if="!map.success && scope.row.i01>item.i11">预约该日期</el-button>
              </template>            
            </el-table-column>
            
          </el-table>
        </div>

        <div v-if="CurrentDate && curStep =='Time'"> 
          <div class="title">【{{faceParam.s01}}】【{{shortDateString(CurrentDate.t01)}}】全天时段安排：请选择面试时段</div>
          <el-table
            v-loading="loading"
            :data="item in  map.WriteArray"
            style="width: 100%">
            <el-table-column
              prop="time_name"
              label="时间段"
              width="180">
            </el-table-column>
            <el-table-column
              prop="arr_std_count"
              label="面试人数"
              width="180">

            </el-table-column>
            <el-table-column
              prop="arr_std_count"
              label="已预约人数">
            </el-table-column>
            <el-table-column  
              prop=""
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="chooseTime(scope.row)" v-if="scope.row.std_count>scope.row.arr_std_count">预约该时段</el-button>
              </template>            
            </el-table-column>
            
          </el-table>
          <div style="margin-top:30px;text-align: center" class='ng-hide' v-show="!map.success">
            <font size="12px" color="#ff6600">预约所有时段后，请一定要提交预约！<br></font>
            <el-button type="primary" :disabled="!map.commit" @click="goSubmitFace()">提交面试预约</el-button>
          </div>	
        </div>

        <div style="margin-top:30px;text-align: center" v-show="map.success">
          <el-button type="primary" @click="goDownload()">下载准考证</el-button>
        </div>


      </el-tab-pane>


    </el-tabs>

    
  </d2-container>
</template>

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

export default {
  computed: {
    ...mapState({
      StdReg: state => state.enrol.StdReg,
    })
  },
  async mounted () {
    let res = await this.$http.post(
      "/enrol/nua/ticket.htm",
      {},
      this.$http.headers.FORM
    );
    this.map = res.data.map;
  },
  data() {
    return {
      curStep:"",
      CurrentDate: null,
      list:[],
      TimeArray:[],
      map: null
    };
  },
  methods: {
    submitTracks() {
      
    },
    checkStatus(auto){
      for (var k = 0; k < this.map.ParamArray.length; k++) {
        var p = this.map.ParamArray[k];
        if (p.t01 == undefined) {
          if (auto)
            this.alert('还有尚未预约的面试科目【' + p.s01 + '】');
            this.map.success = false;
            return false;
        }
        // 判断曲目
        if (p.i03 > 0) {
          this.faceParam.s18 = _.trim(this.faceParam.s18);
          if (this.faceParam.s18.length < 1) {
            if (auto)
              this.alert('请输入面试科目【' + p.s01 + '】的曲目信息');
              this.map.success = false;
              return false;
          }
          this.faceParam.s19 = this.faceParam.s18;
        }
        // 判断时段
        if (p.s03 == 'Time' && p.s02 == undefined) {
          this.map.success = false;
          if (auto)
            this.alert('尚未完成面试科目【' + p.s01 + '】的预约');
          return false;
        }
      }
      this.map.commit = true;
      return true;
    },
   async chooseDate(date){
      this.faceParam.t01 = date.t01;
      if(this.faceParam.s03 == 'Date'){
        this.checkStatus();
        this.curStep = 'Init';
        return;
      }
      let res = await this.$http.post(
        "/enrol/nua/param/date/query.htm",
        this.Qs.stringify({
          param_id : this.faceParam.i01,
          exam_date : date.t01
        }),
        this.$http.headers.FORM
      );
      // this.list = res.data.array;

    	this.CurrentDate = date;
			this.curStep = 'Time';
			this.TimeArray = res.data.array;
			// console.log($scope.TimeArray);

    },
    goSubmitFace(){
      if (!this.checkStatus(true)) {
			  return false;
      }
      let _this = this;
      this.confirm('确定要提交预约信息吗？一旦预约成功无法取消或者变更预约信息',{
        confirm: function(){
          _this.$http.post(
            "/enrol/nua/param/save.htm",
            _this.Qs.stringify({
              json_value : JSON.stringify(_this.map.ParamArray),
            }),
            _this.$http.headers.FORM
          ).then(()=>{
            _this.message("所有面试项目预约成功，请l留意准考证下载时间！");
            window.location.reload() ;
          });



        }
        
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/public.scss";
.page {
  .page__btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 20px;
    span {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
    }
  }
}
</style>
