<template>
  <d2-container class="page" id="enrolInfo_index_scoped" v-if="map">
    <el-tabs value="first">
      <el-tab-pane label="报考信息" name="first">

        <el-row>
          <el-col :span="12">
          <div class="el-table el-table--fit el-table--striped el-table--enable-row-hover el-table--enable-row-transition" style="width: 95%;">
            <el-card class="box-card" style="background-color: #F5F5F5">
              <div slot="header" class="clearfix">
                <span>考生基础信息</span>
              </div>
              <div class="el-table__body-wrapper is-scrolling-none">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 820px;">
                  <tbody>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">证件类型：{{StdReg.cert_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">证件号码：{{StdReg.cert_no}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">手机号码：{{StdReg.std_mobile1}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">证件性别：{{StdReg.std_sex}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">考生姓名：{{StdReg.std_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">高考所在省：{{StdReg.province_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">高考生类型：{{StdReg.art_type}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td rowspan="1" colspan="1" class="el-table_47_column_197  ">
                        <div class="cell">高考报名号：{{StdReg.exam_no}}</div>
                      </td>
                    </tr>
                  </tbody>
                </table><!----><!---->
              </div><!----><!----><!----><!---->
              <div class="el-table__column-resize-proxy" style="display: none;"></div>
            </el-card>
            </div>      
          </el-col>
          <el-col :span="12">
          <div class="el-table el-table--fit el-table--striped el-table--enable-row-hover el-table--enable-row-transition" style="width: 95%;">
            <el-card class="box-card" style="background-color: #D9EDF7">
              <div slot="header" class="clearfix">
                <span>报考基础信息</span>
              </div>
              <div class="el-table__body-wrapper is-scrolling-none">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 820px;">
                  <tbody>
                    <tr class="el-table__row">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">报考大类：{{map.StdEnrol.category_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">报考院系：{{map.CfAgent.agent_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">专业代码：{{map.CfAspect.aspect_code}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">专业（招考方向）：{{map.StdEnrol.aspect_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row" v-if="map.StdEnrol.variety_id!=undefined">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">乐器/舞种：{{map.StdEnrol.variety_name}}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">考试时间：<span class="redBold">{{shortDateString(map.CfAgent.exam_start_date)}} 至 {{shortDateString(map.CfAgent.exam_end_date)}}</span></div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">初试费用：<span class="redBold">&yen;{{map.StdEnrol.fee_amount/100}}</span></div>
                      </td>
                    </tr>
                    <tr class="el-table__row" v-if="map.StdEnrol.pay_status!='Active'">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">缴费截至时间：<span class="redBold">{{map.CfAgent.enrol_end_time}}</span></div>
                      </td>
                    </tr>
                    <tr class="el-table__row" v-if="map.StdEnrol.pay_status=='Active'">
                      <td class="el-table_47_column_197  ">
                        <div class="cell">缴费时间：<span class="redBold">{{map.StdEnrol.pay_time}}</span></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <el-button-group>
                <el-button type="primary" @click="goPay()">确认以上信息，并缴费 </el-button>
                <el-button type="danger" @click="goRemove()">取消此报考 </el-button>
              </el-button-group>
              <div class="el-table__column-resize-proxy" style="display: none;"></div>
            </el-card>
            </div>      
          </el-col>


        </el-row>
        
       </el-tab-pane>

    </el-tabs>
  </d2-container>
</template>

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

export default {
  components: {

  },
 methods: { 
    goPay(){
      this.alert("TODO","info")  
    },
    goTracks(){
      this.curStep = 'tracks';
    },
    goStep(curStep,p2){
      this.curStep = curStep;
    },
    goRemove(){
      this.$http.post(
        "/enrol/std/enrol/cancel.htm",
        this.Qs.stringify({
          enrol_id: this.enrol_id,
        }),
        this.$http.headers.FORM
      ).then((res)=>{
        if(res.data.errorMsg){
          // this.hideLoading();
          this.alert(res.data.errorMsg,"错误信息提示");
          return false;
        }

        this.goUrl("/index");
        this.alert('【' + this.getAspectName(this.map.StdEnrol) + '】的报考已经成功取消，可从报考页面重新报考本招考方向')
      });
    },
    onConfirm(msg){
      if(msg){
        this.chooseTracks.enrol_tracks_name = msg;
      }else{
        this.alert("曲目名称不允许为空！");
      }
    },
    goChooseTracks(item){
      this.showPromt = true;
      this.chooseTracks = item;
    },
    //修改曲目
    goChangeTracks(){
      let _this = this;
      let array = new Array();
      _.forEach(_this.map.VarietyArray,function(variety){
        _.forEach(_this.map['VarietyTracks_' + variety.variety_id],function(tracks){
          array.push(tracks);
        });
      });

      this.confirm({
          title:"修改曲目确认",
          content: `确定要修改填写的曲目信息吗?`,
          onShow() {
          },
          onConfirm() {
             _this.$http.post(
                "/enrol/std/enrol/tracks/save.htm",
                _this.Qs.stringify({
                  enrol_id: _this.map.StdEnrol.enrol_id,
                  tracks_json:JSON.stringify(array)
                }),
                _this.$http.headers.FORM
              ).then((res)=>{
                _this.alert('曲目修改成功');
                _this.curStep = "info"
              });
         }
      });
    },
    getAspectName (aspect) {
      if (aspect == undefined)
      if ((aspect.category_id == 1 || aspect.category_id == 2 ) 
      && this.FrameParam.SchoolCode=='10654'){
          return aspect.major_name + '（' + aspect.aspect_name + '）';
      }
      return aspect.aspect_name;
    },
    shortDateString(date) {
				if (date == undefined)
					return "";
				if (_.isDate(date))
					date = date.toJSON();
				if (date.length > 10)
					return date.substr(0, 10);
				return date;
		}
  },
  computed: {
    ...mapState({      
      StdReg: state => state.enrol.StdReg,
      StdImageArray: state => state.enrol.StdImageArray,
      FrameParam: state => state.enrol.FrameParam,
    }),
    
  },
  created() {
    try {
      this.enrol_id = this.$route.params.enrol_id;

      this.$http.post(
        "/enrol/std/enrol/info.htm",
        this.Qs.stringify({
          enrol_id: this.enrol_id,
        }),
        this.$http.headers.FORM
      ).then((res)=>{
        this.map = res.data.map;
      });

    } catch (e) {
      console.log(e);
    }
  },
  data(){
    return {
      curStep: "info",
      enrol_id: "",
      map: null,
      chooseTracks: null,
      showPromt: false
    }
  }
  
};
</script>

<style lang="scss">
#enrolInfo_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;
  }
}
</style>
