<template>
  <div>
    <FullCalendar :options="calendarOptions" ref="calendar" />

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="form" :rules="rules" ref="form" size="medium" label-width="80px">
        <el-form-item label="事件名称" prop="title">
          <el-input
            v-model="form.title"
            auto-complete="off"
            placeholder="请输入事件名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker
            v-model="form.end_time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          @click="deleteEvent"
          v-if="form.id"
          style="float: left"
          >删 除</el-button
        >
        <el-button size="medium" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button size="medium" type="primary" @click="saveEvent"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin /*, { Draggable }*/ from "@fullcalendar/interaction";

import {
  getCalendarList,
  addCalendar,
  updateCalendar,
  deleteCalendar,
} from "@/api/index";

import { /*getUUID, */mapTrim, parseTime } from "@/utils/index"

export default {
  name: "Calendar",
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarOptions: {
        height: "auto",
        firstDay: "1",
        locale: "zh-cn",
        initialView: "dayGridMonth",
        // timeZone: "UTC",
        weekNumberCalculation: "ISO",
        headerToolbar: {
          start: "prevYear,prev,today,next,nextYear",
          center: "title",
          end: "dayGridMonth,timeGridWeek,timeGridDay",
        },
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "天",
        },
        eventTimeFormat: {
          // hour: "numeric",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          meridiem: false,
          hour12: false, // 24小时
        },
        selectable: true,
        droppable: true,
        displayEventEnd: true,
        dayMaxEventRows: 5,
        dayMaxEvents: 5,
        editable: true,
        moreLinkClick: 'popover',
        events: [],
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick,
        select: this.handleSelect,
        eventDrop: this.handleEventDrop,
        datesSet: this.handleViewChange,
      },
      dialogVisible: false,
      form: {
        id: null,
        title: null,
        start_time: null,
        end_time: null,
      },
      rules: {
        title: [
          {
            type: "string",
            required: true,
            message: "事件标题不能为空",
            trigger: "blur",
          },
        ],
        start_time: [
          {
            type: "string",
            required: true,
            message: "事件开始时间不能为空",
            trigger: "blur",
          },
        ],
        end_time: [
          {
            type: "string",
            required: true,
            message: "事件结束时间不能为空",
            trigger: "blur",
          },
        ],
      },
      dialogTitle: "添加",
    };
  },
  // created() {
  //   const startTime = new Date();
  //   startTime.setDate(1);
  //   startTime.setHours(0);
  //   startTime.setMinutes(0);
  //   startTime.setSeconds(0);

  //   const endTime = new Date(startTime);
  //   endTime.setMonth(startTime.getMonth() + 1);
  //   endTime.setDate(0);
  //   endTime.setHours(0);
  //   endTime.setMinutes(0);
  //   endTime.setSeconds(0);

  //   this.getEventsList({
  //     'scope_type': 'list',
  //     'start_time': parseTime(startTime),
  //     'end_time': parseTime(endTime),
  //   })
  // },
  // mounted() {
  //   const calendar = this.$refs.calendar.getApi()
  //   calendar.addEvent({ title: '测试', start: '2021-01-05', allDay: true })
  // },
  methods: {
    getCalendarEvents(info, successCallback) { // 获取日历事件
      // info, successCallback, failureCallback
      let events = [
        ...this.calendarOptions.events,
        {
          title: info.startStr,
          start: info.start.valueOf(),
        },
      ];
      successCallback(events);
    },
    getEventsList(params) {
      const calendar = this.$refs.calendar.getApi()
      calendar.getEvents().forEach(evt => { // 先清除所有事件
        evt.remove();
      })
      getCalendarList(params)
        .then((res) => {
          res.data.forEach(evt => {
              calendar.addEvent({
                id: evt.id,
                title: evt.content,
                start: evt.start,
                end: evt.end,
                content: evt.title
              });
          })
        })
        .catch((err) => {
          console.log(err.message)
          // this.$message.error(err.message)
        });
    },
    handleMoreLinkClick() {},
    handleEventDrop(info) { // 当事件被拖动时会触发此函数
      // 拖动事件
      this.form.id = info.event.id
      this.form.title = info.event.extendedProps.content
      this.form.start_time = parseTime(info.event.start)
      if (info.event.end) this.form.end_time = parseTime(info.event.end)
      else this.form.end_time = this.form.start_time

      const calendar = this.$refs.calendar.getApi()
      updateCalendar(this.form.id, mapTrim(this.form))
        .then((res) => {
          this.$message({ type: "success", message: "修改成功" });
          const event = calendar.getEventById(this.form.id)
          event.setProp("title", res.data.content)
          event.setExtendedProp("content", res.data.title)
        })
        .catch((err) => {
          this.$message.error(err.message)
        });
    },
    handleSelect(info) { // 拖拽选择单元格会触发此函数
      this.form.start_time = parseTime(info.start)
      this.form.end_time = parseTime(info.end)
    },
    handleViewChange(info) { // 当视图切换后，需要重新获取数据
      this.getEventsList({
        'scope_type': 'calendar',
        'start_time': parseTime(info.start),
        'end_time': parseTime(info.end),
      })
    },
    handleDateClick(info) { // 点击单元格触发此函数
      this.dialogVisible = true;
      this.dialogTitle = "添加";
      this.form.title = "";
      this.form.start_time = parseTime(info.date);
      this.form.end_time = parseTime(info.date);
    },
    handleEventClick(info) { // 当事件被点击时会触发此函数
      console.log(info)
      // info.el.style.borderColor = "yellow";
      this.dialogVisible = true;
      this.dialogTitle = "修改";
      this.form.id = info.event.id
      this.form.title = info.event.extendedProps.content
      this.form.start_time = parseTime(info.event.start)
      if (info.event.end) this.form.end_time = parseTime(info.event.end)
    },
    saveEvent() {
      const calendar = this.$refs.calendar.getApi()
      // 保存事件
      this.$refs["form"].validate((valid) => {
        let result = true;
        if (valid) {
          if (this.dialogTitle === "添加")
            addCalendar(this.form)
              .then((res) => {
                this.$message({ type: "success", message: "添加成功" });
                calendar.addEvent({
                  id: res.data.id,
                  title: res.data.content,
                  start: res.data.start,
                  end: res.data.end,
                  content: res.data.title
                });
              })
              .catch((err) => {
                this.$message.error(err.message)
              });
          else if (this.dialogTitle === "修改")
            updateCalendar(this.form.id, this.form)
              .then((res) => {
                this.$message({ type: "success", message: "修改成功" });
                const event = calendar.getEventById(this.form.id)
                event.setProp("title", res.data.content)
                event.setExtendedProp("content", res.data.title)
              })
              .catch((err) => {
                this.$message.error(err.message)
              });
        } else {
          result = false;
          this.$message.error("表单校验未通过，请检查输入")
        }
        this.dialogVisible = false;
        return result;
      });
    },
    deleteEvent() {
      // 删除事件
      deleteCalendar(this.form.id)
        .then((res) => {
          this.calendarOptions.events.forEach((item, index, arr) => {
            console.log(res);
            if (item.id == this.form.id) arr.splice(index, 1);
          });
          this.dialogVisible = false;
          this.$message({ message: "删除成功", type: "success" });
        })
        .catch((err) => {
          this.$message.error(err.message)
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@fullcalendar/common/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
</style>