<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="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 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">
      <el-form ref="form" :model="form" label-width="180px" status-icon>
        <el-form-item label="姓名：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="考试名称：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="考试系列：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="考试级别：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="考试科目：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="考试时间：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="申请时间：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="拟报考点：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="缴费方式：">
          <el-select v-model="form.year" placeholder="请选择">
            <el-option label="11" value="11"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <img src="../../assets/logo.png" style="width:50px;height:50px;display:flex;">
      <el-button type="primary" @click="printChange">已完成缴费</el-button>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {'考试':1}
      ],
      form: {},
      showMain: true,
    }
  },
  methods: {
    // 表格头部样式回调
    headStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    printChange() {
      this.$emit('print',true)
    }
  }
}
</script>

<style lang="less" scoped>
.pay {
  .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;
  }
}

</style>