<template>
  <div class="page-body MainPlan">
    <div class="col row wrap q-col-gutter-md">
      <div class="col-2">
        <el-select v-model="msg.ClassRoomId" style="width:100%;" placeholder="教室" size="small" @change="getTypeWay()">
          <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="getTypeWay()" 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="getTypeWay()" 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="getTypeWay()">
          <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-select>
      </div>
      <div class="col-2">
        <q-btn color="accent" size="sm" class="q-mr-md" style="margin-top:2px;" @click="exchangeType" :label="typeName" />
      </div>
    </div>
    <classmateForm :dataList="dataList" v-if="commonType==1"></classmateForm>
    <teachTable v-if="commonType==2" :tableData="tableData" :PageCount="PageCount" :setMsg="tabMsg"  @getChange="getChange"></teachTable>
  </div>
</template>

<script>
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from '../../api/school/index'
  import {
    GetClassPlanStatistical,
    GetClassPlanStatisticalPage
  } from '../../api/teacher/index';
  import classmateForm from '../teacher/components/classmate-form';
  import teachTable from '../teacher/components/teachTable';
  export default {
    meta: {
      title: "上课计划"
    },
    components: {
      classmateForm,
      teachTable
    },
    data() {
      return {
        ClassRoomList: [], //
        StartTime: "",
        EndTime: '',
        TeacherId: 0,
        ClassRoomId: 0,
        dataList: {},
        activeNames: [1],
        msg: {
          StartTime: "",
          EndTime: '',
          TeacherId: 0,
          ClassRoomId: 0,
          ClassType: 0,
        },
        commonType:1, //1日历模式 2列表模式
        typeName:'列表模式',
        tabMsg:{
          PageIndex:1,
          PageSize:12,
          rowsPerPage: 12,
          StartTime:'',
          EndTime:'',
          TeacherId:0,
          ClassRoomId:0,
          ClassType:0
        },
        tableData:[], //表格数据
        PageCount:0
      };
    },
    created() {
      if (this.$route.query && this.$route.query.ClassType) {
        this.msg.ClassType = this.$route.query.ClassType;
      }
      let userinfo = this.getLocalStorage();
      this.msg.TeacherId = userinfo.AccountId;
      this.tabMsg.TeacherId = userinfo.AccountId;

      this.getClassRoomList();
    },
    mounted() {
      this.getPlanList();
    },
    methods: {
      // 获取校区教室导航列表
      getPlanList() {
        GetClassPlanStatistical(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        }).catch(() => {

        })
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
            var obj = {
              RoomName: '请选择',
              RoomId: 0
            }
            this.ClassRoomList.unshift(obj);
          }
        })
      },
      exchangeType(){
        if(this.commonType==1){
           this.commonType=2
           this.typeName='日历模式'
          this.getTableList()
        }else{
           this.commonType=1;
           this.typeName='列表模式'
           this.getPlanList()
        }
      },
      getTableList(){
        this.tabMsg.StartTime = this.msg.StartTime;
        this.tabMsg.EndTime = this.msg.EndTime;
        this.tabMsg.ClassRoomId = this.msg.ClassRoomId;
        this.tabMsg.ClassType = this.msg.ClassType;
        GetClassPlanStatisticalPage(this.tabMsg).then(res => {
          if (res.Code == 1) {
            this.tableData = res.Data.PageData;
            this.PageCount = res.Data.PageCount;
          }
        })
      },
      getChange(val) {
        this.tabMsg.PageIndex = val;
        this.getTableList()
      },
      getTypeWay(){
        if(this.commonType==2){
          this.getTableList()
        }else{
          this.getPlanList()
        }
      }
    }
  };

</script>
