<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">
        <q-field label="类型" filled dense stack-label class="col-6 q-pb-lg q-pr-lg" v-if="addMsg.ReserveType==1">
          <template v-slot:control>
            <div >跟班</div>
          </template>
        </q-field>
        <!-- <q-field label="班级" filled dense stack-label class="col-6 q-pb-lg q-pr-lg" v-if="addMsg.ReserveType==1&&showObj.className">
          <template v-slot:control>
            <div>{{showObj.className}}</div>
          </template>
        </q-field> -->
        <q-field label="课程" filled dense stack-label class="col-6 q-pb-lg q-pr-lg" v-if="addMsg.ReserveType==1&&showObj.courseName">
          <template v-slot:control>
            <div>{{showObj.courseName}}</div>
          </template>
        </q-field>
      </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>
    <ShitingCourseList-form v-if="isShowTeacher" @close="closeAuditForm" @getchildInfo="getchildInfo">
    </ShitingCourseList-form>

  </div>
</template>
<script>
  import {
    SetVisitorReserve
  } from "../../../api/scheduling/schedu";
  import {
    getTeacherDropDownList,
    queryClassRoomList,
    GetTrialLessonList
  } from "../../../api/school/index";
  // import auditionForm from "../../schedul/audition-form";
  import ShitingCourseListForm from "./shitingCourseList-form.vue"
  export default {
    components: {
      // auditionForm,
      ShitingCourseListForm
    },
    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: "",
          ReserveType: 0,
          ClassPlanId: 0,
        },
        ContentList: [{
            Id: 1,
            Name: "少儿类：主要以丰富可与时间和兴趣为主，要求课堂轻松活跃。趣味性十足"
          },
          {
            Id: 2,
            Name: "兴趣类：成年人，对日语学习从兴趣开始，要求课堂丰富有趣"
          },
          {
            Id: 3,
            Name: "实用类：对于日语学习有一定的需求（考研、就业等），要求学习过程专业，干货多"
          },
          {
            Id: 4,
            Name: "留学类：打算去往日本留学（本科、硕士、语言学校、私塾等）"
          }
        ],
        ClassRoomList: [], //教师列表
        TeacherList: [], //教师列表
        AllTeacherList: [], //全部教师列表
        TrialList: [], //试听课程列表
        isShowTeacher: false, //是否显示试听课弹窗
        showObj:{
          className:"",
          courseName:"",
        }
      };
    },
    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 = JSON.parse(JSON.stringify(res.Data));
            this.AllTeacherList = JSON.parse(JSON.stringify(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 = "";
        this.addMsg.ReserveType = 0;
        this.addMsg.ClassPlanId = 0;
      },
      //保存
      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.ReserveType = obj.ReserveType;
          this.addMsg.ClassPlanId = obj.ClassPlanId;
          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;
          if (obj.ReserveType == 1) {
            this.addMsg.TrialLessonId = obj.TrialLessonId ? obj.TrialLessonId : this.TrialList[0].Id
            this.addMsg.ClassContent = obj.ClassContent ? obj.ClassContent : this.ContentList[0].Name
            this.showObj.courseName=obj.courseName
            this.showObj.className=obj.className
          }
          
          this.isShowReserve = true;
        }
      }
    }
  };

</script>
