<template>
  <div class="app-container">
    <!-- 这里是自定义头部，切换视图类型和切换日期 -->
    <div class="calendarHeader">
      <div class="header_left">
        <h1>{{ type === '3' ? '列表' : calendarTitle }}</h1>
      </div>
      <div class="header_right">
        <!-- <span v-if="type!=='3'&&isShowBack" class="blue-color backToday" @click="getToday()">{{ type==='1'?'返回本月':'返回本周' }}</span>
        <el-select v-model="type" placeholder="视图类型" style="width: 80px" size="small" class="header_select" @change="handleChangeType">
          <el-option label="月" value="1" />
          <el-option label="周" value="2" />
          <el-option label="列" value="3" />
        </el-select> -->
        <!-- 选择月份的日期框 -->
        <el-date-picker
          v-if="type === '1'"
          v-model="showMonth"
          type="month"
          size="small"
          :clearable="false"
          placeholder="请选择日期"
          style="margin-left: 10px; vertical-align: middle"
          @change="changeDate"
        />
        <el-button-group v-if="type === '2'" style="margin-left: 10px">
          <el-button size="small" class="el-icon-arrow-left" @click="getPrev()">上一周</el-button>
          <el-button size="small" @click="getNext()">下一周<i class="el-icon-arrow-right" /></el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 月视图和周视图显示，列视图显示表格形式 -->
    <div v-show="type !== '3'" ref="fullcalendar" class="card" />
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
import dayjs from 'dayjs'
import { getAccountCalendarInfo } from '@/api/invest/accountAnalysis.js'
export default {
  name: 'PlanManagement',
  components: {},
  setup() {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      calendarTitle: new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月', // 日历头部显示文字
      dialogVisiable: false,
      showMonth: new Date(), // 显示月份
      loading: false,
      isShowBack: false, // 是否显示回到当月或当周
      planCategoryId: '', // 计划分类Id
      type: '1',
      dialogType: '',
      detailInfo: {},
      Tcalendar: null,
      drawerVisiable: false,
      drawerType: '',
      colorJSON: {
        // 我这里有类别的概念，不同的类别又有不同的颜色
        green: { title: '#00B578', class: 'green' },
        red: { title: '#FA5151', class: 'red' },
        orange: { title: '#FF8F1F', class: 'orange' },
        yellow: { title: '#FFC300', class: 'yellow' },
        cyan: { title: '#07B9B9', class: 'cyan' },
        blue: { title: '#3662EC', class: 'blue' },
        purple: { title: '#8A38F5', class: 'purple' },
        magenta: { title: '#EB2F96', class: 'magenta' }
      },
      fullcalendar: ref(),
      nowDate: new Date(),
      infoList: [], // 日历显示的列信息
      categoryJSON: {} // 计划分类json
    })
    onMounted(() => {
      initCalendar()
      getCalendarList()
    })
    const initCalendar = () => {
      state.Tcalendar = new Calendar(state.fullcalendar, {
        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        aspectRatio: 2.2,
        locale: 'zh-cn',
        handleWindowResize: true,
        editable: true, // 允许编辑表格
        droppable: true,
        // height: 'auto',
        // 显示事件开始时间
        displayEventTime: false,
        // 显示事件结束时间
        displayEventEnd: false,
        // 关闭全天区域显示
        allDaySlot: true,
        // 开始时间段
        slotMinTime: '00:00:00',
        // 结束时间段
        slotMaxTime: '00:00:00',
        eventOrder: 'type,color,start',
        eventDurationEditable: true,
        eventResizableFromStart: true,
        selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
        unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
        unselectCancel: '.el-drawer',
        dayMaxEvents: true,
        // eventLimit: true,
        headerToolbar: false,
        buttonText: {
          today: '回到今天',
          month: '月',
          week: '周',
          list: '列',
          day: '日'
        },
        allDayText: '全天',
        events: state.infoList,
        eventClassNames: function (arg) {
          // 添加自定义class
          return [arg.event.extendedProps.class]
        },
        eventContent: function (arg) {
          const italicEl = document.createElement('div')
          if (arg.event.extendedProps.startDateMinute && state.type === '1') {
            const childEl = document.createElement('span')
            childEl.innerHTML = arg.event.extendedProps.startDateMinute
            italicEl.append(childEl)
          }
          italicEl.append(arg.event.title)
          italicEl.setAttribute('class', `plan_title ${arg.event.extendedProps.class}`)
          return { domNodes: [italicEl] }
        },
        eventDrop: function (info) {
          // 拖拽停止时触发
          handleDrap(info)
        },
        eventClick: function (info) {
          // 点击查看时触发
          handleClick(info)
        },
        select: function (info) {},
        eventResize: function (info) {
          handleEventResize(info)
        }
      })
      state.Tcalendar.render()
    }
    // 上一月、周、日
    const getPrev = () => {
      state.Tcalendar.prev()
      state.calendarTitle = state.Tcalendar.view.title
      getCalendarList()
    }
    // 下一月、周、日
    const getNext = () => {
      state.Tcalendar.next()
      state.calendarTitle = state.Tcalendar.view.title
      getCalendarList()
    }
    // 回到今天
    const getToday = () => {
      state.Tcalendar.today()
      state.calendarTitle = state.Tcalendar.view.title
      state.isShowBack = false
      state.showMonth = new Date()
      getCalendarList()
    }

    const handleSetting = () => {
      state.dialogCategory = true
    }
    const getCalendarList = () => {
      const currentEnd = dayjs(state.Tcalendar.view.currentEnd).add(-1, 'day')
      const params = {
        startTime: dayjs(state.Tcalendar.view.currentStart).format('YYYY-MM-DD'),
        endTime: dayjs(currentEnd).format('YYYY-MM-DD'),
        type: state.type
      }
      state.loading = true
      state.Tcalendar.getEventSources().forEach((item) => {
        item.remove()
      })

      getAccountCalendarInfo(params).then((res) => {
        state.loading = false
        if (res) {
          state.infoList = res.data
          state.Tcalendar.addEventSource(state.infoList)
        }
      })
    }
    // 点击计划查看
    const handleClick = (info) => {}
    // 列视图点击查看
    const handleClickList = (row) => {}
    const closeDrawer = (val) => {
      state.drawerVisiable = false
      if (val) {
        getCalendarList()
      }
    }
    // 切换视图类型
    const handleChangeType = (val) => {
      if (val === '1') {
        state.Tcalendar.changeView('dayGridMonth')
        state.showMonth = new Date()
      } else if (val === '2') {
        state.Tcalendar.changeView('timeGridWeek')
      } else {
        state.Tcalendar.changeView('listMonth')
      }
      state.isShowBack = false
      state.calendarTitle = state.Tcalendar.view.title
      getToday()
    }
    // 切换类型
    const handleChangePlanId = () => {
      getCalendarList()
    }

    // 拖拽计划时触发
    const handleDrap = (info) => {}
    // 调整大小时触发
    const handleEventResize = (info) => {}
    // 拖拽触发
    const handleSelectDate = (info) => {}
    // 切换月份和日期
    const changeDate = (date) => {
      state.Tcalendar.gotoDate(date)
      // 判断不是当前月份，显示返回当前月
      if (date.getMonth() !== new Date().getMonth() || new Date().getFullYear() !== new Date(date).getFullYear()) {
        state.isShowBack = true
      } else {
        state.isShowBack = false
      }
      state.calendarTitle = state.Tcalendar.view.title
      getCalendarList()
    }
    return {
      ...toRefs(state),
      changeDate,
      getPrev,
      handleDrap,
      handleClickList,
      handleEventResize,
      handleChangePlanId,
      getNext,
      getToday,
      closeDrawer,
      getCalendarList,
      handleSetting,
      handleChangeType,
      handleClick,
      handleSelectDate
    }
  }
}
</script>
<style lang="scss" scoped>
.calendarHeader {
  margin: 20px 30px 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .header_select {
    margin: 0 0 0 10px;
    display: inline-block;
    vertical-align: middle;
  }
}
h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  margin: 0 0 0 0;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  color: #303133;
}
// .el-button-group {
//   vertical-align: top;
// }
</style>
