<template>
  <div>
    <Modal v-model="showModal" width="100" class="full-screen modal-header-none modal-footer-none">
      <!--左侧图例-->
      <div class="legend-task-box legend-task-box-left">
        <div>
          <div class="legend-task" style="background-color: #257e4a"></div>
          <div>检测任务</div>
        </div>
        <div>
          <div class="legend-task" style="background-color: #f29836"></div>
          <div>报告任务</div>
        </div>
      </div>
      <!--右侧-->
      <div @click="showModal=false" class="legend-task-box" style="left: auto;right: 15px;">
        <i class="pt-ivu-icon pt-narrow"></i>
      </div>
      <!--自定义日历头部-->
      <div class="calendar-title">
        <!--<div @click="_prev">-->
        <!--<Icon type="chevron-left"></Icon>-->
        <!--</div>-->
        <div>{{$dateformat(currentDate,'yyyy年mm月')+'待办'}}</div>
        <!--<div @click="_next">-->
        <!--<Icon type="chevron-right"></Icon>-->
        <!--</div>-->
      </div>
      <!--日历-->
      <div style="margin-top: 20px">
        <FullCalendar
          ref="fullCalendar"
          v-if="showModal"
          :height="calendarHeight"
          :plugins="calendarPlugins"
          :header="false"
          :events="calendarEvents"
          @dateClick="_handleDateClick"
          @eventClick="_handleEventClick"
          default-view="dayGridMonth"
          locale="zh-cn"
          event-order="order"
        ></FullCalendar>
      </div>
    </Modal>
    <TestTaskDetail ref="testTask"></TestTaskDetail>
    <ReportTaskDetail ref="reportTask"></ReportTaskDetail>
<!--    <component ref="refModal" :is="currentComponent"></component>-->
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import TestTaskDetail from './TestTaskDetail'
import ReportTaskDetail from './ReportTaskDetail'

export default {
  components: {
    TestTaskDetail,
    ReportTaskDetail,
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      currentComponent: '',
      showModal: false,
      currentDate: new Date(),
      calendarHeight: this.$tableHeight('', 90),
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarHeader: {
        left: '',
        center: 'title',
        right: ''
      },
      calendarEvents: []
    }
  },
  methods: {
    _open() {
      this.showModal = true
      this._request()
    },
    _request() {
      this.$store
        .dispatch('FoodContract/getTaskMonth', {
          searchDate: this.$dateformat(this.currentDate, 'yyyy-mm-dd')
        })
        .then(() => {
          const result = this.$store.state.FoodContract.list
          const event = []
          if (result) {
            for (let i = 0; i < result.length; i++) {
              if (result[i].testCount) {
                event.push({
                  title: '检测任务：' + result[i].testCount,
                  start: result[i].day,
                  color: '#257e4a'
                })
              }
              if (result[i].reportCount) {
                event.push({
                  title: '报告任务：' + result[i].reportCount,
                  start: result[i].day,
                  color: '#f29836'
                })
              }
            }
          }
          this.calendarEvents = event
        })
    },
    _handleDateClick(arg) {
      // 点击的当前日期
      console.log('date', arg)
    },
    _handleEventClick(arg) {
      // 开始和结束时间
      console.log('event', arg)
      const title = arg.event.title
      let total = ''
      if (title.indexOf('检测') !== -1) {
        this.currentComponent = 'TestTaskDetail'
        total = title.split('：')[1]
      } else if (title.indexOf('报告') !== -1) {
        this.currentComponent = 'ReportTaskDetail'
      }
      this.$nextTick(function() {
        if (this.currentComponent === 'TestTaskDetail') {
          this.$refs.refModal._open(
            this.$dateformat(arg.event.start, 'yyyy-mm-dd'),
            true,
            total
          )
        } else {
          this.$refs.refModal._open(
            this.$dateformat(arg.event.start, 'yyyy-mm-dd'),
            true
          )
        }
      })
    }
  }
}
</script>

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

.legend-task-box {
  position: absolute;
  left: 15px;
  top: 15px;
}

.legend-task-box > div {
  display: flex;
  line-height: 20px;
}

.legend-task {
  width: 15px;
  height: 10px;
  margin: 5px 5px 5px 0;
  border-radius: 2px;
}
</style>
