<style>
  .time-select {
    z-index: 9999 !important;
  }
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{objOption.ReserveClassId==0?'新增试听课程':'修改试听课程'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <q-input filled v-model="objOption.ClassDate" class="col-6 q-pr-lg q-pb-lg"
            :rules="[val => !!val || '请选择预约日期']" ref="ClassDate" 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="objOption.ClassDate" @input="() => $refs.qDateProxy1.hide()" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          <div class="Sysuser_Date col-6 q-pb-lg">
            <q-field>
              <template v-slot:control>
                <el-time-select v-model="objOption.ClassTime" ref="ClassTime" style="width:50%" :picker-options="{
                    start: '09:00',
                    step: '00:15',
                    end: '21:00',
                    maxTime:objOption.EndTime
                }" placeholder="预约开始时间">
                </el-time-select>
                <el-time-select v-model="objOption.EndTime" ref="EndTime" style="width:50%" :picker-options="{
                    start: '09:00',
                    step: '00:15',
                    end: '21:00',
                    minTime:objOption.ClassTime
                }" placeholder="预约结束时间">
                </el-time-select>
              </template>
            </q-field>
          </div>
          <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="objOption.TeacherId"
            ref="TeacherId" :options="TeacherList" label="选择教师" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
            map-options />

          <q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="objOption.ClassRoomId"
            ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6 q-pb-lg" emit-value
            map-options />

          <q-select filled stack-label option-value="Id" option-label="LessonName" v-model="objOption.TrialLessonId"
            :options="TrialList" label="试听课程" :dense="false" class="col-6 q-pb-lg q-pr-lg" emit-value map-options />

          <q-select filled stack-label option-value="Name" option-label="Name" v-model="objOption.ClassContent"
            ref="ClassContent" :options="ContentList" label="主讲内容" :dense="false" class="col-12 q-pb-lg" emit-value
            map-options />
        </div>
      </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="saveCategory" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    getTeacherDropDownList,
    queryClassRoomList,
    GetTrialLessonList
  } from "../../api/school/index";
  import {
    GetReserveClass,
    SetReserveClass
  } from '../../api/scheduling/schedu'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          ReserveClassId: 0,
          TeacherId: "",
          ClassDate: "",
          ClassTime: "",
          EndTime: "",
          ClassRoomId: "",
          ClassContent: '',
          TrialLessonId: ''
        },
        saveLoading: false,
        TeacherList: [],
        ClassRoomList: [],
        ContentList: [{
          Id: 1,
          Name: '少儿类：主要以丰富可与时间和兴趣为主，要求课堂轻松活跃。趣味性十足'
        }, {
          Id: 2,
          Name: '兴趣类：成年人，对日语学习从兴趣开始，要求课堂丰富有趣'
        }, {
          Id: 3,
          Name: '实用类：对于日语学习有一定的需求（考研、就业等），要求学习过程专业，干货多'
        }, {
          Id: 4,
          Name: '留学类：打算去往日本留学（本科、硕士、语言学校、私塾等）'
        }],
        TrialList: [] //试听课程下拉数据
      }
    },
    mounted() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      if (month < 10) {
        month = '0' + month
      }
      this.objOption.ClassDate = year + '-' + month + '-' + day;
      this.GetTeacherList();
      this.getClassRoomList();
      this.GetTrialDrop();
      this.initObj()
    },
    methods: {
      GetTrialDrop() {
        GetTrialLessonList({}).then(res => {
          if (res.Code == 1) {
            this.TrialList = res.Data;
          }
        });
      },
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.ReserveClassId > 0) {
          GetReserveClass({
            ReserveClassId: this.saveObj.ReserveClassId
          }).then(res => {
            if (res.Code == 1) {
              this.objOption.ReserveClassId = res.Data.ReserveClassId;
              this.objOption.TeacherId = res.Data.TeacherId;
              this.objOption.ClassDate = res.Data.ClassDateStr;
              this.objOption.ClassTime = res.Data.ClassTime;
              this.objOption.EndTime = res.Data.EndTime;
              this.objOption.ClassRoomId = res.Data.ClassRoomId;
              this.objOption.TrialLessonId = res.Data.TrialLessonId;
              this.objOption.ClassContent = res.Data.ClassContent;
            } else {
              let nowDay = new Date();
              var year = nowDay.getFullYear(); //年
              var month = nowDay.getMonth() + 1; //月
              var day = nowDay.getDate(); //日
              this.objOption.ClassDate = year + '-' + month + '-' + day;
              this.objOption.TeacherId = '';
              this.objOption.ClassTime = '';
              this.objOption.EndTime = '';
              this.objOption.ClassRoomId = '';
              this.objOption.ClassContent = '';
              this.objOption.TrialLessonId = "";
            }
          })
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //保存菜单
      saveCategory() {
        this.saveLoading = true
        SetReserveClass(this.objOption).then(res => {
          this.saveLoading = false
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: '数据保存成功！',
            position: 'top'
          })
          this.$emit("success")
          this.closeSaveForm()
        }).catch(() => {
          this.saveLoading = false
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        });
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
          }
        })
      },
    }
  }
</script>