<template>
  <div class="page-body">
    <div class="page-content">
      <q-table :loading="loading" no-data-label="暂无相关数据" flat selection="multiple" :selected.sync="selectedStudent"
        class="sticky-column-table" separator="none" :data="studentList" :pagination="initialPagination"
        :columns="columns" row-key="Id" hide-bottom>
        <template v-slot:top="props">
          <div class="col-2 q-table__title">学员信息</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" class="q-mr-md" label="补课安排" @click="makeLesson()" />
          </div>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    queryClassStudent
  } from '../../api/course/class';
  export default {
    data() {
      return {
        loading: false, //加载
        initialPagination: {
          rowsPerPage: 1000
        },
        columns: [{
            name: 'GuestName',
            label: '学员名称',
            field: 'GuestName',
            align: 'left',
          },
          {
            name: 'Mobile',
            label: '联系电话',
            field: 'Mobile',
            align: 'left',
          },
          {
            name: 'OrderId',
            label: '关联订单',
            field: 'OrderId',
            align: 'left',
          },
          {
            name: 'EnterName',
            label: '关联销售',
            field: 'EnterName',
            align: 'left',
          },
          {
            name: 'ContractTotalHours',
            label: '合同课时',
            field: 'ContractTotalHours',
            align: 'left',
          },
          {
            name: 'ValidClassHours',
            label: '有效课时',
            field: 'ValidClassHours',
            align: 'left',
          },
          {
            name: 'CompleteHours',
            label: '消耗课时',
            field: 'CompleteHours',
            align: 'left',
          },
          {
            name: 'SurplusHours',
            label: '剩余课时',
            field: 'SurplusHours',
            align: 'left',
          },
          {
            name: 'MakeUpHours',
            label: '剩余补课课时',
            field: 'MakeUpHours',
            align: 'left',
          }
        ],
        stuMsg: {
          ClassId: 0,
          School_Id: -1,
          QNoFinish:1
        },
        selectedStudent: [],
        studentList: [], //学员信息数据
      }
    },
    created() {

    },
    mounted() {
      if (this.$route.query && this.$route.query.ClassId) {
        this.stuMsg.ClassId = this.$route.query.ClassId
      }
      this.getStudentData();
    },
    methods: {
      //获取学员信息
      getStudentData() {
        this.studentList = [];
        this.loading=true;
        queryClassStudent(this.stuMsg).then(res => {
          this.loading=false;
          if (res.Code == 1) {
            this.studentList = res.Data;
          }
        })
      },
      //补课安排
      makeLesson() {
        this.$q.notify({
          type: 'negative',
          position: "top",
          message: `正在开发中，近期发布...`
        })
      }
    },
  }

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

</style>
