<style>
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

</style>
<template>
  <div class="page-body">
    <div class="page-search" :class="[$q.platform.is.desktop?'row items-center':'']">
      <div class="col row wrap  q-col-gutter-md" :class="[$q.platform.is.desktop?'q-mr-lg':'']">
        <div :class="[$q.platform.is.desktop?'col-3':'col-12']">
          <div class="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>
    </div>
    <reservelist :data="dataList" :authObj="authObj" :loading="loading" @success="refreshPage"></reservelist>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" v-if="msg.pageCount > 0" flat>
      <q-pagination v-if="$q.platform.is.mobile" class="full-width justify-end" v-model="msg.pageIndex" color="primary"
        :max="msg.pageCount" :input="true" @update:model-value="changePageHandler" />
    </q-card>
    <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true"
      @input="changePage" />
  </div>
</template>
<script>
  import {
    queryVisitorReservePage
  } from '../../api/scheduling/schedu'
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from "../../api/school/index";
  import reservelist from '../../components/schedul/reservestudentlist'
  export default {
    meta: {
      title: "试听开课管理"
    },
    components: {
      reservelist
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StartClassDate: "", //开始时间
          EndClassDate: "", //结束时间
          TeacherId: "", //教师编号
          ClassRoomId: "", //教室编号
          LessonName: '', //课程名称
          Visitor_Id: 0,
          IsReserve: 1,
          IsQNotReserveClassId: 1,
        },
        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

      if (this.$route.query) {
        if (this.$route.query.StartClassDate) {
          this.msg.StartClassDate = this.$route.query.StartClassDate;
        }
        if (this.$route.query.EndClassDate) {
          this.msg.EndClassDate = this.$route.query.EndClassDate;
        }
        if (this.$route.query.TeacherId) {
          this.msg.TeacherId = Number(this.$route.query.TeacherId);
        }
      }
      // this.GetTeacherList();
      // this.getClassRoomList();
      this.getList()
    },
    methods: {
      changePageHandler(n) {
        this.msg.pageIndex = n;
        this.getList();
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      //获取课程系列分页列表
      getList() {
        this.loading = true;
        queryVisitorReservePage(this.msg).then(res => {
          this.loading = false;
          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>
