<template>
  <div>
    <div style="text-align:right;">
      <q-btn outline color="black" label="退课" @click="dropClass()" size="12px" style="margin-right:20px;">
        <q-popup-proxy>
          <q-banner v-if="isShowDropPop">
            <div class="dropClassDialog">
              <div style="margin:10px 0 15px 0;">退课</div>
            </div>
            <q-input square filled v-model="dropMsg.DropOutRemark" borderless label="退课原因" ref="reason" type="textarea"
              counter :rules="[val => !!val || '请填写退课原因']" maxlength="200" />
            <div class="drop_NameDown">
              <q-chip v-for="(item,index) in selectedStudent" :key="index">
                <q-avatar rounded size="sm" v-if="item.UserIcon">
                  <img :src="item.UserIcon" />
                </q-avatar>
                <q-avatar rounded size="sm" color="teal-10" text-color="white" v-if="!item.UserIcon">
                  {{item.GuestName[0]}}</q-avatar>
                {{item.GuestName}}
              </q-chip>
            </div>
            <q-card-actions align="right" class="bg-white">
              <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="isShowDropPop=false" />
              <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="saveDrop()" />
            </q-card-actions>
          </q-banner>
        </q-popup-proxy>
      </q-btn>
      <q-btn color="primary" class="q-mr-md" size="12px" icon="add" label="邀请新学员" @click="ishowInvit=true">
        <q-popup-proxy>
          <q-banner v-if="ishowInvit">
            <div class="dropClassDialog">
              <div style="margin:10px 0 15px 0;">邀请新学员</div>
            </div>
            <div class="drop_NameDown">
              <!-- <q-select dense standout="bg-primary text-white" v-model="checkedStudent" :options="InvitationList"
              @filter="filterCourseFn" use-input option-value="StuId" option-label="StuName" label="选择学员" /> -->
              <q-select filled stack-label use-input input-debounce="0"
                option-value="StuId" option-label="StuName" v-model="checkedStudent"
                :options="InvitationList" label="选择学员" :dense="false" emit-value map-options @filter="filterFn">
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      未找到相关数据
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
            <q-card-actions align="right" class="bg-white" style="margin-top:20px;">
              <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="ishowInvit=false" />
              <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="saveStudent()" />
            </q-card-actions>
          </q-banner>
        </q-popup-proxy>
      </q-btn>
    </div>
    <q-table :loading="loading" no-data-label="暂无相关数据" style="margin-bottom:80px;" flat selection="multiple" :selected.sync="selectedStudent"
      class="sticky-column-table" separator="none" title="学员信息" :data="studentList" :pagination="initialPagination" :columns="columns"
      row-key="Id" hide-bottom>
      <template v-slot:body-cell-IsRenew="props">
        <q-td auto-width :props="props">
          <span style="color:red;" v-if="props.row.IsRenew==0">否</span>
          <span style="color:green;" v-if="props.row.IsRenew==1">是</span>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script>
  import {
    queryClassStudent,
    StudentDropOut,
    GetStudentList,
    AddClassStudent
  } from '../../api/course/class';
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        loading: false, //加载
        initialPagination: {
          rowsPerPage: 1000
        },
        columns: [{
            name: 'GuestName',
            label: '姓名',
            field: 'GuestName',
            align: 'left',
          },
          {
            name: 'SexStr',
            label: '性别',
            field: 'SexStr',
            align: 'left',
          },
          {
            name: 'Age',
            label: '年龄',
            field: 'Age',
            align: 'left',
          },
          {
            name: 'ClassHours',
            label: '上课课时',
            field: 'ClassHours',
            align: 'left',
          },
          {
            name: 'CreateTimeStr',
            label: '加入时间',
            field: 'CreateTimeStr',
            align: 'left'
          },
          {
            name: 'Mobile',
            label: '联系电话',
            align: 'left',
            field: 'Mobile'
          },
          {
            name: 'OrderId',
            label: '关联订单',
            field: 'OrderId',
            align: 'left'
          },
          {
            name: 'IsRenew',
            label: '续费课程',
            field: 'IsRenew',
            align: 'left'
          }
        ],
        stuMsg: {

        },
        studentList: [], //学员信息数据
        selectedStudent: [], //选中
        dropMsg: {
          ClassId: 0, //班级id
          Ids: '', //学员id
          DropOutRemark: '', //退课原因
          StudentName: '' //学员名称
        },
        isShowDropPop: false,
        ishowInvit: false,
        invitationMsg: {
          ClassId: 0, //班级id
          GuestName: '', //学员名称
          Sex: '', //性别
          Mobile: '', //手机号
          BirthDay: '', //生日
          StudentId: 0
        },
        InvitationList: [], //学员下拉数据
        AllInvitationList: [],
        checkedStudent: '', //选择学员
      }
    },
    created() {

    },
    mounted() {
      this.getStudentData();
      this.getStudentList();
    },
    methods: {
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.InvitationList = JSON.parse(JSON.stringify(this.AllInvitationList))
          } else {
            const needle = val.toLowerCase()
            this.InvitationList = this.AllInvitationList.filter(v => v.StuName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },


      //获取学员信息
      getStudentData() {
        this.studentList = [];
        queryClassStudent({
          ClassId: this.setingObj.ClassId,
          School_Id: this.setingObj.School_Id
        }).then(res => {
          if (res.Code == 1) {
            this.studentList = res.Data;
          }
        })
      },
      //退课
      dropClass() {
        if (this.selectedStudent.length == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择退课学员`
          })
          return;
        } else {
          this.isShowDropPop = true;
        }
      },
      //保存退课信息
      saveDrop() {
        if (this.selectedStudent.length == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择退课学员`
          })
          return;
        } else {
          this.dropMsg.ClassId = this.setingObj.ClassId;
          let StuArr = [];
          let StrName = [];
          this.selectedStudent.forEach(x => {
            StuArr.push(x.Id);
            StrName.push(x.GuestName);
          })
          this.dropMsg.Ids = StuArr.toString();
          this.dropMsg.StudentName = StrName.toString();
          StudentDropOut(this.dropMsg).then(res => {
            if (res.Code == 1) {
              this.isShowDropPop = false;
              this.dropMsg.DropOutRemark = '';
              this.selectedStudent = [];
              this.getStudentData();
            }
          })
        }
      },
      //获取学员下拉信息
      getStudentList() {
        var qMsg={
          SchoolId: this.setingObj.School_Id
        };
        GetStudentList({}).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              this.AllInvitationList = JSON.parse(JSON.stringify(jsonData));
              this.InvitationList = JSON.parse(JSON.stringify(jsonData));
            }
          }
        })
      },
      //保存邀请新学员保存
      saveStudent() {
        if (this.checkedStudent == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择学员`
          })
          return;
        } else {
          let checkedStuObj = {};
          this.InvitationList.forEach(x=>{
            if(x.StuId==this.checkedStudent){
              checkedStuObj=x;
            }
          })
          this.invitationMsg.ClassId = this.setingObj.ClassId;
          this.invitationMsg.GuestName = checkedStuObj.StuName;
          this.invitationMsg.Sex = checkedStuObj.StuSex;
          this.invitationMsg.Mobile = checkedStuObj.StuTel;
          this.invitationMsg.BirthDay = checkedStuObj.StuBirthStr;
          this.invitationMsg.StudentId = checkedStuObj.StuId;
          this.invitationMsg.School_Id = this.setingObj.School_Id;
          AddClassStudent(this.invitationMsg).then(res => {
            if (res.Code == 1) {
              this.ishowInvit = false;
              this.getStudentData();
            }
          })
        }
      }
    },
    watch: {
      setingObj: function (val, oldval) {
        this.getStudentData();
        this.getStudentList();
      }
    }
  }

</script>
