<style>

</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>
    <template v-if="isShowAdd">
      <reserveclass-form :saveObj="saveObj" @close="closeReserveForm" @success="closeReserveForm"></reserveclass-form>
    </template>
    <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">
                  <div>预约时间：{{tItem.ClassDateStr}} {{tItem.ClassTime}}-{{tItem.EndTime}}</div>
                  <div class="StuCom_Remark">
                    <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>
                <div @click="DeleteVisitorReserve(tItem.Id)" style="margin-top:10px;"
                  class="visit_delete text-negative">删除</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>

  </div>
</template>
<script>
  import {
    SetVisitorReserve,
    queryVisitorReservePage,
    RemoveVisitorReserve
  } from "../../../api/scheduling/schedu";

  import {
    getTeacherDropDownList,
    queryClassRoomList,
    GetTrialLessonList
  } from "../../../api/school/index";
  import reserveclassForm from './reserveclass-form'
  export default {
    meta: {
      title: ""
    },
    components: {
      reserveclassForm
    },
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isShowAdd: false,
        qMsg: {
          pageIndex: 1,
          pageSize: 12,
          Visitor_Id: 0,
        },
        dataList: [],
        page_Count: 0,
      }
    },
    created() {
      if (this.saveObj) {
        this.qMsg.Visitor_Id = this.saveObj.StuId;
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      //获取试听列表
      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(() => {});
      },
      closeReserveForm() {
        this.isShowAdd = false;
        this.getList();
      },
    },
  }
</script>