<template>
  <div class="pay">
    <div v-show="showMain">
      <p>考试缴费</p>
      <el-table
        ref="multipleTable"
        border
        :header-cell-style="headStyle"
        :data="tableData"
      >
        <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="120">
        </el-table-column>
        <el-table-column prop="level_name" label="考试级别" width="80">
        </el-table-column>
        <el-table-column prop="subject_name" label="考试科目" width="120">
        </el-table-column>
        <el-table-column prop="create_time" label="申请日期" width="160">
        </el-table-column>
        <el-table-column prop="pay_state" label="缴费状态" width="100">
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <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">
      <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-input class="myinput" v-model="form.time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请时间：">
          <el-input class="myinput" v-model="form.create_time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="拟报考点：">
          <el-input class="myinput" v-model="form.want_place_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="缴费方式：">
          <el-select class="myinput"  v-model="form.year" placeholder="请选择">
            <el-option label="11" value="11"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <div class="myfooter">
            <img src="../../assets/img/erweima.svg">
            <el-button type="primary" @click="printChange">已完成缴费</el-button>
        </div>
    </div>
    
  </div>
</template>

<script>
import {
  getStudentInfo, //个人资料
  getPayList, //列表
} from "@/api/home";
export default {
  data() {
    return {
      tableData: [],
      studentData: [],
      form: {},
      showMain: true,
    }
  },
  created() {
    this.getStudent();
    this.getPay();
  },
  methods: {
    // 获取考生个人资料
    async getStudent() {
      let res = await getStudentInfo({
        student_id: 2,
      });

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

      // 赋值渲染
      if (code === 200) {
        this.studentData = data.res.student;
      }
    },
    // 获取列表
    async getPay() {
      let res = await getPayList({
        student_id: 2,
      });

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

      // 赋值渲染
      if (code === 200) {
        this.tableData = data.myEnroll;
      }
    },
    // 表格头部样式回调
    headStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    printChange() {
      this.$emit('print',true);
      this.showMain = true;
    },
    check(row) {
      this.showMain = false;
      for(let item in this.tableData){
        if(row.uuid == this.tableData[item].uuid){
          this.form = this.tableData[item]
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.pay {
    width: 100%;
    padding: 20px;
  .el-table::before {
      height: 0;
    }
  .el-table--border, .el-table--group {
    border: 0;
  }
  .el-table--border::after, .el-table--group::after {
    height: 0;
  }
  p{
    font-size: 18px;
    margin: 0 0 20px 0;
  }
}
.myform{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.myinput{
    width: 200px;
}
.myfooter{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
    }
}
</style>