<style lang="scss" scoped>
  ::v-deep .el-input__inner {
    background-color: rgba(25, 25, 25, 0);
    border: 0;
  }

  .divP p {
    margin: 0px !important;
  }

</style>

<template>
  <div :class="[$q.platform.is.mobile?'q-pa-md bg-grey-1':'']" :style="{'height':$q.platform.is.mobile?'100vh':''}">
    <p class="text-center small text-weight-bold text-h6" v-if="type">试听开课</p>
    <div class="row wrap">
      <div style="width:100%;margin-bottom:15px;">试听时间：<span
          style="color:red;">{{timeFormatSeconds(setClassMsg.ReservationDate)}}</span></div>
      <div style="width:100%;margin-bottom:15px;"> <span style="float:left;"> 试听需求：</span>
        <div style="color:red;" class="divP" v-html="setClassMsg.Demand">
        </div>
      </div>
    </div>
    <q-card class="bg-white q-pa-md" flat>
      <div class="row studentDate">
        <q-field filled dense :class="[$q.platform.is.mobile?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
          <template v-slot:control>
            <el-date-picker v-model="setClassMsg.ClassDate" ref="ClassDate" :rules="[val => !!val || '请选择预约日期']"
              style="width:100%" size="mini" type="date" placeholder="预约日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </template>
        </q-field>
        <div class="Student_Date " :class="[$q.platform.is.mobile?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
          <q-field filled class="" dense>
            <template v-slot:control>
              <el-time-select v-model="setClassMsg.ClassTime" size="mini" ref="ClassTime" style="width:50%;"
                :picker-options="{
                    start: '09:00',
                    step: '00:15',
                    end: '21:00',
                    maxTime: setClassMsg.EndTime
                  }" placeholder="预约开始时间">
              </el-time-select>
              <el-time-select v-model="setClassMsg.EndTime" size="mini" dense ref="EndTime" style="width:50%;"
                :picker-options="{
                    start: '09:00',
                    step: '00:15',
                    end: '21:00',
                    minTime: setClassMsg.ClassTime
                  }" placeholder="预约结束时间">
              </el-time-select>
            </template>
          </q-field>
        </div>
      </div>
      <div class="row wrap">
        <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="setClassMsg.TeacherId"
          ref="TeacherId" :options="TeacherList" label="选择教师" dense class="col-6"
          :class="[$q.platform.is.mobile?'q-pr-sm q-pb-sm':'q-pr-lg q-pb-lg']" emit-value map-options />
        <q-select filled stack-label option-value="RoomId" dense option-label="RoomName"
          v-model="setClassMsg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" class="col-6"
          :class="[$q.platform.is.mobile?'q-pl-sm q-pb-sm':'q-pr-lg q-pb-lg']" emit-value map-options />
        <q-select filled stack-label option-value="Id" dense option-label="LessonName"
          v-model="setClassMsg.TrialLessonId" :options="TrialList" label="试听课程" class="col-6"
          :class="[$q.platform.is.mobile?'q-pr-sm':'q-pr-lg q-pb-lg']" emit-value map-options />
      </div>
    </q-card>

    <div slot="footer" class="dialog-footer"
      :class="[$q.platform.is.mobile?'text-center q-pt-lg row':'text-right q-pb-lg']">
      <el-button v-if="!$q.platform.is.mobile" @click="closeShitingKaiKe()">取 消</el-button>
      <el-button type="primary" @click="SetVisitorReserveClass()" :class="[$q.platform.is.mobile?'col-12':'']">
        {{type?'保 存':'确 定'}}</el-button>
    </div>
    <statusPrompt v-if="isSuccess" :isSuccess="isSuccess" :isSuccessTitle="isSuccessTitle"></statusPrompt>
  </div>
</template>

