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

</style>
<template>
  <div>
    <!-- <div class="row wrap">
      <q-btn
        label="新增"
        color="accent q-mb-lg"
        size="sm"
        @click="isShowAdd = true"
      />
      <q-btn
        label="取消"
        style="margin-left:20px;"
        v-if="isShowAdd"
        flat
        color="grey-10 q-mb-lg"
        size="sm"
        @click="isShowAdd = false"
      />
    </div> -->
    <reserveclass-form :saveObj="saveObj" @close="closeReserveForm" @success="closeReserveForm"
      v-if="!saveObj.IsHaveCurseManager || userInfo.IsCourseConsultant == 1"></reserveclass-form>
    <span v-else class="text-grey-4 q-mb-md">学员已推送课程顾问，只能进行查看</span>
    <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
      <div class="TimeLineDiv">
        <q-timeline color="primary">
          <q-timeline-entry v-for="(tItem, tIndex) in dataList" :key="tIndex">
            <template v-slot:title>
              <div class="visit_Cont">
                <div class="Log_Content">
                  <q-chip color="primary" size="xs" text-color="white" style="position:absolute;:top:0;right:0"
                    v-if="tItem.ReserveType==1">
                    跟班
                  </q-chip>
                  <div
                    v-if="tItem.ReservationDate&&tItem.ReservationDate.length>0&&tItem.ReservationDate!='0001-01-01T00:00:00'">
                    试听日期：{{ timeFormatSeconds(tItem.ReservationDate) }}
                  </div>
                  <div v-if="tItem.Demand&&tItem.Demand.length>0">
                    <span style="float:left;"> 试听需求：</span>
                    <div v-html="tItem.Demand" class="divP"></div>
                  </div>
                  <div>
                    预约时间：{{ tItem.ClassDateStr }} {{ tItem.ClassTime }}
                    <template v-if="tItem.ClassDateStr&&tItem.ClassDateStr.length>0">-</template>
                    {{ tItem.EndTime }}
                  </div>
                  <div class="StuCom_Remark" v-if="false">
                    <div style="flex-shrink:0">主讲内容：</div>
                    <div class="StuCom_Inner">{{ tItem.ClassContent }}</div>
                  </div>
                  <div>主讲老师：{{ tItem.TeacherName }}</div>
                  <div>课程名称：{{ tItem.LessonName }}</div>
                  <div class="StuCom_Remark">
                    <span class="StuCom_Left">教室</span>：{{ tItem.RoomName }}
                  </div>
                  <div class="StuCom_Remark" v-if="tItem.Feedback&&tItem.Feedback.length>0">
                    <div style="flex-shrink:0">学员反馈：</div>
                    <div class="StuCom_Inner" v-html="tItem.Feedback "></div>
                  </div>
                </div>
                <div style="margin-top:10px;width:150px;" class="visit_delete text-negative">
                  <span @click="DeleteVisitorReserve(tItem.Id)" style="margin-right:10px;">删除</span>
                  <span v-if="tItem.ReserveClassId>0" style="margin-right:10px;"
                    @click="fabkuiMsg.IsShow=true,fabkuiMsg.Id=tItem.Id,fabkuiMsg.Feedback=tItem.Feedback">反馈</span>
                  <!-- <span v-if="tItem.ReserveClassId==0" @click="ShitingKaiKe(tItem)">试听课开课</span> -->
                </div>
              </div>
            </template>
            <template v-slot:subtitle>
              <div class="Time_TopList">
                <div>{{ tItem.CreateTimeStr2 }}</div>
                <div>{{ tItem.CreateByName }}</div>
              </div>
            </template>
          </q-timeline-entry>
        </q-timeline>
      </div>
    </div>
    <div style="margin:20px 0;">
      <q-pagination class="full-width justify-end" v-model="qMsg.pageIndex" color="primary" :max="page_Count" input
        @input="changePage" />
    </div>
    <el-dialog title="试听反馈" :visible.sync="fabkuiMsg.IsShow">
      <div class="row studentDate">
        <UeEditor v-model="fabkuiMsg.Feedback" class="q-pb-sm" :config="config"></UeEditor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fabkuiMsg.IsShow=false,fabkuiMsg.Id=0,fabkuiMsg.Feedback=''">取 消</el-button>
        <el-button type="primary" @click="saveFankuiForm()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog title="试听开课" :visible.sync="VisitorReserveClassMsg.IsShow" width="30%" @close="closeShitingKaiKe">
      <audition :VisitorReserveClassMsg="VisitorReserveClassMsg" @close="closeShitingKaiKe"
        @success="SetVisitorReserveClass()"></audition>
    </el-dialog> -->
  </div>
