<template>
  <div class="page-body MainPlan">
    <div class="col row wrap q-col-gutter-md">
      <div class="col-2">
        <el-select v-model="msg.TeacherId" style="width:100%;" placeholder="教师团队" size="small" @change="getPlanList()">
          <el-option v-for="item in TeacherList" :key="item.TeacherName" :label="item.TeacherName" :value="item.TId">
          </el-option>
        </el-select>
      </div>
      <div class="col-2">
        <el-select v-model="msg.ClassRoomId" style="width:100%;" placeholder="教室" size="small" @change="getPlanList()">
          <el-option v-for="item in ClassRoomList" :key="item.RoomName" :label="item.RoomName" :value="item.RoomId">
          </el-option>
        </el-select>
      </div>
      <div class="col-2">
        <el-date-picker v-model="msg.StartTime" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" size="small"
          style="width:100%;" @change="getPlanList()" clear-icon="iconfont icon-guanbi">
        </el-date-picker>
      </div>
      <div class="col-2">
        <el-date-picker v-model="msg.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" size="small"
          style="width:100%;" @change="getPlanList()" clear-icon="iconfont icon-guanbi">
        </el-date-picker>
      </div>
      <div class="col-2">
        <el-select v-model="msg.ClassType" style="width:100%;" placeholder="类型" size="small" @change="getPlanList()">
          <el-option :key="0" label="全部" :value="0"> </el-option>
          <el-option :key="1" label="跟班课" :value="1"> </el-option>
          <el-option :key="2" label="试听课" :value="2"> </el-option>
          <el-option :key="2" label="预约课" :value="3"> </el-option>
        </el-select>
      </div>
      <div class="col-2" v-if="msg.ClassType==3">
        <el-select v-model="msg.AppointState" style="width:100%;" placeholder="预约状态" size="small" @change="getPlanList()">
          <el-option :key="0" label="不限" :value="0"> </el-option>
          <el-option :key="0" label="待确认" :value="1"> </el-option>
          <el-option :key="1" label="已确认" :value="2"> </el-option>
        </el-select>
      </div>
    </div>
    <classmateForm :dataList="dataList"></classmateForm>
  </div>
</template>

<script>
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from '../../api/school/index'
  import {
    GetClassPlanStatistical
  } from '../../api/system/index';
  import classmateForm from '../../components/course/classmate-form';
  export default {
    meta: {
      title: "上课计划"
    },
    components: {
      classmateForm
    },
    data() {
      return {
        TeacherList: [], //教师团队
        ClassRoomList: [], //
        StartTime: "",
        EndTime: '',
        TeacherId: 0,
        ClassRoomId: 0,
        dataList: {},
        activeNames: [1],
        msg: {
          StartTime: "",
          EndTime: '',
          TeacherId: 0,
          ClassRoomId: 0,
          ClassType: 0,
          AppointState:0,
        }
      };
    },
    created() {
      if (this.$route.query && this.$route.query.ClassType) {
        this.msg.ClassType = this.$route.query.ClassType;
      }
      this.GetTeacherList();
      this.getClassRoomList();
    },
    mounted() {
      this.getPlanList();
    },
    methods: {
      // 获取校区教室导航列表
      getPlanList() {
        GetClassPlanStatistical(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        }).catch(() => {

        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            var obj = {
              TeacherName: '请选择',
              TId: 0
            }
            this.TeacherList.unshift(obj);
          }
        })
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
            var obj = {
              RoomName: '请选择',
              RoomId: 0
            }
            this.ClassRoomList.unshift(obj);
          }
        })
      }
    }
  };

</script>
