<style scoped>
.Student_Date .el-input__inner {
  background: transparent !important;
  border: 0 !important;
  padding-right: 0 !important;
}
</style>
<template>
  <div>
    <div class="row wrap">
      <q-btn
        label="选择试听课"
        color="accent q-mb-lg"
        size="sm"
        @click="isShowTeacher = true"
      />
    </div>
    <template v-if="isShowReserve">
      <div class="row studentDate">
        <q-field filled class="col-6 q-pb-lg q-pr-lg" dense>
          <template v-slot:control>
            <el-date-picker
              v-model="addMsg.ClassDate"
              ref="ClassDate"
              :rules="[val => !!val || '请选择预约日期']"
              style="width:225px"
              size="mini"
              type="date"
              placeholder="预约日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </template>
        </q-field>
        <div class="col-6 q-pr-lg Student_Date ">
          <q-field filled class="q-pb-lg" dense>
            <template v-slot:control>
              <el-time-select
                v-model="addMsg.ClassTime"
                size="mini"
                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"
                size="mini"
                dense
                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>
      </div>
      <div class="row wrap">
        <q-select
          filled
          stack-label
          option-value="Name"
          dense
          option-label="Name"
          @input="getTeacherChoose(addMsg.ClassContent)"
          v-model="addMsg.ClassContent"
          ref="ClassContent"
          :options="ContentList"
          :rules="[val => !!val || '请选择主讲内容']"
          label="主讲内容"
          class="col-6 q-pb-lg q-pr-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
          class="col-6 q-pb-lg q-pr-lg"
          emit-value
          map-options
        />
      </div>
      <div class="row wrap">
        <q-select
          filled
          stack-label
          option-value="RoomId"
          dense
          option-label="RoomName"
          v-model="addMsg.ClassRoomId"
          ref="ClassRoomId"
          :options="ClassRoomList"
          label="关联教室"
          class="col-6 q-pb-lg q-pr-lg"
          emit-value
          map-options
        />
        <q-select
          filled
          stack-label
          option-value="Id"
          dense
          option-label="LessonName"
          v-model="addMsg.TrialLessonId"
          :options="TrialList"
          label="试听课程"
          class="col-6 q-pb-lg q-pr-lg"
          emit-value
          map-options
        />
      </div>
      <div class="row wrap justify-end q-pr-lg" style="margin-bottom:10px;">
        <q-btn
          label="关闭"
          flat
          color="accent q-mb-lg"
          size="md"
          style="margin-right:10px;"
          @click="closeClassForm"
        />
        <q-btn
          label="保存"
          color="accent q-mb-lg"
          size="md"
          @click="saveAppointForm()"
        />
      </div>
    </template>
    <audition-form
      v-if="isShowTeacher"
      @close="closeAuditForm"
      @getchildInfo="getchildInfo"
    ></audition-form>
  </div>
</template>
<script>
import { SetVisitorReserve } from "../../../api/scheduling/schedu";
import {
  getTeacherDropDownList,
  queryClassRoomList,
  GetTrialLessonList
} from "../../../api/school/index";
import auditionForm from "../../schedul/audition-form";
export default {
  components: {
    auditionForm
  },
  props: {
    saveObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      isShowReserve:false,
      addMsg: {
        Id: 0, //编号
        Visitor_Id: 0, //访客编号
        ReserveClassId: 0, //选中的班级编号
        ClassDate: "", //预约日期
        ClassTime: "", //预约开始时间
        EndTime: "", //预约结束时间
        TeacherId: 0, //教师编号
        ClassRoomId: 0, //教室编号
        ClassContent: "", //主讲内容
        TrialLessonId: ""
      },
      ContentList: [
        {
          Id: 1,
          Name:
            "少儿类：主要以丰富可与时间和兴趣为主，要求课堂轻松活跃。趣味性十足"
        },
        {
          Id: 2,
          Name: "兴趣类：成年人，对日语学习从兴趣开始，要求课堂丰富有趣"
        },
        {
          Id: 3,
          Name:
            "实用类：对于日语学习有一定的需求（考研、就业等），要求学习过程专业，干货多"
        },
        {
          Id: 4,
          Name: "留学类：打算去往日本留学（本科、硕士、语言学校、私塾等）"
        }
      ],
      ClassRoomList: [], //教师列表
      TeacherList: [], //教师列表
      AllTeacherList: [], //全部教师列表
      TrialList: [], //试听课程列表
      isShowTeacher: false //是否显示试听课弹窗
    };
  },
  created() {
    this.GetTrialDrop();
    this.getClassRoomList();
    this.GetTeacherList();
  },
  mounted() {
    if (this.saveObj) {
      this.addMsg.Visitor_Id = this.saveObj.StuId;
    }
  },
  methods: {
    //关闭窗口
    closeClassForm() {
      this.isShowReserve = false;
      this.$emit("success");
    },
    //选择主讲内容赋值选择教师
    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;
    },
    //试听课程列表
    GetTrialDrop() {
      GetTrialLessonList({}).then(res => {
        if (res.Code == 1) {
          this.TrialList = res.Data;
        }
      });
    },
    //获取教室下拉
    getClassRoomList() {
      queryClassRoomList({}).then(res => {
        if (res.Code == 1) {
          this.ClassRoomList = res.Data;
          var obj = {
            RoomName: "请选择",
            RoomId: 0
          };
          this.ClassRoomList.unshift(obj);
        }
      });
    },
    //获取教师下拉
    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);
        }
      });
    },
    //清除
    clearMsg() {
      this.addMsg.Id = 0;
      this.addMsg.ReserveClassId = 0;
      this.addMsg.ClassDate = "";
      this.addMsg.ClassTime = "";
      this.addMsg.EndTime = "";
      this.addMsg.TeacherId = 0;
      this.addMsg.ClassRoomId = 0;
      this.addMsg.ClassContent = "";
      this.addMsg.TrialLessonId = "";
    },
    //保存
    saveAppointForm() {
      if (this.addMsg.ClassDate == "") {
        this.$q.notify({
          type: "negative",
          position: "top",
          timeout: 2000,
          message: "请选择预约日期！"
        });
        return;
      }
      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.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.clearMsg();
          this.isShowReserve = false;
        });
      }
    },
    closeAuditForm() {
      this.isShowTeacher = false;
    },
    //子组件选中传值
    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;
        this.addMsg.TrialLessonId = obj.TrialLessonId;
        this.isShowReserve = true;
      }
    }
  }
};
</script>
