<template>
  <div class="card"> 
    <div class="r-main" v-show="showMain">  
      <div class="r-top">
        <div>
          <p>身份证号：{{ studentData.card_num }}</p>
          <p>考生姓名：{{ studentData.name }}</p>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        border
        :header-cell-style="headStyle"
        :data="tableData"
      >
        <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 prop="place_code" label="考试时间" width="120">
        </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 class="print-card" v-show="!showMain">
      <p>准考证内容</p>
      <el-button type="default" @click="showMain = true">返回</el-button>
      <el-button type="primary">打印准考证</el-button>
    </div>
  </div>
</template>

<script>
import {
  getStudentInfo, //个人资料
} from "@/api/home";
export default {
  data() {
    return {
      tableData: [
        {"kaoshi":1}
      ],
      studentData: [],
      form: {},
      showMain: true,
    }
  },
  props:["printValue"],
  watch: {
    
  },
  mounted() {
    this.showMain = this.printValue;
    console.log('show',this.showMain)
  },
  created() {
    this.getStudent();
  },
  methods: {
    // 获取考生个人资料
    async getStudent() {
      let res = await getStudentInfo({
        student_id: 2,
      });

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

      // 赋值渲染
      if (code === 200) {
        this.studentData = data.res.student;
      }
    },
    // 表格头部样式回调
    headStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    
  }
}
</script>

<style lang="less" scoped>
.r-main {
  .r-top {
    background-color: #F6F7F9;
    margin: 10px auto;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      margin: 20px 0 20px 0;
    }
  }
  .el-table::before {
    height: 0;
  }
  .el-table--border::after, .el-table--group::after {
    height: 0;
  }
  .el-table--border, .el-table--group {
    border: 0;
  }
}
</style>