<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-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.StuRealMobile" label="电话"
            maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.QQ" label="QQ"
            maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.WeChatNo" label="微信号"
            maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled v-model="msg.StuType" dense clearable :options="customTypeList"
            option-label="Name" option-value="Id" emit-value map-options label="客户类型" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" dense filled v-model="msg.AdvisorStatus" :options="AdvConfigList"
            option-label="Name" option-value="Id" emit-value map-options label="当前状态" clearable />
        </div>
        <div class="col-3">
          <q-select filled v-model="msg.StuPurpose" dense @input="resetSearch" clearable :options="goalsList"
            option-label="Name" option-value="Id" emit-value map-options label="学习目的" />
        </div>
        <div class="col-3">
          <q-field filled dense>
            <template v-slot:control>
              <el-date-picker v-model="dateArray" size="mini" @change="resetSearch" value-format="yyyy-MM-dd"
                type="daterange" style="border:none;" range-separator="至" start-placeholder="跟进开始时间"
                end-placeholder="跟进结束时间" />
            </template>
          </q-field>
        </div>
        <template v-if="morequery">
          <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 @input="resetSearch" filled option-value="CourseId" option-label="CourseName"
              v-model="msg.CourseId" clearable emit-value use-input :options="myCourseList" label="课程" dense map-options
              @filter="filterFnkec" />
          </div>
          <div class="col-3" v-if="false">
            <q-select @input="resetSearch" dense filled option-value="Id" option-label="EmployeeName"
              v-model="msg.ConsultantId" clearable :options="RoleListData" emit-value map-options label="课程顾问" />
          </div>
          <div class="col-3">
            <q-select @input="resetSearch" dense filled option-value="Id" option-label="Name"
              v-model="msg.StuGuestState" clearable :options="hetongList" emit-value map-options label="合同状态" />
          </div>
          <div class="col-3">
            <q-select @input="msg.StuSourceId='',msg.StuChannel='',resetSearch()" dense clearable filled
              option-value="Id" option-label="Name" v-model="msg.CreateType" :options="customFromList" emit-value
              map-options label="客户来源" />
          </div>
          <div class="col-3" v-if="msg.CreateType==1">
            <q-select filled v-model="msg.StuChannel" @input="resetSearch" label="收客渠道" dense :options="StuChannelList"
              option-label="Name" option-value="Id" emit-value map-options use-input clearable
              @filter="filterStuChannel">
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    未找到相关数据
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="col-3" v-if="msg.CreateType==2">
            <q-select filled v-model="msg.StuSourceId" dense :options="customList" use-input label="关联同行"
              @filter="filterFn" option-label="CustomerName" @input="resetSearch" clearable option-value="CustomerId"
              emit-value map-options>
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    未找到相关数据
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="col-3" v-if="msg.CreateType==3">
            <q-select filled v-model="msg.StuSourceId" dense @filter="filterEmployee" label="介绍人" use-input
              :options="myEmployeeList" option-label="EmployeeName" @input="resetSearch" clearable option-value="Id"
              emit-value map-options />
          </div>
          <div class="col-3" v-if="msg.CreateType==4">
            <q-select filled v-model="msg.StuSourceId" dense use-input @filter="filterStudent" label="转介人"
              :options="MyTransListData" option-label="StuName" @input="resetSearch" clearable option-value="StuId"
              emit-value map-options />
          </div>
          <div class="col-3">

            (
            <q-radio size="xs" v-model="msg.Q_FType" val="1" label="范围内有跟进记录" @input='resetSearch' />
            <q-radio size="xs" v-model="msg.Q_FType" val="2" label="范围内没有跟进记录" @input='resetSearch' />）
          </div>
        </template>
      </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 style="margin-right:5px;color: #089bab;">高级查询</span>
        <img v-show="!morequery" style="width:12px;height:12px" src="../../assets/images/more.png" alt="">
        <img v-show="morequery" class="roatImg" style="width:12px;height:12px" src="../../assets/images/more.png"
          alt="">
      </span>
    </div>
    <div class="col row wrap q-gutter-x-md" v-if="dataList&&dataList.Stat">
      <div class="col stics">
        <span class="stics-name">学生总数</span>
        <span>{{dataList.Stat.StuTNum?dataList.Stat.StuTNum:0}}人</span>
      </div>
      <div class="col stics">
        <span class="stics-name">续费数量</span>
        <span style="color: #F72E52">{{dataList.Stat.RenewNum?dataList.Stat.RenewNum:0}}人</span>
      </div>
      <div class="col stics">
        <span class="stics-name">新生数量</span>
        <span style="color:#2961FE;">{{dataList.Stat.NewNum?dataList.Stat.NewNum:0}}人</span>
      </div>
      <div class="col stics">
        <span class="stics-name">学习中数量</span>
        <span>{{dataList.Stat.StudyNum?dataList.Stat.StudyNum:0}}人</span>
      </div>
      <div class="col stics">
        <span class="stics-name">毕业数量</span>
        <span>{{dataList.Stat.GraduateNum?dataList.Stat.GraduateNum:0}}人</span>
      </div>
      <div class="col stics">
        <span class="stics-name">停课数量</span>
        <span>{{dataList.Stat.SuspendNum?dataList.Stat.SuspendNum:0}}人</span>
      </div>
      <div class="col stics">
        <span class="stics-name">退学数量</span>
        <span>{{dataList.Stat.DropOutNum?dataList.Stat.DropOutNum:0}}人</span>
      </div>
    </div>
    <div style="width: 100%;margin-top: 20px">
      <stufollowlist :dataObj="dataList" :RListlength="RListlength" @success="refreshPage" :titlelist="titlelist"
        :loading="loading" ref="stuFollowList"></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 {
    getStudentFollowUpPageList,
  } from '../../api/studyabroad/index'
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  import {
    queryEmployee
  } from "../../api/users/user";
  import {
    queryGuestStateList,
    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/stufollowlist";

  import {
    mapState
  } from "vuex";

  export default {
    meta: {
      title: "课程顾问学员跟踪"
    },
    props: {},
    components: {
      stufollowlist
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StuName: "",
          StuRealMobile: '',
          QQ: '',
          WeChatNo: '',
          StuType: '', //学生类型
          StuGuestState: '', //合同状态
          SFTime: '',
          EFTime: '',
          StuStage: '', //客户状态
          Q_FType: '1', //跟进类型 1范围内有跟进记录 2范围内没有跟进记录	
          CreateIds: [],
          School_Id: '-1', //校区
          CourseId: '', //课程
          ConsultantId: '', //课程顾问
          CreateType: '', //客户来源
          StuChannel: "", //收客渠道
          StuSourceId: '',
          StuPurpose: '', //学习目的,
          QueryTpye: 1,//课程顾问部查询
          AdvisorStatus: "", //当前状态
        },
 
        loading: false,
        dataList: null, //列表数据
        PageCount: 0,
        customTypeList: [], //客户类型
        customState: [],
        isMyStuList: [{
          Id: '-1',
          Name: '不限'
        }, {
          Id: '1',
          Name: '是'
        }, {
          Id: '0',
          Name: '否'
        }, ],
        hetongList: [{
          Id: '1',
          Name: '正常'
        }, {
          Id: '2',
          Name: '退学'
        }, {
          Id: '5',
          Name: '停课'
        }, {
          Id: '7',
          Name: '毕业'
        }, ],
        dateArray: [], //日期数组
        RListlength: 0,
        titlelist: [],
        SubordList: [], //我的下属数据
        AllSubordList: [],
        morequery: true,
        CompanyList: [],
        allCourseList: [], //课程
        myCourseList: [],
        RoleListData: [], //课程顾问下拉数据
        customFromList: [], //客户来源
        StuChannelList: [], //收客渠道
        allStuChannelList: [], //所有收客渠道
        customList: [], //同行列表
        allCustomList: [], //所有同行列表
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        TransListData: [], //转介人数据
        MyTransListData: [],
        goalsList: [], //学习目的列表
        AdvConfigList: [], //客户状态列表
      }
    },
    created() {
      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.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: {
      //获取状态列表
      getAdvConfigList() {
        let msg = {
          Name: ''
        }
        GetStudentAdvisorConfigList(msg).then(res => {
          if (res.Code == 1) {
            this.AdvConfigList = res.Data;
          }
        })
      },
      //刷新页面
      refreshPage() {
        this.getList()
      },
      downloadStudentFollow() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        this.loading = true;
        EduDownLoad(
          "/StudentStat/DownLoadStudentFollowUp",
          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
        }
        getStudentFollowUpPageList(msg).then(res => {
            this.loading = false;
            this.RListlength = res.Data.PageData && res.Data.PageData.MaxMonth ? res.Data.PageData.MaxMonth : 1;
            var titlelist = [{
              Name: '月份/续费/转介',
              Id: 1,
              index: 0
            }, {
              Name: '教师跟踪时间及情况说明',
              Id: 2,
              index: 0
            }, {
              Name: '顾问跟踪时间及情况说明',
              Id: 3,
              index: 0
            }, ];
            this.dataList = res.Data.PageData;
            this.PageCount = res.Data.PageCount;
            titlelist = [];
            for (let i = 0; i < this.RListlength; i++) {
              let obj = [{
                Name: '月份/续费/转介',
                Id: 1,
                index: i
              }, {
                Name: '教师跟踪时间及情况说明',
                Id: 2,
                index: i
              }, {
                Name: '顾问跟踪时间及情况说明',
                Id: 3,
                index: i
              }, ]
              titlelist = [...titlelist, ...obj]
            }
            this.titlelist = titlelist;
          })
          .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>