<template>
  <div>
    <Card style="width:100%;position: relative">
      <!--左侧图例-->
      <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 class="legend-task-box legend-task-box-right" style="top: 5px;right: 10px;display: flex">
        <Tooltip content="刷新" placement="left-start">
          <Icon @click="_request" type="refresh" size="20" style="cursor:pointer;"></Icon>
        </Tooltip>
        <Tooltip content="放大" placement="left-start" style="margin-left: 10px">
          <i @click="_fullScreen" class="pt-ivu-icon pt-enlarge"></i>
        </Tooltip>
      </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="width: 100%;">
        <full-calendar-vue
          ref="fullCalendar"
          :height="275"
          :header="false"
          :config="config"
          :events="calendarEvents"
        ></full-calendar-vue>
      </div>
    </Card>
    <TestTaskDetail ref="testTask"></TestTaskDetail>
    <ReportTaskDetail ref="reportTask"></ReportTaskDetail>
<!--    <TaskCalendarFullScreen ref="fullScreen"></TaskCalendarFullScreen>-->
<!--    <component ref="refModal" :is="currentComponent"></component>-->
<!--    <TestTaskDetail></TestTaskDetail>-->
<!--    <ReportTaskDetail></ReportTaskDetail>-->
<!--    <TaskCalendarFullScreen></TaskCalendarFullScreen>-->
  </div>
</template>

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

export default {
  components: {
    TestTaskDetail,
    ReportTaskDetail
    // TaskCalendarFullScreen,
    // FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      currentComponent: '',
      currentDate: new Date(),
      calendarPlugins: [
        // // plugins must be defined in the JS
        // dayGridPlugin,
        // interactionPlugin // needed for dateClick
      ],
      config: {
        firstDay: '0',
        locale: 'zh-cn',
        defaultView: 'month'
      },
      calendarHeader: {
        left: '',
        center: 'title',
        right: ''
      },
      calendarEvents: []
    }
  },
  mounted() {
    // this._request()
  },
  methods: {
    _fullScreen() {
      this.$refs.fullScreen._open()
      // this.currentComponent = 'TaskCalendarFullScreen'
      // this.$nextTick(function() {
      //   this.$refs.fullScreen._open()
      // })
    },
    _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>
</style>
