<style>
  .OtherCourseNum {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    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">
    <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 @change="refreshPage" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="学员名称"
            @clear="refreshPage" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="refreshPage" standout="bg-primary text-white" option-value="ClassId"
            option-label="ClassName" v-model="msg.ClassId" :options="ClassList" emit-value map-options label="班级"
            use-input clearable @filter="filterClass" />
        </div>
        <div class="col-3">
          <q-select @input="refreshPage" standout="bg-primary text-white" option-value="CourseId"
            option-label="CourseName" v-model="msg.CourseId" :options="CourseList" emit-value map-options label="课程"
            use-input clearable @filter="filterCourse">
            <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="refreshPage" standout="bg-primary text-white" option-value="Id" option-label="EmployeeName"
            v-model="msg.EnterID" :options="EmployeeList" emit-value map-options label="关联销售" use-input clearable
            @filter="filterFn">
            <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-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>
          <q-space />
        </template>
        <!--课时-->
        <template v-slot:body-cell-TotalPlanNum="props">
          <q-td :props="props">
            {{props.row.Ranks}}/{{props.row.TotalPlanNum}}
          </q-td>
        </template>
        <template v-slot:body-cell-IsRenewOrder="props">
          <q-td :props="props">
            <span v-if="props.row.IsRenewOrder===1">是</span>
            <span v-if="props.row.IsRenewOrder===0">否</span>
          </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>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" color="accent" style="font-weight:400" label="停课"
                @click="ShowStopLesson(props.row)"  v-if="props.row.GuestState===1"/>
            <q-btn flat size="xs" color="accent" style="font-weight:400" label="课耗明细" @click="goUrl(props.row)" />
            <!-- <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
              <q-list>
                <q-item clickable v-close-popup @click="goUrl(props.row)">
                  <q-item-section>
                    <q-item-label>课耗明细</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown> -->
          </q-td>
        </template>
      </q-table>
       <StopLesson-form  v-if="isShowStopLesson" :setObj="stuObj" @success="reloadPage" @close="closeMenuSaveForm"/>
    </div>

   
  </div>
</template>
<script>
  //获取校区列表
  import {
    getClassDropDownList,
    getSchoolDropdown,
    deleteClass
  } from '../../api/school/index';
  import {
    queryEmployee
  } from '../../api/users/user' //获取销售下拉列表
  import {
    queryCourseDropdownList,
  } from '../../api/course/index' //课程下拉
  import {
    GetStuPageList
  } from "../../api/teacher/student"
  //   import classForm from '../../components/course/class-form';
  //   import classinfoForm from '../../components/course/classinfo-form';
  //   import othercourseForm from '../../components/course/othercourse-form';
  import StopLessonForm from '../../components/teacher/stopLessonForm'
  export default {
    meta: {
      title: "班级管理"
    },
    components: {
      //   classForm,
      //   classinfoForm,
      //   othercourseForm,
      StopLessonForm
    },
    data() {
      return {
        columns: [{
            name: 'GuestName',
            label: '学员名称',
            field: 'GuestName',
            align: 'left',
          },
          {
            name: 'Mobile',
            label: '电话',
            field: 'Mobile',
            align: 'left'
          },
          {
            name: 'ClassName',
            label: '班级名称',
            field: 'ClassName',
            align: 'left'
          },
          {
            name: 'CourseName',
            label: '课程',
            field: 'CourseName',
            align: 'left'
          },
          {
            name: 'TotalPlanNum',
            label: '课程进度',
            field: 'TotalPlanNum',
            align: 'left'
          },

          {
            name: 'IsRenewOrder',
            label: '是否是续课订单',
            field: 'IsRenewOrder',
            align: 'left'
          },
          {
            name: 'RenewOrderId',
            label: '订单号',
            field: 'RenewOrderId',
            align: 'left'
          },
          {
            name: 'GuestStateStr',
            label: '学员状态',
            field: 'GuestStateStr',
            align: 'left'
          },
          {
            name: 'EnterName',
            label: '销售',
            field: 'EnterName',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'CourseId'
          }
        ],
        data: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          Teacher_Id: -1, //老师id
          GuestName: "", //学员名称
          ClassId: 0, //班级
          CourseId: 0, //课程
          EnterID: 0, //销售
        },
        pageCount: 0,
        EmployeeList: [], //销售下拉列表
        AllemployeeList: [],
        CourseList: [], //关联课程下拉数据
        AllCourseList: [],
        ClassList: [], //班级下拉
        allClassList: [],
        isShowStopLesson:false,
        stuObj:{},
      }
    },
    created() {
      let data = JSON.parse(localStorage.getItem("loginUserInfo"))
      if (data) {
        this.msg.Teacher_Id = data.data.AccountId
      }
      this.getEmployee(0);
      this.getCourseList();
      this.getClass()
    },
    mounted() {
      this.getStuPageList();
    },
    methods: {
      //获取销售
      getEmployee(id) {
        var qMsg = {
          Dept_Id: 0
        }
        qMsg.Dept_Id = id;
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            let obj = {
              Id: 0,
              EmployeeName: "不限"
            }
            this.EmployeeList.unshift(obj)
            this.AllemployeeList = JSON.parse(JSON.stringify(this.EmployeeList));
          }
        }).catch(() => {

        })
      },
      //筛选销售
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase();
            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      //获取课程
      getCourseList() {
        queryCourseDropdownList({
          IsQPrice: 1
        }).then(res => {
          if (res.Code == 1) {
            this.CourseList = res.Data;
            var obj = {
              CourseName: '不限',
              CourseId: 0
            }
            this.CourseList.unshift(obj);
            this.AllCourseList = JSON.parse(JSON.stringify(this.CourseList));
          }
        })
      },
      //筛选课程
      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({
          CourseId: 0,
          IsAddDefault: 0, //添加默认选项
        }).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            jsonData.unshift({
              ClassId: 0,
              ClassName: "不限"
            })
            if (jsonData && jsonData.length > 0) {
              this.ClassList = JSON.parse(JSON.stringify(jsonData));
              this.allClassList = JSON.parse(JSON.stringify(jsonData));;
            }
          }
        });
      },
      //筛选班级
      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)
          }
        })
      },
      //获取学员管理列表
      getStuPageList() {
        this.loading = true;
        GetStuPageList(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
        })
      },

      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getStuPageList()
      },

      //刷新页面
      refreshPage() {
        this.msg.pageIndex = 1;
        this.getStuPageList();
      },
      goUrl(i) {
        let path="/teacher/studentsClassSee"
        let queryObj={
            StudentId: i.Id,
            TeacherId: i.Teacher_Id,
            ClassId: i.ClassId
        }
        this.OpenNewUrl(path, queryObj)
        // this.$router.push({
        //   path: "/teacher/studentsClassSee",
        //   query: {
        //     StudentId: i.Id,
        //     TeacherId: i.Teacher_Id,
        //     ClassId: i.ClassId
        //   }
        // })
      },
      //显示弹窗
      ShowStopLesson(item){
        this.isShowStopLesson=true;
        this.stuObj=item
      },
      //关闭弹窗
      closeMenuSaveForm() {
        this.isShowStopLesson = false;
      },
       //刷新页面
      reloadPage() {
        this.isShowStopLesson = false;
        this.getStuPageList();
      },
    }
  }

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