<template>
  <div>
    <div style="text-align:right;">
      <template v-if="isShowBtn">
        <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 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>
      </template>
    </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">是
            <q-tooltip :offset="[10, 10]">
              原订单:{{props.row.RenewOrderId}}
            </q-tooltip>
          </span>
        </q-td>
      </template>
      <template v-slot:body-cell-GuestName="props">
        <q-td auto-width :props="props">
          <span v-if="props.row.GuestState==1">{{props.row.GuestName}}</span>
          <span style="color:red;cursor:pointer" v-else>{{props.row.GuestName}}
            <q-tooltip :offset="[10, 10]">
              {{props.row.GuestStateStr}}
            </q-tooltip>
          </span>
        </q-td>
      </template>
      <template v-slot:body-cell-StuType="props">
        <q-td auto-width :props="props">
          <span v-if="props.row.IsChaBan==0">正常报入</span>
          <span style="color:red;" v-if="props.row.IsChaBan==1">
            插班报入
            <q-tooltip :offset="[10, 10]">
              开始课时:{{props.row.StartClassHours}}<br />
              课程: {{props.row.CourseName}}<br />
              生效日期: {{props.row.EffectTime}}<br />
              生效状态: {{props.row.EffectStatusStr}}<br />
              <template v-if="props.row.UpOrderId&&props.row.UpOrderId>0">
                前置订单: {{props.row.UpOrderId}}<br />
              </template>
            </q-tooltip>
          </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
      },
      isShowMyBtn: {
        type: Number,
        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: 'StuType',
            label: '学生类型',
            field: 'StuType',
            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: '', //选择学员
        isShowBtn:true
      }
    },
    created() {

    },
    mounted() {
      if(this.isShowMyBtn==1){
        this.isShowBtn=false;
      }
      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,
          QEffectStatus: 2,
        }).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>
