<template>
  <div class="box">
    <div class="container">
      <div class="head">
        <head-info :name="studentName"></head-info>
      </div>
      <div class="entry-card-container">
        <div class="entry-top">
          <span>&emsp;&nbsp;考试报名</span>
        </div>
        <el-table
            :data="testList"
            :header-cell-style="{'text-align':'center', 'color':'#416af2'}"
            :cell-style="{'text-align':'center', 'color': '#000000'}"
            class="table"
            border
            v-loading="loading"
            height="750"
            style="width:100%; ">
          <el-table-column prop="date" label="序号" type="index" width="100"/>
          <el-table-column prop="examName" label="考试名称" min-width="180"/>
          <el-table-column prop="deadline" label="报名截止日期" min-width="180"/>
          <el-table-column prop="currentState" label="当前状态" min-width="180">
            <template slot-scope="scope">
              {{ getState(scope.row.currentState) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button
                  :disabled="scope.row.currentState == '0' && new Date().getTime() > new Date(scope.row.deadline).getTime()"
                  size="mini"
                  type="text"
                  icon="el-icon-d-arrow-right"
                  @click="handleSignUp(scope.row)"
              >进入
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
          style="width: 100%; height: 60px; text-align: center; color: white; font-size: 16px; font-weight: bold; padding-top: 30px; letter-spacing: 2px">
        山东省东营市第二中学
      </div>
    </div>
  </div>
</template>

<script>
import HeadInfo from '@/components/HeadInfo.vue';
import {getList, isEnter, allInfo} from '@/api/student'

export default {
  name: 'Entry',
  components: {
    HeadInfo
  },
  data() {
    return {
      loading: true,// 遮罩层
      testList: [], // 考试列表
      studentName: '',// 学生姓名
      studentId: '',// 学生ID
    }
  },
  created() {
    this.studentName = this.$store.state.user.studentName
    this.studentId = this.$store.state.user.studentId
    this.getTestList()
  },
  methods: {
    getTestList() {
      getList(this.studentId).then(res => {
        this.testList = res.rows
        this.loading = false
      })
    },

    handleSignUp(row) {
      //查询能否进入
      isEnter(row.id, this.studentId).then(res => {
        if (res.data == 1) {

          /** 如果为1则有权限进入,为0则无权进入 */
          //查询进入页面显示的阶段
          allInfo(row.id, this.studentId).then(res => {
            let node = res?.node
            if (node === "0") {
              //考试须知阶段
              this.$router.push({
                path: '/Instruction',
                query: {
                  testId: row.id,
                }
              })
            } else {
              this.$store.commit("SET_ACTIVE", res?.node - 1)
              //其他阶段,大页面
              this.$router.push({
                path: '/ApplyProcess',
                query: {
                  testId: row.id,
                  studentId: this.studentId
                }
              })
            }

          })
        } else {
          /** 为0则无权进入 */
          this.$message({
            message: '暂时无法进入',
            type: 'warning'
          });
        }


      }).catch(err => {

      })


    },

  },
  computed: {
    getState() {
      return function (cur) {
        let state = ''
        switch (cur) {
          case '0':
            state = '待报名'
            break
          case '1':
            state = '待审核'
            break
          case '2':
            state = '通过'
            break
          case '3':
            state = '驳回'
            break
          case '4':
            state = '信息修改'
            break
          case '5':
            state = '准考证打印'
            break
          case '6':
            state = '成绩查询'
            break
          case '7':
            state = '审核中'
        }
        return state
      }
    }
  }
}
</script>

<style>
.box {
  display: flex;
  justify-content: center;
  background-image: url("../assets/image/background.png");
}

.container {
  width: 70%;
  height: 100%;
  /*background: red;*/
}

.head {
  width: 100%;
  height: 100px;
}

.entry-card-container {
  width: 100%;
  height: 845px;
  /*margin: 25px auto 105px;*/
  /* border: 2px solid black; */
  border-radius: 12px;
  background-color: #fff;
}

.entry-top {
  background-color: rgb(245, 248, 251);
  height: 80px;
  border-radius: 12px 12px 0 0;
  line-height: 80px;
  font-size: 18px;
  font-weight: 700;
}
</style>
