<style lang="scss">
  .stuList .q-table__bottom {
    min-height: 0;
  }

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

  .stuListTable {
    width: 200px;
    text-align: center;
  }

  .stuListTable tr td {
    height: 40px;
  }

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

  .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: 600px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

  .OCourseTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }
</style>
<template>
  <div class="stuList" :style="{ height: height }">
    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat
     
      :style="{ height: height }" class="sticky-right-column-table sticky-tow-column-table"
      :class="{ 'my-sticky-header-table': height != 'unset' }" separator="none" :data="dataList" :columns="columns"
      row-key="StuId" hide-bottom>
      <template v-if="showHeader" v-slot:top>
        <div class="col-2 q-table__title">学员信息
          <template v-if="Count>0">(共{{Count}}条)</template>
        </div>
        <q-space />
        <div class="page-option" v-if="!pushMode">
      
          <q-btn color="accent" class="q-mr-md" size="sm" icon="download"
            label="下载" @click="DownLoadStuLearnChapterStatic" />
        </div>
      </template>
      <template v-slot:body-cell-StuIcon="props">
        <q-td auto-width :props="props">
          <q-avatar size="md" v-if="props.value">
            <img :src="props.value" />
          </q-avatar>
          <q-avatar size="md" color="teal-10" text-color="white" v-if="!props.value">
            {{ props.row.StuName.substring(0, 1) }}</q-avatar>
        </q-td>
      </template>
      <template v-slot:body-cell-StuName="props">
        <q-td :props="props">
          <div class="text-blue cursor-pointer" @click="getStuRight(props.row, 1)">
            {{ props.value }}
          </div>
        </q-td>
      </template>
 
     
    </q-table>
    
    <studentRight-form v-if="isShowStuRight" :BelongType="BelongType"
      :checkType="checkType" :save-obj="stuOption" @close="closeStuForm" @success="refreshStuList"
      @reload="referDataHandler">
    </studentRight-form>
  
  </div>
</template>
<script>
 
  import studentRightForm from "./studentRight-form";
  import {
    mapGetters
  } from "vuex";
  import {
    SetStudentAssistBatch,
    BatchForwardStudent
  } from "../../../api/sale/sale";
  import {
    EduDownLoad
  } from "../../../api/common/common";
  import {
    queryEmployee
  } from "../../../api/users/user";
  import {
    SetStudentSureConsult, //邀约
  } from "../../../api/school/index";
  import { date } from 'quasar'

  export default {
    props: {
      Count: {
        type: Number,
        default: null
      },
      //数据列表
      dataList: {
        type: Array,
        default: null
      },
      
      loading: {
        type: Boolean,
        default: false
      },
      //权限验证
      authObj: {
        type: Object,
        default: null
      },
      //查询参数
      queryMsg: {
        type: Object,
        default: null
      },
      showHeader: {
        type: Boolean,
        default: true
      },
      height: {
        type: String,
        default: "unset"
      },
      noSelect: {
        type: Boolean,
        default: false
      }
    },
    components: {
      studentRightForm,
    },
    data() {
      return {
        columns: [{
            name: "StuIcon",
            label: "",
            field: "StuIcon",
            align: "left"
          },
          {
            name: "StuName",
            required: true,
            label: "昵称",
            align: "left",
            field: row => row.StuName
          },
          {
            name: "CourseName",
            label: "课程",
            field: "CourseName",
            align: "left"
          },
          {
            name: "ClassName",
            label: "班级",
            field: "ClassName",
            align: "left"
          },
          {
            name: "OrderId",
            label: "订单号",
            field: "OrderId",
            align: "left"
          }
        ],
        pageMsg: {
          rowsPerPage: 12
        },
        isShowStuForm: false,
        resetLoading: false,
        isShowStuRight: false,
        stuOption: null,
        isShowAdd: false,
        selection: [],
        BelongType: 1,
        pushMode: false, //是否显示推送按钮
        pushing: false,
        assistListFormat: [],
        checkType: 1, //打开右侧弹窗类型
        isShowAbroad: false, //是否显示转留学就业订单弹窗
        userInfo: {}, //当前登录人员
        isShowTrans: false,
        transMsg: {
          StuIds: "",
          CreateBy: ""
        },
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        isInvite: false
      };
    },
    watch: {
      dataList: {
        handler(val) {
          this.selection = [];
        },
        deep: true
      }
    },
    created() {
      this.userInfo = this.getLocalStorage();
      // 邀约功能权限
      this.isInvite = false;
      if (
        this.userInfo &&
        this.userInfo.ActionMenuList &&
        this.userInfo.ActionMenuList.length > 0
      ) {
        this.userInfo.ActionMenuList.forEach(x => {
          if (x.FunctionCode == "isInvite") {
            this.isInvite = true;
          }
        });
      }

    },
    mounted() {
      this.getEmployeeList();
    },
    computed: {
      ...mapGetters(["logo", "name"])
    },
    methods: {
  
      //是否有下载客户资料权限
      IsDownLoadStu() {
        var isHaveAuth = false;
        if (
          this.userInfo &&
          this.userInfo.ActionMenuList &&
          this.userInfo.ActionMenuList.length > 0
        ) {
          this.userInfo.ActionMenuList.forEach(x => {
            if (x.FunctionCode == "DownLoad_Stu") {
              isHaveAuth = true;
            }
          });
        }
        return isHaveAuth;
      },
       //下载消课统计
       DownLoadStuLearnChapterStatic() {
        //导出
        var msg = JSON.parse(JSON.stringify(this.queryMsg));
       
        if(msg.CourseId>0||msg.StuName){
        EduDownLoad("/Scroll/DownLoadStuLearnChapterStatic", msg, "消课统计.xls", res => {
        });
      } else{
          this.Error('请先选择课程/输入学生昵称');
        }
      },
     
     
      //刷新列表
      refreshStuList() {
        this.$emit("success");
        this.selection = [];
      },
      EditStudent(obj) {
        if (obj) {
          this.stuOption = obj;
        } else {
          this.stuOption = null;
        }
        this.isShowAdd = true;
      },
      closeStuForm() {
        this.isShowStuForm = false;
        this.isShowStuRight = false;
        this.isShowAdd = false;
        this.isShowAbroad = false;
      },
      //点击学生姓名弹出
      getStuRight(obj, type) {
        if (obj) {
          this.stuOption = obj;
          this.BelongType = obj.BelongType;
          this.checkType = type;
        } else {
          this.stuOption = null;
        }
        this.isShowStuRight = true;
      },
     
      referDataHandler() {
        this.$emit("reload");
      },
      errorMsg(msg) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: msg
        });
      },
      //获取员工列表
      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
          );
        });
      },
      //保存批量转交
      saveTransForm() {
        if (this.selection.length == 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: "请选择推送学员"
          });
          return;
        }
        if (this.transMsg.CreateBy == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: "请选择接收人员!"
          });
          return;
        }
        let newArr = [];
        this.selection.forEach(x => {
          newArr.push(x.StuId);
        });
        this.transMsg.StuIds = newArr.toString();
        BatchForwardStudent(this.transMsg).then(res => {
          if (res.Code == 1) {
            this.refreshStuList();
            this.selection = [];
            this.transMsg.StuIds = "";
            this.transMsg.CreateBy = "";
            this.pushMode = false;
            this.$q.notify({
              type: "iconfont icon-chenggong",
              position: "top",
              message: r.Message
            });
          }
        });
      }
    }
  };
</script>
