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

  .redStuStyle {
    color: red;
  }

  .blaStuStyle {
    color: #000;
  }

  .classProgress {
    color: var(--q-color-primary);
  }

</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="getClassList" clearable standout="bg-primary text-white" v-model="msg.ClassName"
            label="班级名称" @clear="getClassList" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @change="getClassList" clearable standout="bg-primary text-white" v-model="msg.ClassNo" label="班号"
            @clear="getClassList" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="getClassList" standout="bg-primary text-white" v-model="msg.CourseSubject"
            :options="CourseSubjectList" option-label="SubjectName" option-value="Id" emit-value map-options
            label="所属科目" clearable />
        </div>
        <div class="col-3">
          <q-select @input="getClassList" standout="bg-primary text-white" option-value="Id" option-label="Name"
            v-model="msg.ClassStatus" :options="classStatusList" emit-value map-options label="班级状态" />
        </div>
        <div class="col-3">
          <q-input @change="getClassList" clearable standout="bg-primary text-white" v-model="msg.TeacherName"
            label="带班老师" @clear="getClassList" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @change="getClassList" clearable standout="bg-primary text-white" v-model="msg.CourseName"
            label="学习课程" @clear="getClassList" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input v-model="msg.StartTime" mask="date" label="开班时间" standout="bg-primary text-white" clearable
            @clear="getClassList" @change="getClassList">
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy ref="qCStartTime" transition-show="scale" transition-hide="scale">
                  <q-date v-model="msg.StartTime" mask="YYYY-MM-DD" @input="() =>changeDate()" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
        <div class="col-3">
          <q-select @input="getClassList" standout="bg-primary text-white" option-value="SId" option-label="SName"
            v-model="msg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <classlist :data="data" :authObj="authObj" :loading="loading" @success="refreshPage"></classlist>
      <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
        :input="true" @input="changePage" />
    </div>
  </div>
</template>
<script>
  import {
    queryClassPage,
    queryClassStatusList,
  } from '../../api/course/class';
  //获取校区列表
  import {
    getSchoolDropdown,
    getTeacherDropDownList
  } from '../../api/school/index';
  import {
    getCourseSubject
  } from "../../api/course/index";
  import classlist from '../../components/course/classlist';
  export default {
    meta: {
      title: "班级管理"
    },
    components: {
      classlist
    },
    data() {
      return {
        data: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          ClassName: '', //班级名称
          ClassStatus: 2, //班级状态
          TeacherName: '', //带班老师
          CourseName: '', //学习课程
          School_Id: -1, //关联校区
          ClassNo: '', //班号
          CourseSubject: "", //所属科目
          StartTime: "", //开班开始时间
          EndTime: "", //开班结束时间
        },
        classStatusList: [], //班级状态列表
        schoolList: [], //校区列表
        pageCount: 0,
        //权限判断
        authObj: {
          isShowAddBtn: true, //显示新增按钮
          isShowDelBtn: true, //显示删除
          isShowRestoreBtn: true, //显示恢复
          isShowOtherCourseBtn: true, //显示关联其他课程
          isShowLessonCost: true, //显示月度课耗
          isShowStatusChange: true, //显示状态变更
          isShowStudentMenu: true, //显示未完成学员名单
          isShowApply: true //显示调课申请
        },
        CourseSubjectList: [], //所属科目
      }
    },
    created() {
      if (this.$route.query && this.$route.query.ClassName) {
        this.msg.ClassName = decodeURI(this.$route.query.ClassName)
      }
      //this.msg.StartTime = this.$commonUtils.getCurrentDate();
      this.getClassStatus();
      this.getSchool();
      this.GetTeacherList();
      this.queryCourseSubject()
    },
    mounted() {
      this.getClassList();
    },
    methods: {
      changeDate() {
        this.$refs.qCStartTime.hide();
        this.getClassList();
      },
      queryCourseSubject() {
        getCourseSubject({}).then(res => {
          if (res.Code == 1) {
            this.CourseSubjectList = res.Data;
          }
        })
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              SId: -1,
              SName: "不限"
            })
            this.schoolList = tempArray;
          }
        })
      },
      //获取班级状态列表
      getClassStatus(status) {
        queryClassStatusList({}).then(res => {
          if (res.Code == 1) {
            this.classStatusList = res.Data;
          }
        })
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getClassList()
      },
      //获取菜单分页列表
      getClassList() {
        this.loading = true;
        this.data = [];
        queryClassPage(this.msg).then(res => {
          this.loading = false;
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      //刷新页面
      refreshPage() {
        this.getClassList();
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            this.TeacherList.unshift({
              TId: 0,
              TeacherName: "不限"
            })
          }
        })
      },
    }
  }

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

</style>
