<style>
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }
</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">
          <div class="col-4 Sysuser_Date">
            <q-field filled>
               <template v-slot:control>
                <el-date-picker v-model="msg.StartClassDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间"
                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>至
                <el-date-picker v-model="msg.EndClassDate" value-format="yyyy-MM-dd" type="date" placeholder="结束时间"
                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled option-value="TId" option-label="TeacherName" v-model="msg.TeacherId"
            :options="TeacherList" emit-value map-options label="老师" clearable />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled stack-label option-value="RoomId" option-label="RoomName"
            v-model="msg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" clearable :dense="false"
            class="col-6 q-pb-lg" emit-value map-options />
        </div>
        <div class="col-3">
            <q-input @input="resetSearch" clearable filled v-model="msg.LessonName"
            label="试听课程名称" @clear="resetSearch" maxlength="20" />
        </div>
      </div>
    </div>
    <reservelist :data="dataList" :authObj="authObj" :loading="loading" @success="refreshPage"></reservelist>
    <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount"
      :input="true" @input="changePage" />
  </div>
</template>

<script>
  import {
    GetReserveClassPage
  } from '../../api/scheduling/schedu'
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from "../../api/school/index";

  import reservelist from '../../components/schedul/reservelist'

  export default {
    meta: {
      title: "试听课管理"
    },
    components: {
      reservelist
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StartClassDate: "", //开始时间
          EndClassDate: "", //结束时间
          TeacherId: "", //教师编号
          ClassRoomId: "", //教室编号
          LessonName:'' //课程名称
        },
        dataList: [],
        loading: false,
        PageCount: 0,
        
        TeacherList: [],
        ClassRoomList: [],
        authObj: {
          isShowEdit:true
        }
      }
    },
    mounted() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      this.msg.StartClassDate = year + '-' + month + '-' + day

      this.GetTeacherList();
      this.getClassRoomList();
      this.getList()
    },
    methods: {
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      //获取课程系列分页列表
      getList() {
        GetReserveClassPage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.PageCount = res.Data.PageCount;
          }
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({
          IsQLeave: 0
        }).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        });
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
          }
        })
      },
      //刷新页面
      refreshPage() {
        this.getList();
      },
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>