</template>
<script>
  import {
    SetVisitorReserve,
    queryVisitorReservePage,
    RemoveVisitorReserve,
    SetVisitorReserveFeedback,
    SetVisitorReserveClass
  } from "../../../api/scheduling/schedu";
  import UeEditor from "../../editor/UeEditor";
  import {
    getTeacherDropDownList,
    queryClassRoomList,
    GetTrialLessonList
  } from "../../../api/school/index";
  import reserveclassForm from "./reserveclass-form";
  import reserveclasskaikeform from "./reserveclasskaikeform";
  import audition from "../../../pages/h5page/components/audition";

  export default {
    meta: {
      title: ""
    },
    components: {
      reserveclassForm,
      reserveclasskaikeform,
      UeEditor,
      audition
    },
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 90
        },
        isShowAdd: false,
        qMsg: {
          pageIndex: 1,
          pageSize: 12,
          Visitor_Id: 0,
          IsReserve: 1,
        },
        dataList: [],
        page_Count: 0,
        userInfo: {},
        fabkuiMsg: {
          Id: 0,
          Feedback: "",
          IsShow: false,
        },
        ClassRoomList: [], //教师列表
        TeacherList: [], //教师列表
        AllTeacherList: [], //全部教师列表
        TrialList: [], //试听课程列表
        VisitorReserveClassMsg: {
          Id: 0,
          Visitor_Id: 0,
          Remark: "",
          ReserveClassId: 0,
          ClassDate: "",
          ReservationDate: "",
          ClassTime: "",
          TeacherId: 0,
          ClassRoomId: 0,
          ClassContent: "",
          EndTime: "",
          TrialLessonId: 0,
          ReserveType: 0,
          ClassPlanId: 0,
          Demand: "",
          IsShow: false,
        }
      };
    },
    created() {
      if (this.saveObj) {
        this.qMsg.Visitor_Id = this.saveObj.StuId;
        this.userInfo = this.getLocalStorage();
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      //获得年月日时分秒
      //传入日期//例：2020-10-27T14:36:23
      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;
      },
      //保存
      SetVisitorReserveClass() {
        this.closeShitingKaiKe();
        this.getList();
        this.$forceUpdate()
        return
        if (this.VisitorReserveClassMsg.ClassDate == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择预约日期！"
          });
          return;
        }
        if (this.VisitorReserveClassMsg.ClassTime == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择预约开始时间！"
          });
          return;
        }
        if (this.VisitorReserveClassMsg.EndTime == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择预约结束时间！"
          });
          return;
        }
        SetVisitorReserveClass(this.VisitorReserveClassMsg).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.closeShitingKaiKe();
          this.getList();
        });
      },
      closeShitingKaiKe() {
        this.VisitorReserveClassMsg.Id = 0;
        this.VisitorReserveClassMsg.Visitor_Id = 0;
        this.VisitorReserveClassMsg.Remark = "";
        this.VisitorReserveClassMsg.ReserveClassId = 0;
        this.VisitorReserveClassMsg.ClassDate = "";
        this.VisitorReserveClassMsg.ReservationDate = "";
        this.VisitorReserveClassMsg.ClassTime = "";
        this.VisitorReserveClassMsg.TeacherId = 0;
        this.VisitorReserveClassMsg.ClassRoomId = 0;
        this.VisitorReserveClassMsg.ClassContent = "";
        this.VisitorReserveClassMsg.EndTime = "";
        this.VisitorReserveClassMsg.TrialLessonId = 0;
        this.VisitorReserveClassMsg.ReserveType = 0;
        this.VisitorReserveClassMsg.ClassPlanId = 0;
        this.VisitorReserveClassMsg.Demand = "";
        this.VisitorReserveClassMsg.IsShow = false;
        this.$forceUpdate()
      },
      //试听课开课
      ShitingKaiKe(item) {
        let obj = JSON.parse(JSON.stringify(item));
        this.GetTrialDrop();
        this.getClassRoomList();
        this.GetTeacherList();
        this.VisitorReserveClassMsg = obj;
        this.VisitorReserveClassMsg.Id = obj.Id;
        this.VisitorReserveClassMsg.Visitor_Id = obj.Visitor_Id;
        this.VisitorReserveClassMsg.Remark = obj.Remark;
        this.VisitorReserveClassMsg.ReserveClassId = obj.ReserveClassId;
        this.VisitorReserveClassMsg.ClassDate = obj.ClassDate;
        this.VisitorReserveClassMsg.ReservationDate = obj.ReservationDate;
        this.VisitorReserveClassMsg.ClassTime = obj.ClassTime;
        this.VisitorReserveClassMsg.TeacherId = obj.TeacherId;
        this.VisitorReserveClassMsg.ClassRoomId = obj.ClassRoomId;
        this.VisitorReserveClassMsg.ClassContent = obj.ClassContent;
        this.VisitorReserveClassMsg.EndTime = obj.EndTime;
        this.VisitorReserveClassMsg.TrialLessonId = obj.TrialLessonId;
        this.VisitorReserveClassMsg.ReserveType = obj.ReserveType;
        this.VisitorReserveClassMsg.ClassPlanId = obj.ClassPlanId;
        this.VisitorReserveClassMsg.Demand = obj.Demand;
        if (this.VisitorReserveClassMsg.ClassDate == '0001-01-01T00:00:00') {
          this.VisitorReserveClassMsg.ClassDate = new Date(obj.ReservationDate);
        }
        this.VisitorReserveClassMsg.IsShow = true;
      },
      //试听课程列表
      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);
          }
        });
      },
      //获取试听列表
      getList() {
        queryVisitorReservePage(this.qMsg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.page_Count = res.Data.PageCount;
          }
        });
      },
      changePage(val) {
        this.qMsg.pageIndex = val;
        this.getList();
      },
      //删除试听
      DeleteVisitorReserve(Id) {
        let that = this;
        this.$q
          .dialog({
            title: "提示信息",
            message: "是否确定此试听信息删除？",
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消"
          })
          .onOk(() => {
            RemoveVisitorReserve({
              Id: Id
            }).then(res => {
              that.$q.notify({
                icon: "iconfont icon-chenggong",
                timeout: 2000,
                message: res.Message,
                position: "top"
              });
              that.getList();
            });
          })
          .onCancel(() => {});
      },
      //试听反馈
      //保存
      saveFankuiForm() {
        if (this.fabkuiMsg.Feedback == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请输入学员反馈内容！"
          });
          return;
        }
        SetVisitorReserveFeedback(this.fabkuiMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: res.Message,
              position: "top"
            });
            this.getList();
            this.$emit("success");
          } else {
            this.$q.notify({
              type: "negative",
              position: "top",
              timeout: 2000,
              message: res.Message
            });
          }
          this.fabkuiMsg.IsShow = false;
          this.fabkuiMsg.Id = 0;
          this.fabkuiMsg.Feedback = '';
        });
      },
      closeReserveForm() {
        this.isShowAdd = false;
        this.getList();
      }
    }
  };

</script>
