<style>

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 400px; max-width: 400px" class="stop">
      <q-card-section>
        <div class="text-h6">新增/修改学员预约</div>
      </q-card-section>
      <q-card-section class="q-pt-none" style="height: 30vh">
        <q-input filled v-model="postMsg.Date" class="col-6 q-pr-lg q-pb-lg" mask="date" label="预约日期">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
                <q-date v-model="postMsg.Date" @input="() => $refs.qDateProxy1.hide()"/>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
        <q-select filled stack-label option-value="Id" option-label="Name" v-model="postMsg.chooseTime" 
        ref="Sort" :options="TimeList" label="预约时段" :dense="false" emit-value map-options class="col-6 q-pr-lg q-pb-lg"
          :rules="[val => !!val || '请选择预约时段']">
        </q-select>

        <q-select filled stack-label use-input option-value="StuId" option-label="StuName" v-model="postMsg.StuId"
          ref="StuId" :options="StuList" label="学员" :dense="false" emit-value map-options class="col-6 q-pr-lg q-pb-lg"
          :rules="[val => !!val || '请选择学员']"
          @filter="filterStu">
        </q-select>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight: 400 !important" @click="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight: 400 !important" :loading="saveLoading"
          @click="saveAppointment" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    savePlanAppointment,
    queryGetTimeList
  } from "../../../api/stuMan/index";

  import {
    GetStudentList,
  } from '../../../api/course/class';

  import Lockr from "lockr";
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null,
      },
    },
    data() {
      return {
        persistent: true,
        postMsg: {
          Date: "",
          StartTime: "",
          EndTime: "",
          DetailsId: "",
          StuId: "",
          Account_Id: "",
          chooseTime: ""
        },
        TimeList: [],
        StuList: [],
        allStuList: [], //所有学员
        //防止重复提交
        saveLoading: false,
      };
    },
    created() {
      this.getTimeList();
      this.queryStudentList();
    },
    mounted() {

    },
    methods: {
      //筛选学生
      filterStu(val, update) {
        update(() => {
          if (val === "") {
            this.StuList = JSON.parse(JSON.stringify(this.allStuList));
          } else {
            const needle = val.toLowerCase();
            this.StuList = this.allStuList.filter(
              v => v.StuName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取学员列表
      queryStudentList() {
        GetStudentList({}).then(res => {
          if (res.Code == 1) {
            this.StuList = res.Data;
            this.allStuList = res.Data;
          }
        })
      },
      //获取可约时间段
      getTimeList() {
        this.TimeList = [];
        queryGetTimeList({}).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data;
            if (tempData && tempData.length > 0) {
              tempData.forEach(item => {
                this.TimeList.push({
                  Id: item.Sort,
                  Name: item.StartTime + "-" + item.EndTime,
                  StartTime: item.StartTime,
                  EndTime: item.EndTime
                });
              })
            }
          }
        })
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit("refresh");
      },

      //保存预约信息
      saveAppointment() {
        this.$refs.qDateProxy1.hide();
        this.$refs.Sort.validate();
        this.$refs.StuId.validate();
        if (!this.postMsg.Date) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择预约日期`
          })
          return;
        }
        if (!this.postMsg.chooseTime) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择预约时段`
          })
          return;
        }
        if (!this.postMsg.StuId) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择学员`
          })
          return;
        }
        if (this.postMsg.chooseTime && this.postMsg.chooseTime > 0) {
          let chooseTime = this.TimeList.find(x => x.Id == this.postMsg.chooseTime);
          if (chooseTime) {
            this.postMsg.StartTime = chooseTime.StartTime;
            this.postMsg.EndTime = chooseTime.EndTime;
          }
        }
        if (this.postMsg.StuId && this.postMsg.StuId > 0) {
          let chooseStu = this.allStuList.find(x => x.StuId == this.postMsg.StuId);
          if (chooseStu) {
            this.postMsg.Account_Id = chooseStu.Account_Id
          }
        }
        this.saveLoading = true;
        savePlanAppointment(this.postMsg).then(res => {
          this.saveLoading = false;
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '预约成功!',
              position: 'top'
            });
            this.closeSaveForm();
          }
        }).catch(() => {
          this.saveLoading = false
        })
      }
    },
  };
</script>