<template>
  <div>
    <q-dialog
      v-model="show"
      persistent
      transition-show="scale"
      transition-hide="scale"
      @input="changeDig"
    >
      <q-card style="width: 600px;max-width:900px;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">补课</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="changeDig(false)" />
        </q-card-section>
        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
          <div class="row col q-mr-lg q-col-gutter-md changeCourse">
            <div class="row col-12">
              <q-select
                filled
                v-model="stuInfo"
                use-input
                stack-label
                option-value="StuId"
                option-label="StuName"
                :options="stuOptions"
                label="学员列表"
                class="col-10"
                @filter="filterStu"
              >
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      未找到相关数据
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
              <div class="col-2 q-pt-md">
                <q-btn
                  size="sm"
                  color="accent"
                  label="添加"
                  @click="save"
                  class="q-ml-md"
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" @click="changeDig(false)" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
import {
  getCanMakeupStuList,
  setAppointmentMakeup
} from "../../../api/studyabroad/subscribe.js";
export default {
  model: {
    prop: "show",
    event: "changeshow"
  },
  props: {
    saveObj: {
      type: Object,
      default: null
    },
    date: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.getStu();
        this.stuOptions = [];
        this.AllStuOptions = [];
      }
    }
  },
  data() {
    return {
      reStuMsg: {
        ChapterNo: 0
      },
      stuInfo: "请选择",
      stuOptions: [],
      AllStuOptions: []
    };
  },
  methods: {
    //开关弹窗
    changeDig(val) {
      this.$emit("changeshow", val);
    },
    getStu() {
      const msg = {
        CourseGradeNo:this.saveObj.Ranks,
        CourseGradeId:this.saveObj.CourseGradeId
      };
      getCanMakeupStuList(msg).then(res => {
        if (res.Code == 1) {
          this.stuOptions = JSON.parse(JSON.stringify(res.Data));
          this.AllStuOptions = JSON.parse(JSON.stringify(res.Data));
        }
      });
    },
    //筛选学生
    filterStu(val, update) {
      update(() => {
        if (val === "") {
          this.stuOptions = JSON.parse(JSON.stringify(this.AllStuOptions));
        } else {
          const needle = val.toLowerCase();
          this.stuOptions = this.AllStuOptions.filter(
            v => v.StuName.toLowerCase().indexOf(needle) > -1
          );
        }
      });
    },
    save() {
      if (!this.stuInfo.StuId) {
        this.$q.notify({
          message: "请选择学生",
          position: "top"
        });
        return;
      }
      const saveMsg = {
        Date: this.date,
        TeacherId: this.saveObj.Tid,
        ShiftSort: this.saveObj.ShiftSort,
        StuId: this.stuInfo.StuId,
        GuestId: this.stuInfo.GuestId,
        CourseId: this.saveObj.CourseId,
        CourseGradeNo:this.saveObj.Ranks,
        CourseGradeId: this.saveObj.CourseGradeId
      };
      setAppointmentMakeup(saveMsg).then(res => {
        if (res.Code == 1) {
          this.$q.notify({
            message: "操作成功",
            position: "top"
          });
          this.$emit("success", {
            GuestName: this.stuInfo.StuName,
            AppointType: 2,
            AppointmentId: res.Data
          });
          this.stuInfo = "";
          this.stuOptions = [];
          this.AllStuOptions = [];
          this.getStu();
        }
      });
    }
  }
};
</script>
