<style scoped>
  @import "../financial/css/cssReset.css";

  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .singeRowTable tr th {
    border: 1px solid #d2d2d2;
  }

  .studentTracking td:first-child {
    background-color: #E6E6E6;
    position: sticky;
    left: 0px;
  }

  .studentTracking th:first-child {
    position: sticky;
    left: 0px;
  }

  .stulistNumber {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

  .OCourseTable {
    width: 400px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

  .OCourseTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

</style>
<template>
  <div class="page-body studentTracking">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.StuName" label="昵称"
            maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" dense filled option-value="SId" option-label="SName" v-model="msg.School_Id"
            :options="CompanyList" emit-value map-options label="校区" />
        </div>
        <div class="col-3">
          <q-select filled v-model="msg.QGuestState" dense use-input label="状态" :options="isMyStuList"
            option-label="Name" @input="resetSearch" clearable option-value="Id" emit-value map-options />
        </div>
        <div class="col-3">
          <q-select filled v-model="msg.HeadTeacherId" dense use-input label="班主任" :options="MyTeacherListData"
            option-label="EmployeeName" @input="resetSearch" clearable option-value="Id" @filter="filterTeacher"
            emit-value map-options />
        </div>
      </div>
    </div>
    <div style="width: 100%;text-align: right;padding: 0 20px;margin-bottom: 10px;">
      <span @click="morequery=!morequery" style="display:inline-flex;align-items:center;cursor: pointer;">
        <q-btn color="accent" class="q-mr-md" size="sm" icon="download" label="下载" v-if="isHaveDownLoad"
          @click="downloadStudentFollow" />
      </span>
    </div>
    <div style="width: 100%;margin-top: 20px">
      <stufollowlist :dataObj="dataList" :RListlength="RListlength" @success="refreshPage" :titlelist="titlelist"
        :loading="loading" ref="stuFollowList" :AuthObj="AuthObj"></stufollowlist>
      <q-pagination v-if='dataList&&dataList.RList && dataList.RList.length>0' class="full-width justify-end"
        v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true" @input="changePage" />
    </div>
  </div>
</template>
<script>
  import {
    GetStudentFollowUpPageNewList,
  } from '../../api/studyabroad/index'
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  import {
    queryEmployee,
  } from "../../api/users/user";
  import {
    CreateTypeList,
    GetStuChannelList,
    GetCustomerList,
    getGuestLearningGoalsEnumList
  } from "../../api/sale/sale.js";
  import {
    queryStuStageList,
    GetStudentTypeList,
    GetPersonalDimension,
    getSchoolDropdown,
    getStudentDorpDownList
  } from "../../api/school/index";
  import {
    EduDownLoad
  } from "../../api/common/common";
  import {
    GetStudentAdvisorConfigList,
  } from "../../api/customerstudent/customerstudent";
  import stufollowlist from "../../components/school/student/stufollowlistNew";
  import {
    mapState
  } from "vuex";

  export default {
    meta: {
      title: "教师学员跟踪"
    },
    props: {},
    components: {
      stufollowlist
    },
    data() {
      return {
        AccountType: 2,
        IsLeave: 1,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StuName: "",
          School_Id: '-1', //校区
          HeadTeacherId: '', //老师
          QueryTpye: 2, //老师查询
          QGuestState: 0, //学员状态
        },
        loading: false,
        dataList: null, //列表数据
        PageCount: 0,
        customTypeList: [], //客户类型
        customState: [],
        isMyStuList: [{
          Id: '-1',
          Name: '不限'
        }, {
          Id: '1',
          Name: '未毕业'
        }, {
          Id: '2',
          Name: '已毕业'
        }],

        dateArray: [], //日期数组
        RListlength: 0,
        titlelist: [],
        SubordList: [], //我的下属数据
        AllSubordList: [],
        morequery: true,
        CompanyList: [],
        allCourseList: [], //课程
        myCourseList: [],
        RoleListData: [], //课程顾问下拉数据
        customFromList: [], //客户来源
        StuChannelList: [], //收客渠道
        allStuChannelList: [], //所有收客渠道
        customList: [], //同行列表
        allCustomList: [], //所有同行列表
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        TransListData: [], //转介人数据
        MyTransListData: [],
        goalsList: [], //学习目的列表
        MyTeacherListData: [], //查询老师列表
        AllTeacherList: [], //所有教师
        AdvConfigList: [], //客户状态列表
        AuthObj: {
          isShowSaleInfo: false,
        }
      }
    },
    created() {
      if (this.$route.query) {
        if (this.$route.query.HeadTeacherId) {
          this.msg.HeadTeacherId = parseInt(this.$route.query.HeadTeacherId)
        }
        if (this.$route.query.StartTime) {
          this.dateArray.push(this.$route.query.StartTime);
        }
        if (this.$route.query.EndTime) {
          this.dateArray.push(this.$route.query.EndTime);
        }
      }
      this.getStuStageList();
      this.getCustomTypeList();
      this.GetSubordList();
      this.getBranchList();
      this.getCourseList(); //获取课程下拉
      this.getRole();
      this.getCustomFrom();
      this.GetStuChannelList();
      this.GetCustomerList();
      this.getEmployeeList();
      this.getStudentDorpDown();
      this.queryGoalsList();
      this.findData();
      this.getAdvConfigList();
    },
    computed: mapState({
      //是否有下载权限
      isHaveDownLoad(state) {
        if (state.user.userInfo && state.user.userInfo.ActionMenuList && state.user.userInfo.ActionMenuList.length >
          0) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "studentTracking_download") {
              return x;
            }
          });
          return action && action.FunctionCode;
        }
        return false;
      }
    }),
    mounted() {
      this.getList(); //获取列表
    },
    methods: {
      filterTeacher(val, update) {
        update(() => {
          if (val === "") {
            this.MyTeacherListData = JSON.parse(JSON.stringify(this.AllTeacherList));
          } else {
            const needle = val.toLowerCase();
            this.MyTeacherListData = this.AllTeacherList.filter(
              v => v.EmployeeName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取状态列表
      getAdvConfigList() {
        let msg = {
          Name: ''
        }
        GetStudentAdvisorConfigList(msg).then(res => {
          if (res.Code == 1) {
            this.AdvConfigList = res.Data;
          }
        })
      },
      //刷新页面
      refreshPage() {
        this.getList()
      },
      //获取班主任
      findData() {
        queryEmployee({
          AccountTypeStr: "2",
          IsLeave: 1
        }).then(res => {
          if (res.Code == 1) {
            this.MyTeacherListData = res.Data;
            this.AllTeacherList = res.Data;
          }
        })
      },
      downloadStudentFollow() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        this.loading = true;
        EduDownLoad(
          "/StudentStat/DownLoadStudentFollowUpNew",
          msg,
          "教师学员跟踪.xls", res => {
            this.loading = false;
          }
        );
      },
      //获取学习目的列表
      queryGoalsList() {
        getGuestLearningGoalsEnumList({}).then(res => {
          this.goalsList = res.Data;
        });
      },
      //获取收客渠道
      GetStuChannelList() {
        GetStuChannelList({}).then(res => {
          if (res.Code == 1) {
            this.StuChannelList = res.Data;
            this.allStuChannelList = res.Data;
          }
        });
      },
      //筛选渠道
      filterStuChannel(val, update) {
        update(() => {
          if (val === "") {
            this.StuChannelList = JSON.parse(
              JSON.stringify(this.allStuChannelList)
            );
          } else {
            const needle = val.toLowerCase();
            this.StuChannelList = this.allStuChannelList.filter(
              v => v.Name.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取客户来源
      getCustomFrom() {
        CreateTypeList({}).then(res => {
          if (res.Code == 1) {
            this.customFromList = res.Data;
          }
        });
      },
      //获取客户下拉数据
      GetCustomerList() {
        let msg = {
          QCreateBy: 0
        };
        GetCustomerList(msg).then(res => {
          if (res.Code == 1) {
            this.customList = res.Data;
            this.allCustomList = res.Data;
          }
        });
      },
      //筛选客户
      filterFn(val, update) {
        update(() => {
          if (val === "") {
            this.customList = JSON.parse(JSON.stringify(this.allCustomList));
          } else {
            const needle = val.toLowerCase();
            this.customList = this.allCustomList.filter(
              v => v.CustomerName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取员工列表
      getEmployeeList() {
        queryEmployee({
          IsLeave: 1
        }).then(res => {
          this.employeeList = res.Data;
          this.myEmployeeList = res.Data;
        });
      },
      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      },
      //获取转介人下拉
      getStudentDorpDown() {
        getStudentDorpDownList().then(res => {
          if (res.Code == 1) {
            this.TransListData = res.Data;
            this.MyTransListData = res.Data;
          }
        });
      },
      //筛选转介人
      filterStudent(val, update, abort) {
        update(() => {
          this.MyTransListData = this.TransListData.filter(
            v => v.StuName.indexOf(val) > -1
          );
        });
      },
      getRole() {
        queryEmployee({
          IsLeave: 1,
          UserRole: 2
        }).then(res => {
          this.RoleListData = res.Data;
        });
      },
      getBranchList() { //获取校区
        getSchoolDropdown({}).then(res => {
          var tempArray = res.Data;
          if (!tempArray) {
            tempArray = [];
          }
          tempArray.unshift({
            SId: '-1',
            SName: "不限"
          })
          this.CompanyList = tempArray;
        }).catch(() => {

        })
      },
      //获取课程
      getCourseList() {
        queryCourseDropdownList({
          IsQPrice: 1
        }).then(res => {
          if (res.Code == 1) {
            let data = res.Data
            this.allCourseList = JSON.parse(JSON.stringify(data));
            this.myCourseList = JSON.parse(JSON.stringify(data));
          }
        })
      },
      //获取我下属的下拉数据
      GetSubordList() {
        GetPersonalDimension().then(res => {
          if (res.Code == 1) {
            this.SubordList = res.Data;
            this.AllSubordList = res.Data;
          }
        });
      },
      //筛选转介人
      filterSubord(val, update, abort) {
        update(() => {
          this.SubordList = this.AllSubordList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      getList() {
        this.loading = true;
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (this.dateArray && this.dateArray.length > 0) {
          msg.SFTime = this.dateArray[0];
          msg.EFTime = this.dateArray[1];
        } else {
          msg.SFTime = "";
          msg.EFTime = "";
        }
        if (msg.StuType == '' || msg.StuType == null) {
          msg.StuType = 0
        }
        if (msg.StuGuestState == '' || msg.StuGuestState == null) {
          msg.StuGuestState = 0
        }
        if (msg.StuStage == '' || msg.StuStage == null) {
          msg.StuStage = 0
        }
        if (msg.ConsultantId == '' || msg.ConsultantId == null) {
          msg.ConsultantId = 0
        }
        if (msg.StuChannel == '' || msg.StuChannel == null) {
          msg.StuChannel = 0
        }
        if (msg.CreateType == '' || msg.CreateType == null) {
          msg.CreateType = 0
        }
        if (msg.StuSourceId == '' || msg.StuSourceId == null) {
          msg.StuSourceId = 0
        }
        GetStudentFollowUpPageNewList(msg).then(res => {
            this.loading = false;
            this.RListlength = res.Data.PageData && res.Data.PageData.MaxMonth ? res.Data.PageData.MaxMonth : 1;
            var pageData = res.Data.PageData;
            this.dataList = pageData;
            this.PageCount = res.Data.PageCount;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      //获取客户类型
      getCustomTypeList() {
        GetStudentTypeList().then(res => {
          if (res.Code == 1) {
            this.customTypeList = res.Data;
          }
        })
      },
      //获取客户阶段列表
      getStuStageList() {
        queryStuStageList().then(res => {
          this.customState = res.Data;
        });
      },
      filterFnkec(val, update) { //课程的栓选
        update(() => {
          if (val === '') {
            this.myCourseList = this.allCourseList
          } else {
            const needle = val.toLowerCase();
            this.myCourseList = this.allCourseList.filter(v => v.CourseName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
<style scoped>
  /deep/.el-input__inner,
  /deep/.el-range-input {
    background-color: transparent;
    border: none;
  }

  .stics {
    padding: 10px 20px;
    background: #DDDEE0;
    border-radius: 4px;
    font-size: 13px;
    color: #000000;
    font-weight: bold
  }

  .stics .stics-name {
    color: #2D2D2D;
    font-weight: 600;
    margin-right: 10px
  }

  .roatImg {
    transform: rotate(180deg);
  }

</style>
