<template>
  <div class="page-body MainPlan xg listBox">
    <div class="col row wrap q-col-gutter-md">
      <div class="col-2 flex">
        <el-select v-model="msg.TeacherAccountId" style="width: 100%" placeholder="教师" size="small"
          @change="refreshPage()" clearable filterable>
          <el-option v-for="item in TeacherList" :key="item.Id" :label="item.EmployeeName" :value="item.Id">
          </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 flex">
        <el-select v-model="msg.CourseId" style="width: 100%" placeholder="课程" size="small" @change="refreshPage()"
          clearable filterable>
          <el-option v-for="item in CourseList" :key="item.CourseId" :label="item.CourseName" :value="item.CourseId">
          </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 flex">
        <el-select v-model="msg.CourseRate" style="width: 100%" placeholder="等级" size="small" @change="refreshPage()"
          clearable>
          <el-option v-for="item in CourseRateList" :key="item.Id" :label="item.Name" :value="item.Id">
          </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 flex">
        <el-select v-model="msg.GuestState" style="width: 100%" placeholder="学员状态" size="small" @change="refreshPage()"
          clearable>
          <el-option v-for="item in GuestStateList" :key="item.Id" :label="item.Name" :value="item.Id">
          </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 flex">
        <el-select v-model="msg.Student_Id" style="width: 100%" placeholder="学员" size="small" @change="refreshPage()"
          clearable filterable>
          <el-option v-for="item in StuList" :key="item.StuId" :label="item.StuName" :value="item.StuId">
          </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">
        <q-btn color="accent" size="sm" class="q-mr-md" label="下载" @click="DownLoadStuLearnChapterStatic()" />
      </div>
    </div>
    <consumptionCourseList v-loading="loading" :dataList="tableData" :MaxLength="MaxLength" :loading="loading">
    </consumptionCourseList>
  </div>
</template>

<script>
  import {
    queryStuLearnChapterStatic,
  } from "../../api/stuMan/index";
  import {
    queryEmployee
  } from "../../api/users/user";

  import {
    queryGuestStateList
  } from "../../api/sale/sale";

  import {
    queryCourseDropdownList,
    getCourseRate,
  } from "../../api/course/index";

  import {
    getStudentDorpDownList
  } from "../../api/school/index";

  import consumptionCourseList from "./components/consumptionCourseList";
  import {
    EduDownLoad
  } from "../../api/common/common";
  export default {
    meta: {
      title: "学员消课统计",
    },
    components: {
      consumptionCourseList
    },
    data() {
      return {
        persistent: false,
        msg: {
          TeacherAccountId: "", //老师编号
          CourseRate: "", //课程等级
          CourseId: "", //课程编号
          Student_Id: "", //学员编号
          GuestState: "", //学员状态
        },
        tableData: [], //表格数据
        loading: false,
        TeacherList: [], //教师团队
        CourseList: [], //课程列表
        CourseRateList: [], //课程等级
        MaxLength: 0,
        GuestStateList: [], //学员状态
        StuList: [], //学员列表
        tableHeight: 500,
      };
    },
    created() {
      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.GetTeacherList();
      this.getCourseList();
      this.queryCourseRate();
      this.getStateList();
      this.queryStuList();
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 90;
        // this.tableHeight = window.innerHeight - 200;
      }, 100)
    },
    mounted() {
      // this.getPlanList();
    },
    methods: {
      //下载消课统计
      DownLoadStuLearnChapterStatic() {
        //导出
        var newMsg = JSON.parse(JSON.stringify(this.msg));
        this.loading = true;
        EduDownLoad("/Scroll/DownLoadStuLearnChapterStatic", newMsg, "消课统计.xls", res => {
          this.loading = false;
        });
      },
      queryStuList() {
        getStudentDorpDownList({}).then(res => {
          if (res.Code == 1) {
            this.StuList = res.Data;
          }
        });
      },
      //获取学员状态
      getStateList() {
        queryGuestStateList({}).then(res => {
          if (res.Code == 1) {
            this.GuestStateList = res.Data;
          }
        });
      },
      refreshPage() {
        this.getPlanList();
      },
      // 获取校区教室导航列表
      getPlanList() {
        this.loading = true;
        queryStuLearnChapterStatic(this.msg).then((res) => {
          this.loading = false;
          if (res.Code == 1) {
            this.tableData = res.Data.list;
            this.MaxLength = res.Data.MaxLength;
          }
        });
      },
      //获取教师下拉
      GetTeacherList() {
        var qMsg = {
          AccountTypeStr: '2',
          IsLeave: 1,
        };
        queryEmployee(qMsg).then((res) => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            this.msg.TeacherAccountId = this.TeacherList[0].Id
            this.getPlanList();
          }
        });
      },
      //获取课程列表
      getCourseList() {
        queryCourseDropdownList({}).then(res => {
          if (res.Code == 1) {
            this.CourseList = res.Data;
          }
        });
      },
      //获取课程等级
      queryCourseRate() {
        getCourseRate({}).then(res => {
          if (res.Code == 1) {
            this.CourseRateList = res.Data;
          }
        })
      }
    },
  };
</script>
<style lang="scss">
  .listBox{
    height: calc(100% - 90px);
  }
  .xg .el-input--prefix .el-input__inner {
    padding-left: 50px;
  }

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