<template>
  <div class="registration">
    <div class="r-top">
      <div>
        <p>身份证号：{{ studentData.card_num }}</p>
        <p>考生姓名：{{ studentData.name }}</p>
      </div>
    </div>
    <div class="r-main" v-show="showMain">  
      <div class="r-content">
        <el-radio-group
          v-model="radio"
          size="medium"
          @change="changeRadio"
        >
          <el-radio-button label="考试系列"></el-radio-button>
          <el-radio-button label="我的报名"></el-radio-button>
        </el-radio-group>
      </div>
    
      <el-table
        ref="multipleTable"
        border
        :header-cell-style="headStyle"
        :data="examData"
        v-show="radio=='考试系列'"
      >
        <el-table-column prop="number" label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="exam_name" label="考试名称" width="180">
        </el-table-column>
        <el-table-column prop="series_name" label="考试系列" width="150">
        </el-table-column>
        <el-table-column prop="level_name" label="考试级别" width="120">
        </el-table-column>
        <el-table-column prop="subject_name" label="考试科目" width="150">
        </el-table-column>
        <el-table-column prop="time" label="考试时间" width="120">
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="apply(scope.row)">
              报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-table
        row-key="id"
        ref="multipleTable"
        border
        :header-cell-style="headStyle"
        :data="tableData"
        v-show="radio=='我的报名'"
      >
        <el-table-column prop="number" label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="exam_name" label="考试名称" width="150">
        </el-table-column>
        <el-table-column prop="series_name" label="考试系列" width="150">
        </el-table-column>
        <el-table-column prop="level_name" label="考试级别" width="100">
        </el-table-column>
        <el-table-column prop="subject_name" label="考试科目" width="120">
        </el-table-column>
        <el-table-column prop="time" label="考试时间" width="120">
        </el-table-column>
        <el-table-column prop="exam_state" label="报考状态" width="100">
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="check(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="(!showMain)&&(radio=='考试系列')">
      <el-form class="myform" ref="form" :model="form" label-width="90px" status-icon>
        <el-form-item label="姓名：">
          <el-input class="myinput" v-model="studentData.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input class="myinput" v-model="studentData.card_num" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试名称：">
          <el-input class="myinput" v-model="form.exam_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试系列：">
          <el-input class="myinput" v-model="form.series_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试级别：">
          <el-input class="myinput" v-model="form.level_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试科目：">
          <el-input class="myinput" v-model="form.subject_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="拟报考点：">
          <el-select class="myinput" v-model="form.want_place" placeholder="请选择" @change="selectPlace">
            <el-option 
              v-for="item in placeData"
              :key="item.uuid"
              :label="item.place_name"
              :value="item.uuid"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="footer-btn" @click="showMain = true">返回</el-button>
        <el-button class="footer-btn" @click="registration">提交报名</el-button>
      </span>
      
    </div>

    <div v-show="(!showMain)&&(radio=='我的报名')">
      <el-form class="myform" ref="form" :model="form" label-width="90px" status-icon>
        <el-form-item class="myreg" label="考试名称：">
          {{ form.exam_name }}
        </el-form-item> 
        <el-form-item class="myreg" label="考试系列：">
          {{ form.series_name }}
        </el-form-item>
        <el-form-item class="myreg" label="考试级别：">
          {{ form.level_name }}
        </el-form-item>
        <el-form-item class="myreg" label="考试科目：">
          {{ form.subject_name }}
        </el-form-item>
        <el-form-item class="myreg" label="拟报考点：">
          {{ form.want_place_name }}
        </el-form-item>
        <el-form-item class="myreg" label="考试时间：">
          {{ form.time }}
        </el-form-item>
        <el-form-item class="myreg" label="报名状态：">
          {{ form.enroll_state }}
        </el-form-item>
        <el-form-item class="myreg" label="缴费状态：">
          {{ form.pay_state }}
        </el-form-item>
        <el-form-item class="myreg" label="考试状态：">
          {{ form.exam_state }}
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="footer-btn" @click="showMain = true;getMyEnroll();">返回</el-button>
      </span>
    </div>

  </div>
</template>

<script>
import {
  getStudentInfo, //个人资料
  getEnableExam, //考试系列
  getMyEnrollList, //我的报名
  submitRegistration, //提交报名
  getExamPlaceList, //拟报考点
} from "@/api/home";
export default {
  data() {
    return {
      radio: "考试系列",
      studentData: [],
      examData: [], //考试系列
      tableData:[], //我的报名数据
      placeData: [], //考点
      wantPlace: "",
      form: {},
      showMain: true,
      id: 0,
    }
  },
  created() {
    this.getExam();
    this.getStudent();
    this.getMyEnroll();
  },
  methods: {
    changeRadio() {
      this.getExam();
      this.getMyEnroll();
    },
    // 获取考生个人资料
    async getStudent() {
      let res = await getStudentInfo({
        student_id: 2,
      });

      // 解构数据
      let { code, data } = res;

      // 赋值渲染
      if (code === 200) {
        this.studentData = data.res.student;
      }
    },
    // 获取考试系列数据
    async getExam() {
      let res = await getEnableExam({
        student_id: 2,
      });

      // 解构数据
      let { code, data } = res;

      // 赋值渲染
      if (code === 200) {
        this.examData = data.list;
      }
    },
    // 获取我的报名数据
    async getMyEnroll() {
      let res = await getMyEnrollList({
        student_id: 2,
      });

      // 解构数据
      let { code, data } = res;

      // 赋值渲染
      if (code === 200) {
        this.tableData = data.myEnroll;
      }
    },
    // 获取拟报考点数据
    async getExamPlace(id) {
      let res = await getExamPlaceList({
        exam_id: id,
      });

      // 解构数据
      let { code, data, msg } = res;

      // 赋值渲染
      if (code === 200) {
        this.placeData = data.places;
      }
    },
    // 提交报名
    async registration() {
      let res = await submitRegistration({
        student_id: 2,
        exam_id: this.id,
        want_place_id: this.wantPlace,
      });

      // 解构数据
      let { code, data, msg } = res;

      // 赋值渲染
      if (code === 200) {
        this.$message(msg)
        this.form = data.enroll
        this.submit()
      }else{
        this.$message(msg)
      }
    },
    selectPlace(val) {
      this.wantPlace = val;
    },
    // 报名
    apply(row) {
      this.id = row.uuid;
      this.showMain = false;
      this.getExamPlace(row.uuid);
      this.form = row;
    },
    // 查看
    check(row) {
      this.showMain = false;
      this.form = row;
    },
    // 提交报名
    submit(){
      this.radio = '我的报名';
      this.showMain = false;
    },
    // 表格头部样式回调
    headStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
  }
}
</script>

<style lang="less" scoped>
.registration {
    padding: 20px;
    width: 100%;
  .r-top {
    background-color: #F6F7F9;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    p {
      margin: 20px 0 20px 0;
    }
  }
  .r-main .el-table::before {
    height: 0;
  }
  .r-main .el-table--border, .el-table--group {
    border: 0;
  }
  .el-table--border::after, .el-table--group::after {
    height: 0;
  }
  .r-content {
    margin: 15px auto;
  }
}
.myform{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.myinput{
    width: 200px;
}
.dialog-footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .footer-btn{
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
        width: 100px;
        margin-bottom: 20px;
    }
}
.myreg{
    width: 300px;
}
</style>