<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="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"
            >
              {{ 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-btn
              flat
              size="xs"
              icon="iconfont icon-view"
              v-if="props.row.ClassType == 1"
              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,
    },
  },
  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>
