<template>
  <div style="padding:20px 0">
    <div class="page-content">
      <q-table :pagination="setMsg" no-data-label="暂无相关数据" flat class="sticky-column-table sticky-right-column-table"
        separator="none" :data="tableData" :columns="columns" row-key="name">
        <template v-slot:body-cell-GuestList="props">
          <q-td auto-width :props="props">
            <span v-for="(item,index) in props.row.GuestList" style="margin-right:5px;">
              {{item.GuestName}}
            </span>
          </q-td>
        </template>
        <template v-slot:body-cell-StartTime="props">
          <q-td auto-width :props="props">
            {{props.row.StartTime}}-{{props.row.EndTime}}
          </q-td>
        </template>
        <template v-slot:body-cell-TotalPlanNum="props">
          <q-td>
            {{props.row.Ranks}}/{{props.row.TotalPlanNum}}
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td>
            <q-btn flat size="xs" icon="iconfont icon-view" v-if="props.row.ClassType==1" color="accent"
              style="font-weight:400" label="课程回顾" @click="goCourseRecord(props.row)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="PageIndex" color="primary" :max="PageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      setMsg: {
        type: Object,
        default: null
      },
      tableData: {
        type: Array,
        default: null
      },
      PageCount: {
        type: Number,
        default: null
      }
    },
    meta: {
      title: "我的课表"
    },
    components: {

    },
    data() {
      return {
        columns: [{
            name: 'ClassDate',
            label: '日期',
            field: 'ClassDate',
            align: 'left'
          }, {
            name: 'StartTime',
            label: '上课时间',
            field: 'StartTime',
            align: 'left'
          }, {
            name: 'ClassName',
            label: '班级',
            field: 'ClassName',
            align: 'left'
          },
          {
            name: 'CourseName',
            label: '课程名称',
            field: 'CourseName',
            align: 'left',
          },
          {
            name: 'GuestList',
            label: '学员名称',
            field: 'GuestList',
            align: 'left'
          },
          {
            name: 'TeacherName',
            label: '教师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'TotalPlanNum',
            label: '课程进度',
            field: 'TotalPlanNum',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'Id'
          }
        ],
        tabMsg: {
          PageIndex: 1,
          PageSize: 15,
          rowsPerPage: 15,
          StartTime: '',
          EndTime: '',
          TeacherId: 0,
          ClassRoomId: 0,
          ClassType: 0
        },
        PageIndex: 1
      }
    },
    created() {

    },
    mounted() {
    },
    methods: {
      //翻页
      changePage(val) {
        this.PageIndex = val;
        this.$emit('getChange', this.PageIndex);
      },
      //跳转到课程回顾
      goCourseRecord(item) {
        this.$router.push({
          path: "../../classroom/courseInfo",
          query: {
            id: item.Id
          }
        })
      }
    }
  }

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

</style>
