<style></style>
<template>
  <div>
    <studyabroad :saveObj="saveObj" @close="closeReserveForm" @success="closeReserveForm"></studyabroad>
    <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 v-html="tItem.Remark">
                  </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 {
    queryVisitorReservePage,
    RemoveVisitorReserve
  } from "../../../api/scheduling/schedu";
  import studyabroad from "./studyabroad";
  export default {
    meta: {
      title: ""
    },
    components: {
      studyabroad
    },
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isShowAdd: false,
        qMsg: {
          pageIndex: 1,
          pageSize: 12,
          Visitor_Id: 0,
          IsReserve: 2,
        },
        dataList: [],
        page_Count: 0,
        userInfo: {}
      };
    },
    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 = "";
        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;



        // return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
      },
      //获取试听列表
      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>
