<template>
  <div class="data-watch">
    <el-card class="box-card">
      <div class="lcl-title">巡检日历</div>
      <!-- <full-calendar
        :events="fcEvents"
        lang="zh"
        @eventClick="moreClick"
        @dateClick="dateClick"
      ></full-calendar> -->
      <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
    </el-card>
  </div>
</template>
<script>
var demoEvents = [
  {
    title: "event1",
    start: "2023-03-01",
    end: "2023-03-01",
  },
  {
    title: "event2",
    start: "2023-03-02",
    end: "2023-03-03",
  },
];
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

// import { defineComponent } from "@vue/composition-api";
// import { displacementreal, displacementhistory } from "@/api/lclApi/lclapi";
export default {
  data() {
    return {
      calendarOptions: {
        // 引入的插件
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        // 日历头部按钮位置
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth, timeGridWeek, timeGridDay",
        },
        // 日历头部按钮中文转换
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "天",
        },
        initialView: "dayGridMonth", // 指定默认显示视图
        locale: "zh-ch", // 切换语言，当前为中文
        firstDay: "1", // 设置一周中显示的第一天是周几，周日是0，周一是1，以此类推
        weekNumberCalculation: "ISO", // 与firstDay配套使用
        eventCOlor: "#3d8eec", // 全部日历日程背景色
        timeGridEventMinHeight: "20", // 设置事件的最小高度
        aspectRatio: "1.5", // 设置日历单元格宽高比
        displayEventTime: false, // 是否显示事件时间
        allDaySlot: false, // 周、日视图时，all-day不显示
        eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
        eventTimeFormat: {
          hour: "numeric",
          minute: "2-digit",
          hour12: false,
        },
        slotLabelFormat: {
          hour: "2-digit",
          minute: "2-digit",
          meridiem: false,
          hour12: false, // 设置时间为24小时制
        },
        events: [], // 日程数组
        // 事件
        editable: true, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        weekends: true,
        navLinks: true, // 天链接
        selectHelper: false,
        selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
        dayMaxEvents: true,
        dateClick: this.handleDateClick, // 日期点击
        eventsSet: this.handleEvents, // 事件点击
        eventClick: this.handleEventClick, // 日程点击信息展示
        eventDrop: this.handleEventDrop, // 日程拖动事件
        eventResize: this.eventResize, // 日程缩放事件
      },
    };
  },
  components: {
    FullCalendar,
  },
  created() {},
  mounted() {
    this.$nextTick(() => {});
  },
  methods: {
    eventClick(e) {
      console.log(e, "eventClick");
    },
    dateClick(e) {
      console.log(e, "dateClick");
    },
    moreClick(day, e, jsEvent) {
      console.log(day, e, jsEvent, "moreClick");
    },
    // 日程保存
    saveEvent(val) {
      let eventsArr = this.calendarOptions.events;
      try {
        if (eventsArr.length === 0) {
          eventsArr.push(val);
        } else {
          eventsArr.forEach((item, index, eventsArr) => {
            // 若为修改日程
            if (item.eventID === val.eventID) {
              throw new Error(index);
            }
          });
          // 若为新增日程
          eventsArr.push(val);
        }
      } catch (e) {
        // 若为修改日程
        eventsArr.splice(e.message, 1, val);
      }
    },
    // 日程删除
    deleteEvent(val) {
      let eventsArr = this.calendarOptions.events;
      try {
        eventsArr.forEach((item, index, eventsArr) => {
          if (item.eventID === val) {
            throw new Error(index);
          }
        });
      } catch (e) {
        // 删除指定日程
        eventsArr.splice(parseInt(e.message), 1);
      }
    },
    // 日程事件点击
    handleEvents(info) {
      console.log("handleEvents.info:", info);
      // this.currentEvents = events
    },
    handleWeekendsToggle() {
      console.log("handleWeekendsToggle");
      this.calendarOptions.weekends = !this.calendarOptions.weekends;
    },
    // 日期点击
    handleDateClick(selectInfo) {
      if (
        confirm("您是否要在【" + selectInfo.dateStr + "】添加一个新的事件？")
      ) {
        // 父组件直接调用子组件方法
        this.$refs["eventDialogue"].openDialog("add");
        // 父组件直接修改子组件变量
        // this.$refs['eventDialogue'].dialogVisible = true
      }
    },
    // 日程点击信息展示
    handleEventClick(info) {
      console.log("handleEventClick.info:", info);
      info.el.style.borderColor = "red";
      this.$refs["eventDialogue"].openDialog("view", info);
    },
    // 日程事件触发
    eventClick(info) {
      console.log("eventClick.info:", info);
      info.el.style.borderColor = "red";
    },
    // 日程拖动事件
    handleEventDrop(info) {
      this.$refs["eventDialogue"].eventFormModel.start = info.event.start;
      this.$refs["eventDialogue"].eventFormModel.end = info.event.end;
    },
    // 日程缩放事件
    eventResize(info) {
      this.$refs["eventDialogue"].eventFormModel.start = info.event.start;
      this.$refs["eventDialogue"].eventFormModel.end = info.event.end;
    },
  },
};
</script>
<style lang="scss" scoped>
// @import "~@fullcalendar/core/main.css";
// @import "~@fullcalendar/daygrid/main.css";
// @import "~@fullcalendar/timegrid/main.css";
.data-watch {
  width: 100%;
  min-height: 100%;
  // border-radius: 10px;
  // background-color: teal;
  .box-card {
    width: 100%;
    .lcl-title {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      position: relative;
      padding-left: 10px;
      &:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 4px;
        width: 6px;
        height: 22px;
        background: #0d85f4;
      }
    }
  }
}
</style>