<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-input filled stack-label v-model="msg.StuName" label="学员姓名" class="col-10" hint="提示：需输入学员姓名查询学员列表"
                @keyup.enter.native="getStu" />
              <div class="col-2 q-pt-md">
                <q-btn size="sm" color="accent" label="查询" @click="getStu" class="q-ml-md" />
              </div>
            </div>
            <div class="row col-12">
              <q-select filled v-model="stuInfo" stack-label option-value="StuId" option-label="StuName"
                :options="stuOptions" label="学员列表" class="col-10">
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      未找到相关数据
                    </q-item-section>
                  </q-item>
                </template>
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                    <q-item-section>
                      <div class="flex">
                        <span>{{ scope.opt.StuName }}</span>
                        <span v-if="scope.opt.State===3">(重)</span>
                        <span class="q-ml-sm">{{ scope.opt.CourseName }}</span>
                      </div>
                    </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 {
    getCanAppointmentStuList_V2,
    setAdminScrollMakeUp
  } 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.stuOptions = [];
        }
      }
    },
    data() {
      return {
        msg: {
          StuName: "",
          NextCourseGradeNo: 0,
          CourseGradeId: 0
        },
        stuInfo: "",
        stuOptions: []
      };
    },
    methods: {
      //开关弹窗
      changeDig(val) {
        this.$emit("changeshow", val);
      },
      getStu() {
        this.msg.NextCourseGradeNo = this.saveObj.Ranks,
        this.msg.CourseGradeId = this.saveObj.CourseGradeId;
        getCanAppointmentStuList_V2(this.msg).then(res => {
          if (res.Code == 1) {
            this.stuOptions = res.Data;
          }
        });
      },
      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
        };
        setAdminScrollMakeUp(saveMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              message: "操作成功",
              position: "top"
            });
            this.$emit("success", {
              GuestName: this.stuInfo.StuName,
              AppointType: 1,
              AppointmentId: res.Data
            });
            this.msg.StuName = []
            this.stuInfo = "";
            this.stuOptions = [];
          }
        });
      }
    }
  };
</script>