<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);
  }

  .Exam_PaperName {
    width: 300px;
    display: inline;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .Exam_PaperName i {
    font-size: 18px;
  }

</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="getList" clearable filled v-model="msg.PaperName" @clear="getList" maxlength="20"
            label="输入试卷名称" />
        </div>
      </div>
      <div class="page-option"></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="dataList" :columns="columns"
        row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">考试管理</div>
          <q-space />
        </template>
        <template v-slot:body-cell-ExamStartTime="props">
          <q-td :props="props">
            {{ props.row.ExamStartTime }} -- {{ props.row.ExamEndTime }}
          </q-td>
        </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 size="xs" color="primary" style="font-weight:400" @click="goExame(scope.row)" label="开始考试" />
          </q-td>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    queryGuestExaminationPublishPage
  } from "../../api/teacher/student";
  //获取校区列表
  export default {
    components: {},
    meta: {
      title: "我的考试",
    },
    data() {
      return {
        data: [],
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          ExamStatus: 2, //
          GuestId: 60,
        },
        columns: [{
            name: "Id",
            label: "编号",
            field: "Id",
            align: "left",
          },
          {
            name: "PaperName",
            label: "试卷名称",
            field: "PaperName",
            align: "left",
          },
          {
            name: "ExamStartTime",
            label: "考试时间",
            field: "ExamStartTime",
            align: "left",
          },
          {
            name: "ExamTimes",
            label: "考试时长",
            field: "ExamTimes",
            align: "left",
          },
          {
            name: "optioned",
            label: "操作",
            field: "Id",
          },
        ],
        pageCount: 0,
        loading: false,
        dataList: [],
        examObj: {}, //弹窗对象
      };
    },
    created() {},
    mounted() {
      this.getList();
    },
    methods: {
      //跳转到考试页面
      goExame(item) {

      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //获取菜单分页列表
      getList() {
        this.loading = true;
        this.dataList = [];
        queryGuestExaminationPublishPage(this.msg)
          .then((res) => {
            this.loading = false;
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      //刷新页面
      refreshPage() {
        this.getList();
      },


    },
  };

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

</style>
