<style>
  .Appoint_Line {
    width: 3px;
    height: 11px;
    margin-right: 10px;
    background-color: #3FC4FF;
    display: inline-block;
  }

  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

  .time-select {
    z-index: 9999 !important;
  }
</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeAppointForm">
    <q-card style="margin-top:61px;width:400px" class="no-border-radius classinfo_Dialog">
      <div style="padding:15px;">
        <div style="margin-bottom:20px;">
          <div class="Appoint_Line"></div>预约申请
        </div>
        <q-btn color="primary" label="选择试听课" @click="isShowTeacher=true" style="margin-bottom:20px;" />
        <q-input filled v-model="addMsg.ClassDate" class="col-6 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="addMsg.ClassDate" @input="() => $refs.qDateProxy1.hide()" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
        <div class="Sysuser_Date">
          <q-field filled class="q-pb-lg">
            <template v-slot:control>
              <el-time-select v-model="addMsg.ClassTime" ref="ClassTime" style="width:50%" :picker-options="{
                      start: '09:00',
                      step: '00:15',
                      end: '21:00',
                      maxTime:addMsg.EndTime
                  }" placeholder="预约开始时间">
              </el-time-select>
              <el-time-select v-model="addMsg.EndTime" ref="EndTime" style="width:50%" :picker-options="{
                  start: '09:00',
                  step: '00:15',
                  end: '21:00',
                  minTime:addMsg.ClassTime
              }" placeholder="预约结束时间">
              </el-time-select>
            </template>
          </q-field>
        </div>
        <q-select filled stack-label option-value="Name" option-label="Name"
          @input="getTeacherChoose(addMsg.ClassContent)" v-model="addMsg.ClassContent" ref="ClassContent"
          :options="ContentList" :rules="[val => !!val || '请选择主讲内容']" label="主讲内容" :dense="false" class="col-6 q-pb-lg"
          emit-value map-options />
        <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="addMsg.TeacherId"
          ref="TeacherId" :options="TeacherList" label="选择教师" :dense="false" class="col-6 q-pb-lg" emit-value
          map-options />
        <q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="addMsg.ClassRoomId"
          ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6 q-pb-lg" emit-value
          map-options />
      </div>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" size="sm" style="font-weight:400 !important" @click="closeAppointForm" />
        <q-btn label="保存" color="accent q-px-md" size="sm" style="font-weight:400 !important"
          :loading="saveAppointLoading" @click="saveAppointForm" />
      </q-card-actions>
    </q-card>
    <div class="dialog-out-close" @click="closeAppointForm"
      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>
    <audition-form v-if="isShowTeacher" @close="closeAuditForm" @getchildInfo="getchildInfo"></audition-form>
  </q-dialog>
</template>

<script>
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from "../../api/school/index";
  import {
    SetVisitorReserve
  } from "../../api/scheduling/schedu";
  import auditionForm from '../schedul/audition-form'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    components: {
      auditionForm
    },
    data() {
      return {
        persistent: true,
        loading: false,
        addMsg: {
          Id: 0, //编号
          Visitor_Id: 0, //访客编号
          ReserveClassId: 0, //选中的班级编号
          ClassDate: "", //预约日期
          ClassTime: "", //预约开始时间
          EndTime: "", //预约结束时间
          TeacherId: 0, //教师编号
          ClassRoomId: 0, //教室编号
          ClassContent: "", //主讲内容
        },
        TeacherList: [], //教师
        AllTeacherList: [],
        ClassRoomList: [], //教室
        saveAppointLoading: false,
        isShowTeacher: false, //显示选择框
        ContentList: [{
          Id: 1,
          Name: '少儿类：主要以丰富可与时间和兴趣为主，要求课堂轻松活跃。趣味性十足'
        }, {
          Id: 2,
          Name: '兴趣类：成年人，对日语学习从兴趣开始，要求课堂丰富有趣'
        }, {
          Id: 3,
          Name: '实用类：对于日语学习有一定的需求（考研、就业等），要求学习过程专业，干货多'
        }, {
          Id: 4,
          Name: '留学类：打算去往日本留学（本科、硕士、语言学校、私塾等）'
        }]
      }
    },
    created() {

    },
    mounted() {
      this.GetTeacherList();
      this.getClassRoomList();
    },
    methods: {
      closeAppointForm() {
        this.persistent = false;
        this.$emit('close');
      },
      closeAuditForm() {
        this.isShowTeacher = false;
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            this.AllTeacherList = res.Data;
            var obj = {
              TeacherName: '请选择',
              TId: 0
            }
            this.TeacherList.unshift(obj);
            this.AllTeacherList.unshift(obj);
          }
        });
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
            var obj = {
              RoomName: '请选择',
              RoomId: 0
            }
            this.ClassRoomList.unshift(obj);
          }
        })
      },
      //保存
      saveAppointForm() {
        if (this.saveObj) {
          this.addMsg.Visitor_Id = this.saveObj.Id;
        }
        this.$refs.ClassDate.validate();
        this.$refs.ClassContent.validate();
        if (this.addMsg.ClassTime == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            timeout: 2000,
            message: '请选择预约开始时间！',
          })
          return;
        }
        if (this.addMsg.EndTime == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            timeout: 2000,
            message: '请选择预约结束时间！',
          })
          return;
        }
        if (!this.$refs.ClassDate.hasError && !this.$refs.ClassContent.hasError) {
          SetVisitorReserve(this.addMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
              this.$emit('success');
            } else {
              this.$q.notify({
                type: 'negative',
                position: "top",
                timeout: 2000,
                message: res.Message,
              })
            }
            this.closeAppointForm();
          })
        }
      },
      //子组件选中传值
      getchildInfo(obj) {
        if (obj) {
          this.addMsg.TeacherId = obj.TeacherId;
          this.addMsg.ClassRoomId = obj.ClassRoomId;
          this.addMsg.ReserveClassId = obj.ReserveClassId;
          this.addMsg.ClassDate = obj.ClassDateStr;
          this.addMsg.ClassTime = obj.ClassTime;
          this.addMsg.EndTime = obj.EndTime;
          this.addMsg.ClassContent = obj.ClassContent;
        }
      },
      //选择主讲内容赋值选择教师
      getTeacherChoose(content) {
        var TList = [];
        this.addMsg.TeacherId = '';
        this.TeacherList = this.AllTeacherList;
        this.TeacherList.forEach(x => {
          this.ContentList.forEach(y => {
            if (y.Name == content) {
              if (x.TId > 0) {
                if (x.ChooseSpecialty.indexOf(y.Id) > -1) {
                  TList.push(x);
                }
              }
            }
          })
        })
        this.TeacherList = TList;
      }
    }
  }
</script>