<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"
        >
          <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-if="radio=='考试系列'"
      >
        <el-table-column prop="number" label="序号" width="150">
          <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="120">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="apply(scope.row)">
              报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        ref="multipleTable"
        border
        :header-cell-style="headStyle"
        :data="tableData"
        v-if="radio=='我的报名'"
      >
        <el-table-column prop="number" label="序号" width="150">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="place_code" label="考试名称" width="120">
        </el-table-column>
        <el-table-column prop="place_name" label="考试系列" width="150">
        </el-table-column>
        <el-table-column prop="place_code" label="考试级别" width="120">
        </el-table-column>
        <el-table-column prop="place_name" label="考试科目" width="150">
        </el-table-column>
        <el-table-column prop="place_code" label="考试时间" width="120">
        </el-table-column>
        <el-table-column prop="place_name" label="报考状态" width="150">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template>
            <el-button size="mini" type="primary" @click="showMain = false">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

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

    <div v-show="(!showMain)&&(radio=='我的报名')">
      <el-form ref="form" :model="form" label-width="180px" status-icon>
        <el-form-item label="考试名称：">
          水利工程
        </el-form-item> 
        <el-form-item label="考试系列：">
          水利工程
        </el-form-item>
        <el-form-item label="考试级别：">
          中高级
        </el-form-item>
        <el-form-item label="考试科目：">
          专业理论
        </el-form-item>
        <el-form-item label="拟报考点：">
          -
        </el-form-item>
        <el-form-item label="考试时间：">
          2021
        </el-form-item>
        <el-form-item label="报名状态：">
          已通过
        </el-form-item>
        <el-form-item label="缴费状态：">
          已缴费
        </el-form-item>
        <el-form-item label="考试状态：">
          已完成
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMain = true">返回</el-button>
      </span>
    </div>

  </div>
</template>

<script>
import {
  getStudentInfo, //个人资料
  getEnableExam, //考试系列
  getMyEnrollList, //我的报名
} from "@/api/home";
export default {
  data() {
    return {
      radio: "考试系列",
      studentData: [],
      examData: [],
      tableData:[],
      form: {},
      showMain: true,
    }
  },
  created() {
    this.getExam();
    this.getStudent();
  },
  methods: {
    // 获取考生个人资料
    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;
      }
    },
    // 报名
    apply(row) {
      this.showMain = false;
      for(let item in this.examData){
        if(row.uuid == this.examData[item].uuid){
          this.form = this.examData[item]
        }
      }
    },
    // 提交报名
    submit(){
      this.showMain = false;
      this.radio = '我的报名';
    },
    // 表格头部样式回调
    headStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
  }
}
</script>

<style lang="less" scoped>
.registration {
  .r-top {
    background-color: #F6F7F9;
    margin: 10px auto;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
  }
}

</style>