<template>
  <div class="Schedule-container app-container">
    <FullCalendar class='demo-app-calendar' ref="fullCalendar" defaultView="dayGridMonth" :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }" :plugins="calendarPlugins" :weekends="calendarWeekends" :events="calendarEvents"
      @dateClick="handleDateClick" locale='zh-cn' @eventClick='eventClick' :buttonText='buttonText'
      height='parent' :eventLimit='true' allDayText='全天' :editable='true'
      @datesRender="datesRender" />
    <!-- :dayNamesShort='dayNamesShort' :dayNames='dayNamesShort' axisFormat='HH:mm' timeFormat='HH:mm' -->
    <Form v-if="formVisible" ref="Form" @refreshDataList="refreshDataList" />
  </div>
</template>
<script>
import { AppDayList, AppList, List } from '@/api/extend/schedule'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrapPlugin from '@fullcalendar/bootstrap';
import Form from './Form'
export default {
  name: 'extend-schedule',
  components: {
    FullCalendar,
    Form
  },
  data() {
    return {
      formVisible: false,
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        bootstrapPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [],
      buttonText: { today: "今日", month: "月", week: "周", day: "日", list: "日程" },
      dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      titleFormat: { year: 'numeric', month: '2-digit' },
      columnHeaderFormat: [
        'ddd',    // Mon
        'MM月dd日 ddd', // Mon 9/7
        'MM月dd日 ddd'  // Monday 9/7
      ],
      startTime: '',
      endTime: '',
    }
  },
  created() { },
  mounted() {
    // let calendarApi = this.$refs.fullCalendar.getApi()
    // console.log(calendarApi);
  },
  methods: {
    datesRender(calendar) {
      let view = calendar.view
      this.startTime = this.ncc.toDate(view.activeStart, "yyyy-MM-dd HH:mm")
      this.endTime = this.ncc.toDate(view.activeEnd, "yyyy-MM-dd HH:mm")
      this.initData()
    },
    handleDateClick(arg) {
      let startTime = this.ncc.toDate(arg.date, "yyyy-MM-dd HH:00"),
        clickTime = this.ncc.toDate(arg.date, "yyyyMMdd"),
        currTime = this.ncc.toDate(new Date(), "yyyyMMdd");
      if (clickTime < currTime) return
      if (clickTime == currTime) {
        let thisDate = new Date();
        thisDate.setHours(thisDate.getHours() + 1);
        startTime = this.ncc.toDate(thisDate, "yyyy-MM-dd HH:00");
      }
      this.addOrUpdateHandle('', startTime)
      this.addOrUpdateHandle('', new Date(startTime).getTime())
    },
    eventClick(data) {
      if (this.ncc.toDate(data.event.start, "yyyyMMddHHmm") > this.ncc.toDate(new Date(), "yyyyMMddHHmm")) {
        this.addOrUpdateHandle(data.event.id)
      }
    },
    initData() {
      // let query = {
      //   startTime: new Date(this.startTime).getTime(),
      //   endTime: new Date(this.endTime).getTime(),
      // }
      let query = {
        startTime: this.startTime,
        endTime: this.endTime,
      }
      List(query).then(res => {
        this.calendarEvents = res.data.list.map(o => ({
          id: o.id,
          title: o.content,
          start: o.startTime,
          end: o.endTime,
          color: o.colour,
          editable: false,
          allDay: false
        }))
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id, startTime) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.Form.init(id, startTime)
      })
    },
    refreshDataList() {
      this.formVisible = false
      this.initData()
    }
  }
}
</script>
<style lang='scss'>
// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/bootstrap/main.css';
.Schedule-container {
  padding: 0;
  .fc-toolbar.fc-header-toolbar {
    padding: 10px;
    margin-bottom: 0;
  }
  .fc-button-primary {
    background-color: #1890ff;
    border-color: #1890ff;
    height: 32px;
    line-height: 32px;
    padding: 0 0.65em;
    font-size: 12px;
  }
  .fc-button-primary:not(:disabled):active,
  .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #1682e6;
    border-color: #1682e6;
  }
  .fc-button .fc-icon {
    line-height: 16px;
  }
  .fc-unthemed th {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #909399;
    font-weight: normal;
    background: #f5f7fa;
  }
  .fc-center {
    color: #606266;
  }
  .fc-unthemed th,
  .fc-unthemed td,
  .fc-unthemed thead,
  .fc-unthemed tbody,
  .fc-unthemed .fc-divider,
  .fc-unthemed .fc-row,
  .fc-unthemed .fc-content,
  .fc-unthemed .fc-popover,
  .fc-unthemed .fc-list-view,
  .fc-unthemed .fc-list-heading td {
    border-color: #ebeef5;
    color: #606266;
  }
}
</style>