<script>
  import {
    SetVisitorReserve,
    queryVisitorReservePage,
    RemoveVisitorReserve,
    SetVisitorReserveFeedback,
    SetVisitorReserveClass,
    GetVisitorReserveById,
  } from "../../../api/scheduling/schedu";
  import {
    getTeacherDropDownList,
    queryClassRoomList,
    GetTrialLessonList
  } from "../../../api/school/index";
  import statusPrompt from "./statusPrompt";
  export default {
    props: ['VisitorReserveClassMsg', 'type'],
    components: {
      statusPrompt
    },
    data() {
      return {
        AllTeacherList: [],
        TeacherList: [],
        ClassRoomList: [],
        TrialList: [],
        setClassMsg: {
          Id: 0,
          Visitor_Id: 0,
          Remark: "",
          ReserveClassId: 0,
          ClassDate: "",
          ReservationDate: "",
          ClassTime: "",
          TeacherId: 0,
          ClassRoomId: 0,
          ClassContent: "",
          EndTime: "",
          TrialLessonId: 0,
          ReserveType: 0,
          ClassPlanId: 0,
          Demand: "",
        },
        isSuccess: false,
        isSuccessTitle: '',
        Id: 0,
      }
    },
    watch: {
      VisitorReserveClassMsg: {
        handler(newValue) {
          this.setClassMsg = {
            Id: newValue.Id,
            Visitor_Id: newValue.Visitor_Id,
            Remark: newValue.Remark,
            ReserveClassId: newValue.ReserveClassId,
            ClassDate: newValue.ClassDate,
            ReservationDate: newValue.ReservationDate,
            ClassTime: newValue.ClassTime,
            TeacherId: newValue.TeacherId,
            ClassRoomId: newValue.ClassRoomId,
            ClassContent: newValue.ClassContent,
            EndTime: newValue.EndTime,
            TrialLessonId: newValue.TrialLessonId,
            ReserveType: newValue.ReserveType,
            ClassPlanId: newValue.ClassPlanId,
            Demand: newValue.Demand,
          }
        },
        deep: true,
        immediate: false
      },
      type: {
        handler(newValue) {

        },
        immediate: true
      }
    },
    computed: {},
    mounted() {
      if (this.$route.query.Id) {
        this.Id = this.$route.query.Id
        this.GetVisitorReserve()
      }
      this.GetTeacherList()
      this.GetTrialDrop()
      this.getClassRoomList()
    },
    methods: {
      //保存
      SetVisitorReserveClass() {
        if (this.setClassMsg.ClassDate == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择预约日期！"
          });
          return;
        }
        if (!this.setClassMsg.ClassTime) {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择预约开始时间！"
          });
          return;
        }
        if (!this.setClassMsg.EndTime) {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择预约结束时间！"
          });
          return;
        }
        if (!this.setClassMsg.TeacherId) {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择老师！"
          });
          return;
        }


        SetVisitorReserveClass(this.setClassMsg).then(res => {
          if (res.Code == 1) {
            if (this.type) {
              this.isSuccess = true
              this.isSuccessTitle = '试听课开课成功！'
            } else {
              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.$emit('close')
        });
      },

      closeShitingKaiKe() {
        this.setClassMsg = {
          Id: 0,
          Visitor_Id: 0,
          Remark: "",
          ReserveClassId: 0,
          ClassDate: "",
          ReservationDate: "",
          ClassTime: "",
          TeacherId: 0,
          ClassRoomId: 0,
          ClassContent: "",
          EndTime: "",
          TrialLessonId: 0,
          ReserveType: 0,
          ClassPlanId: 0,
          Demand: "",
        }
        this.$emit('close')
      },
      timeFormatSeconds(time, type) {
        let timeStr = "";
        if (time === '0001-01-01T00:00:00') {
          return timeStr;
        }
        var d = time ? new Date(time) : new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        if (month < 10) month = '0' + month;
        if (day < 10) day = '0' + day;
        if (type == 2) {
          var hours = d.getHours();
          var min = d.getMinutes();
          var seconds = d.getSeconds();
          if (hours < 0) hours = '0' + hours;
          if (min < 10) min = '0' + min;
          if (seconds < 10) seconds = '0' + seconds;
          timeStr += ' ' + hours + ':' + min + ':' + seconds;
        }

        timeStr = year + '-' + month + '-' + day + timeStr;
        return timeStr;
      },
      //试听课程列表
      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);
          }
        });
      },
      GetVisitorReserve() {
        GetVisitorReserveById({
          Id: this.Id
        }).then(res => {
          if (res.Data.length > 0) {
            let Data = res.Data[0]
            this.setClassMsg = {
              Id: Data.Id, //编号
              Visitor_Id: Data.Visitor_Id, //访客编号
              ReserveClassId: Data.ReserveClassId, //选中的班级编号
              ClassDate: Data.ClassDateStr, //预约日期
              ClassTime: Data.ClassTime, //预约开始时间
              EndTime: Data.EndTime, //预约结束时间
              TeacherId: Data.TeacherId, //教师编号
              TeacherName: Data.TeacherName,
              ClassRoomId: Data.ClassRoomId, //教室编号
              RoomName: Data.RoomName,
              ClassContent: Data.ClassContent, //主讲内容
              TrialLessonId: Data.TrialLessonId,
              LessonName: Data.LessonName,
              ReserveType: Data.ReserveType,
              ClassPlanId: Data.ClassPlanId,
              VisitorName: Data.VisitorName,
              Demand: Data.Demand,
              ReservationDate: Data.ReservationDate,
            }
          }

        })
      },

    }
  }

</script>
