<template>
  <div style="padding: 20px 0">
    <div class="page-content">
      <q-table :pagination="setMsg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table sticky-right-column-table"
        separator="none" :data="tableData" :columns="showCZ ? columns : columns2" 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" :key="index">
              {{ 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-ClassName="props">
          <q-td auto-width :props="props">
            {{ props.row.ClassName }}
            <span v-if="props.row.ClassType==2">
              <span v-if="props.row.ReserveType==0">(正常试听)</span><span v-if="props.row.ReserveType==1">(跟班试听)</span>
            </span>
          </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||props.row.ClassType == 3" color="accent"
              style="font-weight: 400" label="课程回顾" @click="goCourseRecord(props.row)" />
            <q-btn flat size="xs" icon="iconfont icon-view" v-if="props.row.ClassType == 1||props.row.ClassType == 3" color="accent"
              style="font-weight: 400" label="课程反馈" @click="goFeedBack(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,
      },
      showCZ: {
        //是否显示操作栏
        Type: Boolean,
        default: true,
      },
      loading:{
        type:Boolean,
        default:false,
      }
    },
    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",
          },
        ],
        columns2: [{
            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",
          },
        ],
        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.OpenNewUrl("../../classroom/courseInfo", {
          id: item.Id,
        });
      },
      //跳转到课程反馈
      goFeedBack(item) {
        this.OpenNewUrl("/teacher/feedBackList", {
          id: item.Id,
        });
      },
    },
  };
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>