<template>
  <div class="page-body MainPlan xg">
    <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="getTypeWay()">
          <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">
        <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">
        <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"
          :clearable="false">
        </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-option :key="3" 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">
        <el-input v-model="msg.StuName" style="width: 100%" placeholder="学员姓名" size="small" @input="getTypeWay()" clearable>
          <div slot="prefix" class="full-height flex items-center" style="color: #000; padding-right: 10px">
            学员:
          </div>
        </el-input>
      </div>
    </div>
    <teachTable v-if="commonType == 2" :tableData="tableData" :PageCount="PageCount" :setMsg="tabMsg" :showCZ="true"
      @getChange="getChange" :loading="loading"></teachTable>
  </div>
</template>

<script>
  import {
    getTeacherDropDownList,
    queryClassRoomList,
    getStudentDorpDownList,
  } from "../../api/school/index";
  import {
    GetClassPlanStatistical,
    GetClassPlanStatisticalPage,
  } from "../../api/teacher/index";

  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: {},
        loading: false,
        msg: {
          StartTime: "",
          EndTime: "",
          TeacherId: 0,
          ClassRoomId: 0,
          ClassType: 0,
          Student_Id: "",
          StuName: "",
        },
        commonType: 2, //1日历模式 2列表模式
        typeName: "列表模式",
        tabMsg: {
          PageIndex: 1,
          PageSize: 12,
          rowsPerPage: 12,
          StartTime: "",
          EndTime: "",
          TeacherId: 0,
          ClassRoomId: 0,
          ClassType: 0,
          OrderBy: 1,
          StuName:"",
        },
        tableData: [], //表格数据
        PageCount: 0,
        picker: {
          disabledDate: (time) => {
            if (this.msg.EndTime == null) {
              return false;
            } else {
              let endTime = new Date(this.msg.EndTime);
              return endTime.getTime() < time.getTime();
            }
          },
        },
        pickerEnd: {
          disabledDate: (time) => {
            let startTime = new Date(this.msg.StartTime);
            return startTime.getTime() >= time.getTime();
          },
        },
        today: "",
        StuList: [], //学员列表
      };
    },
    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.today = today;
      this.msg.StartTime = today;
      this.tabMsg.StartTime = today;
      this.msg.EndTime = today;
      this.tabMsg.EndTime = today;
      this.getClassRoomList();
    },
    mounted() {
      this.GetTeacherList();
      this.getTableList();
    },
    methods: {
      queryStuList() {
        getStudentDorpDownList({}).then(res => {
          if (res.Code == 1) {
            this.StuList = res.Data;
          }
        });
      },
      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;
            }
          })
          .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);
          }
        });
      },
      exchangeType() {
        if (this.commonType == 1) {
          this.commonType = 2;
          this.typeName = "日历模式";
          this.getTableList();
        } else {
          this.commonType = 1;
          this.typeName = "列表模式";
          this.getPlanList();
        }
      },
      getTableList() {
        if (Date.parse(this.msg.StartTime) > Date.parse(this.msg.EndTime)) {
          this.msg.StartTime = "";
        }
        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.tabMsg.TeacherId = this.msg.TeacherId;
        this.tabMsg.StuName=this.msg.StuName;
        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;
  }
</style>