<style>
  .OtherCourseNum {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: 1px solid #2961fe;
    border-radius: 50%;
    cursor: pointer;
    color: #2961fe;
  }

  .OCourseTable {
    width: 400px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

  .OCourseTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @change="refreshPage" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="考生名称"
            @clear="refreshPage" maxlength="20" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
        row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">考生管理</div>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat color="primary" size="xs" style="font-weight:400;" class="q-mr-md" label="学员考试"
              @click="gotoExamTest(props.row)" />
          </q-td>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    getExaminationStudentPage
  } from "../../api/teacher/index";
  export default {
    meta: {
      title: "考生管理",
    },
    data() {
      return {
        columns: [{
            name: "GuestId",
            label: "考生编号",
            field: "GuestId",
            align: "left",
          },
          {
            name: "GuestName",
            label: "考生名称",
            field: "GuestName",
            align: "left",
          },
          {
            name: "Mobile",
            label: "电话",
            field: "Mobile",
            align: "left",
          },
          {
            name: "ClassName",
            label: "班级名称",
            field: "ClassName",
            align: "left",
          },
          {
            name: "optioned",
            label: "操作",
            field: "Id"
          }
        ],
        data: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          PublishId: 0,
          GuestName: "", //学员名称
        },
        pageCount: 0,
      };
    },
    created() {
      this.msg.PublishId = this.$route.query.Id;
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList() {
        getExaminationStudentPage(this.msg).then((res) => {
          if (res.Code === 1) {
            this.data = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        });
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //刷新页面
      refreshPage() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      //跳转到考试详情
      gotoExamTest(item) {
        var qMsg = {};
        this.OpenNewUrl('/exam/examtest', qMsg);
      },
    },
  };

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
