<template>
  <div class="page-body MainPlan xg">
    <div class="col row wrap q-col-gutter-md">
      <div class="col-2 flex">
        <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>
          <div slot="prefix" class="full-height flex items-center" style="color: #000; padding-right: 10px">
            教师:
          </div>
        </el-select>
      </div>
      <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>
          <div slot="prefix" class="full-height flex items-center" style="color: #000; padding-right: 10px">
            教室:
          </div>
        </el-select>
      </div>
      <div class="col-2" style="width: 13%">
        <el-date-picker v-model="msg.StartTime" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" size="small"
          style="width: 100%" @change="getTypeWay()" :picker-options="picker" :clearable="false">
        </el-date-picker>
      </div>
      <div class="col-2" style="width: 13%">
        <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" :picker-options="pickerEnd">
        </el-date-picker>
      </div>
      <div class="col-1" style="width: 10%">
        <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-option :key="2" label="预约课" :value="3"> </el-option>
          <div slot="prefix" class="full-height flex items-center" style="color: #000; padding-right: 10px">
            类型:
          </div>
        </el-select>
      </div>
      <div class="col-2 yuyuezhuangtai" style="width: 10%" v-if="msg.ClassType==3">
        <el-select v-model="msg.AppointState" style="width: 100%;" placeholder="预约状态" size="small"
          @change="getTypeWay()">
          <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>
          <div slot="prefix" class="full-height flex items-center"
            style="color: #000;margin-right:61px; white-space:nowrap;">
            预约状态:
          </div>
        </el-select>
      </div>
      <div class="col-3" style="width: 30%">
        <q-btn color="accent" size="sm" class="q-mr-md" style="margin-top: 2px" @click="exchangeType"
          :label="typeName" />
        <q-btn color="accent" size="sm" class="q-mr-md" label="下载计划" @click="downLoadPlan()" />
        <q-btn color="negative" size="sm" label="调课申请" @click="openForm"></q-btn>
      </div>
    </div>
    <classmateForm :dataList="dataList" v-if="commonType == 1" :loading="loading"></classmateForm>
    <change-class-form v-if="persistent" @close="closeSaveForm" @success="refreshPage"></change-class-form>
    <teachTable v-if="commonType == 2" :tableData="tableData" :PageCount="PageCount" :setMsg="tabMsg" :showCZ="false"
      @getChange="getChange" :loading="loading"></teachTable>
  </div>
</template>

<script>
  import {
    getTeacherDropDownList,
    queryClassRoomList,
  } from "../../api/school/index";
  import {
    GetClassPlanStatistical,
    GetClassPlanStatisticalPage,
  } from "../../api/teacher/index";
  import {
    EduDownLoad
  } from "../../api/common/common";
  import classmateForm from "../../components/course/classmate-form";
  import teachTable from "../teacher/components/teachTable";
  import changeClassForm from "../../components/teacher/changeClassForm.vue";

  export default {
    meta: {
      title: "上课计划",
    },
    components: {
      classmateForm,
      teachTable,
      changeClassForm,
    },
    data() {
      return {
        persistent: false,
        TeacherList: [], //教师团队
        ClassRoomList: [], //
        StartTime: "",
        EndTime: "",
        TeacherId: 0,
        ClassRoomId: 0,
        dataList: {},
        activeNames: [1],
        msg: {
          StartTime: "",
          EndTime: "",
          TeacherId: 0,
          ClassRoomId: 0,
          ClassType: 0,
          AppointState: 0,
        },
        commonType: 1, //1日历模式 2列表模式
        typeName: "列表模式",
        tabMsg: {
          PageIndex: 1,
          PageSize: 12,
          rowsPerPage: 12,
          StartTime: "",
          EndTime: "",
          TeacherId: 0,
          ClassRoomId: 0,
          ClassType: 0,
        },
        tableData: [], //表格数据
        PageCount: 0,
        picker: {
          disabledDate: (time) => {
            // let endTime=this.msg.EndTime
            // if(endTime){
            //     return Date.now() - 8.64e7>time.getTime()>=new Date(endTime).getTime()- 8.64e7
            // }else{
            // return time.getTime() < Date.now() - 8.64e7
            // }
          },
        },
        pickerEnd: {
          disabledDate: (time) => {
            let startTime = this.msg.StartTime;
            if (startTime) {
              return time.getTime() <= new Date(startTime).getTime() - 8.64e7;
            } else {
              return time.getTime() < Date.now() - 8.64e7;
            }
          },
        },
        loading: false,
      };
    },
    created() {
      if (this.$route.query && this.$route.query.ClassType) {
        this.msg.ClassType = this.$route.query.ClassType;
      }
      let date = new Date();
      let today =
        date.getFullYear() +
        "-" +
        (date.getMonth() < 9 ?
          "0" + (date.getMonth() + 1) :
          date.getMonth() + 1) +
        "-" +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
      this.msg.StartTime = today;
      this.tabMsg.StartTime = today;
      this.getClassRoomList();
    },
    mounted() {
      this.GetTeacherList();
      this.getPlanList();
    },
    methods: {
      downLoadPlan() {
        //导出
        var newMsg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/Class/DownLoadClassPlan", newMsg, "老师上课计划.xls");
      },
      refreshPage() {
        this.getPlanList();
      },
      openForm() {
        this.persistent = true;
      },
      closeSaveForm() {
        this.persistent = false;
      },
      // 获取校区教室导航列表
      getPlanList() {
        GetClassPlanStatistical(this.msg).then((res) => {
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        });
      },
      //获取教师下拉
      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);
          }
        });
      },
      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;
        this.loading = true;
        GetClassPlanStatisticalPage(this.tabMsg).then((res) => {
          this.loading = false;
          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>
<style lang="scss">
  .xg .el-input--prefix .el-input__inner {
    padding-left: 50px;
  }

  .yuyuezhuangtai .el-input--prefix .el-input__inner {
    padding-left: 60px;
  }
</style>