<style>
  li {
    list-style-type: none;
  }

  .stuList ul {
    padding: 0px;
  }

  .stuList li {
    background: rgba(221, 222, 224, 0.2);
    border-radius: 4px;
    margin-top: 15px;
  }

  .stuList li .dline {
    display: table;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .stuList li .d1,
  .stuList li .d2,
  .stuList li .d3,
  .stuList li .d4,
  .stuList li .d5 {
    width: 18%;
    padding: 20px 20px 10px;
  }

  .stuList li .d7 {
    flex: 1;
    width: 1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .stuList li .d1 .di-title {
    font-size: 16px;
    color: #111111;
  }

  .stuList li .d1 .di-c {
    font-size: 14px;
    display: flex;
    line-height: 28px;
    color: #111111;
  }

  .stuList li .d6 {
    padding: 10px 20px;
    width: 100%;
    height: inherit;
    position: relative;
    border-top: 1px solid #dddee0;
  }

  .stuList li .d6 .progress {
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .stuList li .d2 div {
    margin: 2px 0;
    font-size: 14px;
    color: #111111;
  }

  .stuList li .d2-n {
    font-size: 12px;
    color: #999999;
    margin-right: 20px;
  }

  .stuList li .d3 .d3-s {
    color: var(--q-color-negative);
    font-weight: bold;
  }

  .stuList li .d3 div {
    margin: 2px 0;
    font-size: 14px;
  }

  .stuList li .d4 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .stuList li .d5 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .stuList .myCourseNName {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff !important;
    text-align: center;
    line-height: 25px;
    background-color: #004d40;
  }

  .stuList .app-image {
    background-position: center center;
    width: 50px;
    height: 50px;
    border-radius: 0%;
    float: left;
    margin-right: 8px;
  }

  .Sysuser_Date .el-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .Sysuser_Date .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .Sysuser_Date .el-range-editor .el-range-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .el-picker-panel {
    z-index: 99999 !important;
  }

  .syster_qDropdown .q-btn__wrapper {
    padding: 0 3px;
    min-height: 0 !important;
  }

  .editOrderDrawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #f0f5fb;
    padding: 5px 10px;
    align-items: center;
  }
</style>
<template>
  <div class="page-body stuList">
    <div class="row q-mb-md">
      <q-space></q-space>
      <div style="position: relative">
        <q-btn color="accent" label="高级查询" @click="IsShowQuery = true"></q-btn>
        <q-badge floating rounded color="red">{{ queryNum }}</q-badge>
      </div>
    </div>
    <div class="page-search row items-center flex">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select @input="changeSchool" standout="bg-primary text-white" v-model="msg.School_Id" class="col-6"
            option-label="SName" option-value="SId" :options="SchoolList" emit-value map-options label="校区" />
        </div>
        <div class="col-3">
          <q-select @input="changeCourse" standout="bg-primary text-white" v-model="msg.CourseId" class="col-6"
            option-label="CourseName" option-value="CourseId" use-input :options="CourseList" @filter="filterCourse"
            emit-value map-options label="课程" clearable>
            <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">
          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.ClassId" class="col-6" use-input
            @filter="filterClass" option-label="ClassName" option-value="ClassId" :options="classList" emit-value
            map-options label="班级" clearable>
            <template v-slot:option="{
                itemProps,
                itemEvents,
                opt,
                selected,
                toggleOption,
              }">
              <q-item v-bind="itemProps" v-on="itemEvents">
                <q-item-section>
                  <q-item-label v-html="opt.ClassName"></q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-item-label v-html="opt.OpenTime"></q-item-label>
                </q-item-section>
              </q-item>
            </template>
            <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">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="学员姓名"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.GuestState" class="col-6"
            option-label="Name" option-value="Id" use-input :options="GuestStateList" emit-value map-options
            label="学员状态" clearable>
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-tow-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
        row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">学员名单</div>
        </template>
        <template v-slot:body-cell-ContractNo="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="seeContract(props.row)">
              {{ props.row.ContractNo }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-ClassName="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="seeClassDetail(props.row)">
              {{ props.row.ClassName }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-OrderId="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="showOrderDetail(props.row, 1)">
              {{ props.row.OrderId }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-Income="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="showOrderDetail(props.row, 4)">
              {{ props.row.Income }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-Refund="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="showOrderDetail(props.row, 4)">
              {{ props.row.Refund }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-CompleteHours="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="seeStudentsClassUse(props.row)">
              {{ props.row.CompleteHours }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-MakeUpHours="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="showList(props.row, 1)">
              {{ props.row.MakeUpHours }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-AbsenceNum="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="showList(props.row, 2)">
              {{ props.row.AbsenceNum }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-LeaveNum="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="showList(props.row, 3)">
              {{ props.row.LeaveNum }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-EventlogNum="props">
          <q-td :props="props">
            <div style="color: #f00; cursor: pointer" @click="showEventLog(props.row)">
              {{ props.row.EventlogNum }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div>
              <q-btn flat size="xs" color="accent" style="font-weight: 400" label="停课" v-if="props.row.GuestState === 1"
                @click="ShowStopLesson(props.row)" />
              <q-btn flat size="xs" color="accent" style="font-weight: 400" label="转班" v-if="props.row.GuestState === 1"
                @click="transferClass(props.row, 1)" />
              <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left: 10px">
                <q-list>
                  <q-item clickable v-close-popup @click="showAddEvent(props.row)">
                    <q-item-section>
                      <q-item-label>添加事件</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </div>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
    <!-- 高级查询 -->
    <MoreQuery v-if="IsShowQuery" :typeEnum="typeEnum" :warnEnum="warnEnum" :saveQuery="msg" @close="closeHandle"
      @success="morequery">
    </MoreQuery>
    <!-- 停课申请 -->
    <StopLesson-form v-if="isShowStopLesson" :setObj="stuObj" @success="resetSearch" @close="closeHandle" />
    <!-- 转班申请 -->
    <transferclass-form v-if="isShowTransferClass" :save-obj="orderObj" :ChangeType="ChangeType" @close="closeHandle"
      @success="resetSearch"></transferclass-form>
    <!-- 添加事件 -->
    <AddEvent-form v-if="isShowAddEvent" :setObj="eventObj" @success="resetSearch" @close="closeHandle" />
    <!-- 班级详情 -->
    <classinfo-form v-if="isShowClassInfo" :seting-obj="eventObj" @close="closeHandle" @success="refreshPage" />
    <!-- 订单详情 -->
    <myOrder-form v-if="isShowmyorderForm" :save-obj="eventObj" @close="closeHandle"></myOrder-form>
    <!-- 可补课课时，缺勤次数，请假次数 -->
    <list v-if="isShowList" :type="showType" :set-obj="eventObj" @close="closeHandle" />
    <!-- 事件记录 -->
    <eventLog v-if="isShowEventLog" :set-obj="eventObj" @modify="modifyEvent" @close="closeHandle" />
  </div>
</template>
<script>
  import {
    getSchoolDropdown,
    getClassDropDownList,
  } from "../../api/school/index";
  import {
    queryCourseDropdownList
  } from "../../api/course/index";
  import {
    getStuList,
    getEarlyWarningEnum,
    getTypeEnum,
  } from "../../api/stuMan/index.js";
  import {
    queryGuestStateList
  } from "../../api/sale/sale.js";
  import MoreQuery from "../../components/stuMan/moreQuery.vue";
  import StopLessonForm from "../../components/teacher/stopLessonForm";
  import transferclassForm from "../../components/sale/transferclass-form"; //转班信息
  import AddEventForm from "../../components/stuMan/addEvent-form.vue"; //转班信息
  import classinfoForm from "../../components/course/classinfo-form"; //班级详情
  import myOrderForm from "../../components/sale/myOrder-form"; //订单详情
  import list from "../../components/stuMan/makeUpHours.vue"; //可补课课时，缺勤次数，请假次数
  import eventLog from "../../components/stuMan/eventRecord.vue"; //事件记录
  export default {
    meta: {
      title: "学员名单",
    },
    components: {
      MoreQuery,
      StopLessonForm,
      transferclassForm,
      AddEventForm,
      classinfoForm,
      myOrderForm,
      list,
      eventLog,
    },
    data() {
      return {
        IsShowQuery: false,
        data: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          School_Id: '', //校区
          CourseId: 0, //课程
          ClassId: 0, //班级
          GuestName: "", //学生姓名
          ClassNo: "", //班号
          OrderId: 0, //订单号
          EnterID: 0, //业务员
          EffectStatus: "", //状态
          JoinType: 0, //类型
          EarlyWarning: 0, //预警
          OrderTime: "", //下单时间
          EndOrderTime: "", //下单结束时间
          GuestState: "", //学员状态
        },
        pageCount: 0,
        columns: [{
            name: "Id",
            label: "编号",
            field: "Id",
            align: "left",
            required: true,
          },
          {
            name: "GuestName",
            label: "姓名",
            align: "left",
            field: "GuestName",
            required: true,
          },
          {
            name: "Mobile",
            label: "电话",
            align: "left",
            field: "Mobile",
          },
          {
            name: "ContractNo",
            label: "合同编号",
            align: "left",
            field: "ContractNo",
          },
          {
            name: "ClassName",
            label: "班级",
            align: "left",
            field: "ClassName",
          },
          {
            name: "CourseName",
            label: "课程",
            align: "left",
            field: "CourseName",
          },
          {
            name: "TeacherName",
            label: "老师",
            align: "left",
            field: "TeacherName",
          },
          {
            name: "OrderId",
            label: "订单号",
            align: "left",
            field: "OrderId",
          },
          {
            name: "OrderTime",
            label: "报名时间",
            align: "left",
            field: "OrderTime",
          },
          {
            name: "EnterName",
            label: "业务员",
            field: "EnterName",
            align: "left",
          },
          {
            name: "PreferPrice",
            label: "应收金额",
            field: "PreferPrice",
            align: "left",
          },
          {
            name: "Income",
            label: "实收金额",
            field: "Income",
            align: "left",
          },
          {
            name: "Refund",
            label: "退款金额",
            field: "Refund",
            align: "left",
          },
          {
            name: "TotalHours",
            label: "课程总课时",
            field: "TotalHours",
            align: "left",
          },
          {
            name: "ValidClassHours",
            label: "有效课时",
            field: "ValidClassHours",
            align: "left",
          },
          {
            name: "CompleteHours",
            label: "消耗课时",
            field: "CompleteHours",
            align: "left",
          },
          {
            name: "SurplusHours",
            label: "剩余课时",
            field: "SurplusHours",
            align: "left",
          },
          {
            name: "MakeUpHours",
            label: "可补课课时",
            field: "MakeUpHours",
            align: "left",
          },
          {
            name: "AbsenceNum",
            label: "缺勤次数",
            field: "AbsenceNum",
            align: "left",
          },
          {
            name: "LeaveNum",
            label: "请假次数",
            field: "LeaveNum",
            align: "left",
          },
          {
            name: "EventlogNum",
            label: "事件记录",
            field: "EventlogNum",
            align: "left",
          },
          {
            name: "GuestStateStr",
            label: "状态",
            field: "GuestStateStr",
            align: "left",
          },
          {
            name: "GraduationTime",
            label: "毕业时间",
            field: "GraduationTime",
            align: "left",
          },
          {
            name: "CourseRateName",
            label: "毕业课程等级",
            field: "CourseRateName",
            align: "left",
          },
          {
            name: "JoinTypeStr",
            label: "类型",
            field: "JoinTypeStr",
            align: "left",
          },
          {
            name: "optioned",
            label: "操作",
            required: true,
            align: "left",
          },
        ],
        SchoolList: [],
        CourseList: [],
        AllCourseList: [],
        classList: [],
        AllClassList: [],
        queryClass: {
          CourseId: 0,
          IsAddDefault: 1,
          SchoolId: '',
          Teacher_Id: 0,
          MoreStatus: "1,2,3",
          IsQuerySurplusPlan: 0,
        },
        typeEnum: [],
        warnEnum: [],
        queryNum: 0, //高级查询个数
        isShowStopLesson: false,
        stuObj: {}, //停课
        isShowTransferClass: false, //是否显示转班
        orderObj: {}, //转班
        ChangeType: 1, //1-转班 2-分拆
        isShowAddEvent: false, //是否显示添加事件
        eventObj: {},
        isShowClassInfo: false, //是否显示班级详情
        isShowmyorderForm: false, //是否显示订单详情
        isShowList: false, //是否显示可补课课时，缺勤次数，请假次数
        showType: 1,
        isShowEventLog: false, //是否显示事件记录
        GuestStateList: [], //学员状态列表

      };
    },
    created() {
      this.getGuestStateList();
    },
    mounted() {
      this.getSchool();
      this.getCourseList();
      this.getClass();
      this.getTypeEnum();
      this.getEarlyWarningEnum();
      this.getList();
    },
    methods: {
      //获取学员状态列表
      getGuestStateList() {
        queryGuestStateList({}).then(res => {
          this.GuestStateList = res.Data;
        })
      },
      //获取校区下拉
      getSchool() {
        getSchoolDropdown({}).then((res) => {
          if (res.Code == 1) {
            this.SchoolList = res.Data;
          }
        });
      },
      //获取课程
      getCourseList() {
        queryCourseDropdownList({}).then((res) => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              CourseId: 0,
              CourseName: "不限",
            });
            this.CourseList = tempArray;
            this.AllCourseList = tempArray;
          }
        });
      },
      //   筛选课程
      filterCourse(val, update) {
        update(() => {
          if (val === "") {
            this.CourseList = JSON.parse(JSON.stringify(this.AllCourseList));
          } else {
            const needle = val.toLowerCase();
            this.CourseList = this.AllCourseList.filter(
              (v) => v.CourseName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取班级
      getClass() {
        getClassDropDownList(this.queryClass).then((res) => {
          this.classList = [];
          this.msg.ClassId = 0;
          if (res.Code == 1) {
            this.classList = res.Data;
            this.AllClassList = res.Data;
            var obj = {
              ClassName: "不限",
              ClassId: 0,
            };
            this.classList.unshift(obj);
          }
        });
      },
      //筛选班级
      filterClass(val, update) {
        update(() => {
          if (val === "") {
            this.classList = JSON.parse(JSON.stringify(this.AllClassList));
          } else {
            const needle = val.toLowerCase();
            this.classList = this.AllClassList.filter(
              (v) => v.ClassName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      changeSchool(val) {
        this.queryClass.SchoolId = val;
        this.getClass();
        this.resetSearch();
      },
      changeCourse(val) {
        this.queryClass.CourseId = val;
        this.getClass();
        this.resetSearch();
      },
      getList() {
        this.loading = true;
        getStuList(this.msg)
          .then((res) => {
            this.loading = false;
            if (res.Code === 1) {
              this.data = res.Data.PageData;
              this.pageCount = res.Data.PageCount;
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      },
      //显示停课弹窗
      ShowStopLesson(item) {
        this.isShowStopLesson = true;
        this.stuObj = item;
      },

      //   高级查询
      morequery(val) {
        this.IsShowQuery = false;
        this.queryNum = val.chooseNum;
        this.msg.ClassNo = val.ClassNo;
        this.msg.OrderId = val.OrderId;
        this.msg.EnterID = val.EnterID;
        this.msg.EffectStatus = val.EffectStatus;
        this.msg.JoinType = val.JoinType;
        this.msg.EarlyWarning = val.EarlyWarning;
        this.msg.OrderTime = val.OrderTime;
        this.msg.EndOrderTime = val.EndOrderTime;
        this.resetSearch();
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //关闭弹窗
      closeHandle() {
        this.IsShowQuery = false;
        this.isShowStopLesson = false;
        this.isShowTransferClass = false;
        this.isShowAddEvent = false;
        this.isShowClassInfo = false;
        this.isShowmyorderForm = false;
        this.isShowList = false;
        this.isShowEventLog = false;
        this.isShowEventLog = false;
      },
      //刷新页面
      refreshPage() {
        this.closeHandle();
        this.getList();
      },
      goUrl(url, item) {
        if (item) {
          this.$router.push({
            path: url,
            query: {
              Id: item.Id,
            },
          });
        } else {
          this.$router.push({
            path: url,
            query: {
              Id: 0,
            },
          });
        }
      },
      goUrl1(url, item) {
        this.$router.push({
          path: url,
          query: {
            Id: item.Id,
            name: item.ActivityName,
          },
        });
      },
      getTypeEnum() {
        getTypeEnum({}).then((res) => {
          if (res.Code === 1) {
            res.Data.unshift({
              Name: "不限",
              Id: 0,
            });
            this.typeEnum = res.Data;
          }
        });
      },
      getEarlyWarningEnum() {
        getEarlyWarningEnum({}).then((res) => {
          if (res.Code === 1) {
            this.warnEnum = res.Data;
          }
        });
      },
      //转班
      transferClass(item, type) {
        this.orderObj = item;
        this.ChangeType = type;
        this.isShowTransferClass = true;
      },
      //显示添加事件
      showAddEvent(item) {
        let newitem = JSON.parse(JSON.stringify(item));
        // Id和修改的Id冲突 自定义学生id=STUID
        newitem.STUID = newitem.Id;
        newitem.Id = 0;
        this.eventObj = newitem;
        this.isShowAddEvent = true;
      },
      //查看合同
      seeContract(item) {
        this.OpenNewUrl("/contractView", {
          ContractId: item.ContractId
        });
      },
      //查看课时消耗
      seeStudentsClassUse(item) {
        let obj = {
          StudentId: item.Id,
          TeacherId: item.Teacher_Id,
          ClassId: item.ClassId,
        };
        this.OpenNewUrl("/teacher/studentsClassSee", obj);
      },
      //查看班级详情
      seeClassDetail(item) {
        this.eventObj = item;
        this.isShowClassInfo = true;
      },
      //查看订单详情
      showOrderDetail(item, tab) {
        item.tab = tab;
        this.eventObj = item;
        this.isShowmyorderForm = true;
      },
      showList(item, type) {
        this.eventObj = item;
        this.showType = type;
        this.isShowList = true;
      },
      showEventLog(item) {
        this.eventObj = item;
        this.isShowEventLog = true;
      },
      // 修改事件
      modifyEvent(val) {
        this.closeHandle();
        this.eventObj = val;
        this.isShowAddEvent = true;
      },
    },
  };
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>