<style>
  .classinfo_Dialog .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #F0F5FB;
    padding: 5px 10px;
    align-items: center;
  }

  .classinfo_Dialog .classFirst {
    color: #000000;
    font-weight: bold;
  }

  .classinfo_Dialog .className {
    margin-left: 10px;
  }

  .classinfo_Dialog .classStatus {
    padding: 3px 8px;
    background-color: #c8d7fc;
    color: #2961FE;
    font-size: 12px;
    border-radius: 2px;
    margin-left: 20px;
  }

  .classinfo_Dialog .normalName {
    color: #999999;
  }

  .classinfo_Dialog .normalInner {
    color: #111111;
  }
  .drop_NameDown{
    margin-top:20px;
    width:300px;
  }
</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
    <q-card style="margin-top:61px;width:850px" class="no-border-radius classinfo_Dialog">
      <div class="drawerTop">
        <div style="display:flex;align-items:center;">
          <q-avatar size="md" style="background:#d4dfff;color:#2961FE;font-weight:bold;">
            {{setingObj.ClassName.substring(0,1)}}
          </q-avatar>
          <div class="className">
            <div class="classFirst">{{setingObj.ClassName}}</div>
            <div style="color:#666666;font-size:12px;">{{setingObj.CourseName}}</div>
          </div>
          <div class="classStatus">{{setingObj.ClassStatusStr}}</div>
        </div>
      </div>
      <div style="margin:20px;font-size:12px;">
        <div class="row wrap ">
          <div class="col-6">
            <span class="normalName">老师名称：</span>
            <span class="normalInner">{{setingObj.TeacherName}}</span>
          </div>
          <div class="col-6">
            <span class="normalName">开班时间：</span>
            <span class="normalInner">
              <template v-if="setingObj.NewPlanDateTime">
                {{setingObj.NewPlanDateTime}}
              </template>
              <template v-else>
                {{setingObj.OpenTime}}
              </template>
            </span>
          </div>
        </div>
        <div class="row wrap" style="margin-top:20px;">
          <div class="col-6" style="display:flex;align-items:center;">
            <span class="normalName">课程进度：</span>
            <q-linear-progress rounded size="20px" :value="getProgress(setingObj.CompleteProgress,100)"
              style="background-color:#EEEEEF;color:#3FC4FF;display:inline-block;width:30%;margin-right:10px;" />
            {{setingObj.CompleteProgress}}%
          </div>
        </div>
      </div>
      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
        <q-tab :ripple="false" name="first" label="学员信息" />
        <q-tab :ripple="false" name="second" label="上课计划" />
        <q-tab :ripple="false" name="third" label="上课记录" />
        <q-tab :ripple="false" name="fourth" label="班级日志" />
      </q-tabs>
      <div v-if="tabCheck=='first'" style="margin:0 15px;">
        <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 standout="bg-primary text-white" v-model="checkedStudent" :options="InvitationList"
                    option-value="StuId" option-label="StuName" label="选择学员" />
                </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="暂无相关数据" flat selection="multiple"
          :selected.sync="selectedStudent" class="sticky-column-table" separator="none"
          title="学员信息" :data="studentList" :columns="columns" hide-bottom row-key="Id">
          <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>
      <div v-if="tabCheck=='second'">
        <lessForm :seting-obj="setingObj"></lessForm>
      </div>
      <div v-if="tabCheck=='third'">
        <recordForm :seting-obj="setingObj"></recordForm>
      </div> 
    </q-card>
    <div class="dialog-out-close" @click="closeShenheForm"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>

<script>
  import {
    queryClassStudent,
    StudentDropOut,
    GetStudentList,
    AddClassStudent
  } from '../../api/course/class';
  import lessForm from '../course/lesson-form';
  import recordForm from '../course/record-form';
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    components: {
      lessForm,
      recordForm
    },
    data() {
      return {
        persistent: true,
        tabCheck: 'first', //默认选第一个
        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'
          }
        ],
        loading: false,
        stuMsg: {

        },
        studentList: [], //学员信息数据
        selectedStudent: [], //选中
        dropMsg:{
          ClassId:0, //班级id
          Ids:'', //学员id
          DropOutRemark:'', //退课原因
          StudentName:'' //学员名称
        },
        isShowDropPop:false,

        ishowInvit:false,
        invitationMsg:{
          ClassId:0, //班级id
          GuestName:'', //学员名称
          Sex:'', //性别
          Mobile:'', //手机号
          BirthDay:'' //生日
        },
        InvitationList:[], //学员下拉数据
        checkedStudent:'', //选择学员
      }
    },
    created() {
      this.getStudentData();
    },
    mounted() {
      this.getStudentList();
    },
    methods: {
      closeShenheForm() {
        this.persistent = false;
        this.$emit('close');
      },
      //获取学员信息
      getStudentData() {
        queryClassStudent({
          ClassId: this.setingObj.ClassId
        }).then(res => {
          if (res.Code == 1) {
            this.studentList = res.Data;
          }
        })
      },
      //获取进度条
      getProgress(num, total) {
        if (num == 0 || total == 0){
            return 0;
        }
        return (Math.round(num / total * 100) / 100.00);
      },
      //退课
      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(){
        GetStudentList({
          SchoolId: this.setingObj.School_Id
        }).then(res => {
          if (res.Code == 1) {
             this.InvitationList = res.Data;
          }
        })
      },
      //保存邀请新学员保存
      saveStudent(){
        if(this.checkedStudent==''){
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择学员`
          })
          return;
        }else{
          this.invitationMsg.ClassId = this.setingObj.ClassId;
          this.invitationMsg.GuestName = this.checkedStudent.StuName;
          this.invitationMsg.Sex = this.checkedStudent.StuSex;
          this.invitationMsg.Mobile = this.checkedStudent.StuTel;
          this.invitationMsg.BirthDay = this.checkedStudent.StuBirthStr;
          AddClassStudent(this.invitationMsg).then(res => {
            if (res.Code == 1) {
              this.ishowInvit = false;
              this.getStudentData();
            }
          })
        }
      } 
    },
  }

</script>

<style>

</style>
