<template>
  <div class="el-calendar__week">
    <!-- 头部 -->
    <div class="el-calendar__week--header">
      <div class="el-calendar__week--header-wrap">
        <ul class="el-calendar__week--header-grid">
          <li class="el-calendar__week--header-item"></li>
          <li v-for="dayIndex in headerMap" :key="dayIndex" class="el-calendar__week--header-item">
            <span>{{headerWeekList[(dayIndex - firstDayOfWeek) % 7]}}</span>
          </li>
        </ul>
        <ul class="el-calendar__week--header-grid">
          <li class="el-calendar__week--header-item el-calendar__week--header-item-borderless"></li>
          <li v-for="dayIndex in headerMap" :key="dayIndex" class="el-calendar__week--header-item el-calendar__week--header-item-borderless" :class="[{'is-today': isToday(dayIndex) },getDateMark(dayIndex).type,{'disabled':getDateMark(dayIndex).disabled}]">
            <span class="date">{{ getDateMark(dayIndex).date }}</span>
            <span class="festival">{{getFestivalName(getDateMark(dayIndex))}}</span>
          </li>
        </ul>
      </div>
      <div class="el-calendar__week--header-event" :style="{ height: getHeaderEventHeight() }">
        <div class="el-calendar__week--header-left">
          <span v-if="showCollapse"><i class="el-icon-arrow-right" @click="handleCollapse" :style="collapseStyle"></i></span>
        </div>
        <div class="el-calendar__week--header-event-wrap">
          <ul class="el-calendar__week--header-event-skeleton">
            <li v-for="i in 7" :key="i"></li> 
          </ul>
          <ul class="el-calendar__week--header-event-grid">
            <template v-for="(item,index) in showFlatEvents">
              <li class="el-calendar__week--header-event-li" :class="[item.class]"
                :key="index" v-if="showFlatEvent(item)"
                :style="{left: `calc(${item.leftPos * 100}% + 4px)`, width: `calc(${item.width * 100}% - 8px)`, top: `${item.topInd}em`}">
                <el-popover v-if="tempPopper || item.popper" :key="item.key" placement="top" :maxHeight="item.maxHeight || 200" :width="item.popoverWidth || 450" :trigger="popoverTrigger || 'hover'" :title="item.title || ''" :open-delay="item.openDelay || 400" :close-delay="item.closeDelay || 300">
                  <popper-dom v-if="tempPopper" :item="item" :render="tempPopper"/>
                  <popper-dom v-else :item="item" :render="item.popper"/>
                  <li :key="item.key || i"
                    class="el-calendar-week--events-li"
                    slot="reference">
                    <div @click="clickItem(item)" class="el-calendar__week--header-event-item" :class="{'is-history': isHistoryTime(item.start,item.end)}" :style="{...item.style, ...item.leftStyle}" v-html="item.children"></div>
                  </li>
                </el-popover>
                <div v-else @click="clickItem(item)" class="el-calendar__week--header-event-item" v-html="item.children" :class="{'is-history': isHistoryTime(item.start,item.end)}"></div>
              </li>
              <li :key="'last'+index" v-if="item.topInd === 0 && getDayLeftPosLength(item) > 3 && !collapse" class="el-calendar__week--header-event-li" :style="{left: `calc(${item.leftPos * 100}% + 4px)`, width: `calc(14.3% - 8px)`, top: `calc(${item.topInd}em + 40px)`}">
                <div @click="clickItem(item)" class="el-calendar__week--header-event-li-last" :class="{'is-history': isHistoryTime(item.start,item.end)}">日程汇总</div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="el-calendar__week--main">
      <el-scrollbar
        class="el-calendar__week--main--wrapper"
        wrap-style="max-height: inherit;"
        view-class="el-calendar__week--main--list"
        noresize
        tag="div">
        <div class="el-calendar__week--main--left">
          <div class="el-calendar__week--main-timeline" :style="{top: `${timelineTop}px`}"></div>
          <div class="el-calendar__week--main-dot" :style="{top: `${timelineTop - 4}px`, left: `calc(${(dayIndex + 1) * 100}% + 2px)`}" style="left: 200%;" v-if="showDot"></div>
          <div class="el-calendar__week--main-now" :style="{top: `${timelineTop - 55}px`}">{{timelineDesc}}</div>
          <ul class="el-calendar__week--main--times">
            <li class="el-calendar__week--main--time" v-for="(item,index) in timeList" :key="index">
              <span>{{item}}</span>
            </li>
          </ul>
        </div>
        <div class="el-calendar__week--main--grid" v-for="i in 7" :key="i" role="presentation">
          <ul class="el-calendar__week--main--skeleton">
            <li :data-time="time" v-for="(time, index) in mainSkeleton" :key="index"
              :class="{'el-calendar__week--main--row': index % 2 === 0}"></li>
          </ul>
          <ul class="el-calendar__week--main-grid">
            <template v-for="(item, index) in parseHourEvents[i - 1]">
              <li class="el-calendar__week--main-li" :key="index"
                :class="{
                  'el-calendar__week--main-li-left': item.left === 0 && item.width !== 50 && item.width !== 100,
                  'el-calendar__week--main-li-right': item.left + item.width === 100 && item.width !== 50 && item.width !== 100,
                  'el-calendar__week--main-li-columnhelf-left': item.width === 50 && item.left == 0,
                  'el-calendar__week--main-li-columnhelf-right': item.width === 50 && item.left + item.width === 100,
                  'el-calendar__week--main-li-rowhelf-top': (item.startIndex%2 === 0 && item.height % 60 !== 0) || (item.startIndex%2 !== 0 && item.height % 60 === 0),
                  'el-calendar__week--main-li-rowhelf-bottom': item.startIndex%2 === 1
                }"
                :style="{
                  width: `${item.width}%`,
                  left: `${item.left}%`,
                  top: `${item.top}px`,
                  height: `${item.height}px`}"
              >
                <div class="el-calendar__week--main-item"
                  :class="{'is-history': item.end.getTime() - Date.now() < 0}">
                  <el-popover v-if="tempPopper || item.popper" :key="item.key" placement="top" :maxHeight="item.maxHeight || 200" :width="item.popoverWidth || 450" :trigger="popoverTrigger || 'hover'" :title="item.title || ''" :open-delay="item.openDelay || 400" :close-delay="item.closeDelay || 300">
                    <popper-dom v-if="tempPopper" :item="item" :render="tempPopper"/>
                    <popper-dom v-else :item="item" :render="item.popper"/>
                    <li :key="item.key || i"
                      class="el-calendar-week--events-li"
                      slot="reference">
                      <div @click="clickItem(item)" class="el-calender__day--main-item-content" :style="{...item.style, ...item.leftStyle, ...webkitLineClamp(item.height - 8) }" v-html="item.children"></div>
                    </li>
                  </el-popover>
                  <div v-else @click="clickItem(item)" class="el-calender__day--main-item-content" v-html="item.children" :style="webkitLineClamp(item.height - 8)"></div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  import { getI18nSettings, getFirstDayNumber, clearTime, getCurrentWeek } from 'modesign-ui/src/utils/date-util';
  import Locale from 'modesign-ui/src/mixins/locale';
  import deepmerge from 'deepmerge';
  import ElScrollbar from 'modesign-ui/packages/scrollbar';

  // const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; // 有bug,周、月切换后WEEKS数组不是默认值
  const dayMilliseconds = 24 * 60 * 60 * 1000;
  const WEEKSLENGTH = 7;

  export default {
    mixins: [Locale],
    
    components: { 
      popperDom: {
        functional: true,
        props: {
          render: Function,
          item: {
            type: Object,
            default: () => {}
          }
        },
        render: (h, ctx) => {
          const params = {}
          if (ctx.props.item) {
            params.item = ctx.props.item
          }
          return ctx.props.render(h, params)
        }
      },
      ElScrollbar
    },

    props: {
      // 显示每周第一天是周几
      firstDayOfWeek: {
        type: Number,
        default: 0 // 默认是周日
      },
      // 第几周
      weekIndex: {
        type: Number,
        default: 1
      },
      // 第几月
      monthIndex: {
        type: Number,
        default: new Date().getMonth() + 1
      },
      events: {
        type: Array,
        default: () => []
      },
      // 节日列表
      festivals: {
        type: Array,
        default: () => {
          return []
        }
      },
    },

    computed: {
      headerWeekList() {
        const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
        let weekList = WEEKS.splice(this.firstDayOfWeek);
        weekList = weekList.concat(WEEKS);
        return getI18nSettings(weekList).dayNames_2;
      },
      headerDate() {
        // 该周第一天是几号，是否是本月日期，上个月的总天数,本月总天数
        return getFirstDayNumber(this.monthIndex, this.weekIndex, this.firstDayOfWeek);
      },
      showDot() {
        return this.weekIndex === getCurrentWeek() && this.monthIndex === new Date().getMonth() + 1;
      },
      // 某一天的事件大于等于三个才显示icon
      showCollapse() {
        const { showFlatEvents } = this;
        const list = showFlatEvents.filter(item => item.width) || [];
        return list.some(i => i.topInd >= 2);
      }
    },

    data() {
      return {
        showFlatEvents: [], // 将parseEvents拍平
        parseEvents: [], // 解析过的一天以上的事件
        dayEvents: [], // 一天以上的事件
        hourEvents: [], // 一天内的事件
        parseHourEvents: new Array(7).fill(), // 解析过的一天内的事件
        headerMap: new Array(WEEKSLENGTH).fill().map((x,i) => i + this.firstDayOfWeek),
        weekRange: [0, 0], // 本周的时间范围 时间戳
        timeList: this.getTimeList(),
        mainSkeleton: this.getMainSkeleton(),
        dayIndex: 0,
        timelineDesc: '',
        timelineTop: 0,
        interval: null,
        collapse: false, // 是否展开收缩
        collapseStyle: {},
        tempPopper: null,
        popoverTrigger: null
      };
    },

    watch: {
      weekIndex() {
        this.clearEvents();
        this.init();
      },

      monthIndex() {
        this.clearEvents();
        this.init();
      },

      events: {
        deep: true,
        handler() {
          this.clearEvents();
          this.init();
        }
      }
    },

    mounted() {
      this.init();
      this.getCurrentTimeline();
      this.interval = setInterval(this.getCurrentTimeline, 60 * 1000);
    },

    beforeDestroy() {
      clearInterval(this.interval);
    },
  
    methods: {
      // 初始化页面或更新页面信息时
      init() {
        const val = this.events;
        if (val && val.length > 0 && val[0].popper) {
          this.popoverTrigger = val[0].popoverTrigger
          if (val[0].popperTemplate) {
            this.tempPopper = val[0].popper
          }
        }
        this.setRangeDate();
        this.splitEvents();
        this.hourEventsParse();
      },
      isToday(dayIndex) {
        if (this.getDate(dayIndex) === new Date().getDate() && this.monthIndex === new Date().getMonth() + 1) {
          this.dayIndex = dayIndex;
          return true;
        } else {
          return false;
        }
      },
      getCurrentTimeline() {
        const current = new Date();
        const hour = current.getHours();
        const minute = current.getMinutes();
        this.timelineTop = hour * 60 + Math.round(minute / 60 * 60);
        this.timelineDesc = hour <= 12 ? `上午${hour}时${minute}分` : `下午${hour - 12}时${minute}分`
      },
      clearEvents() {
        this.parseEvents = [];
        this.showFlatEvents = [];
        this.dayEvents = [];
        this.hourEvents = [];
        this.parseHourEvents = [];
      },
      getTimeList() {
        let result = [];
        const arr = [];
        const arr1 = ['上午12时'];
        result.push('');
        for (let i = 1; i < 12; i++) {
          arr.push(`上午${i}时`);
          arr1.push(`下午${i}时`);
        }
        result = result.concat(arr, arr1);
        return result;
      },
      getMainSkeleton() {
        const arr = [];
        let hour, minute;
        for (let i = 0; i < 50; i++) {
          if (i % 2 === 0) {
            hour = `0${i / 2}`;
            minute = '00';
          } else  {
            hour = `0${(i - 1) / 2}`;
            minute = '30';
          }
          arr.push(`${hour.slice(-2)}:${minute}:00`);
        }
        return arr;
      },
      // 展示日期
      getDate(i) {
        const { resultDay, ownDay, prevMonthDay, currentMonthDay } = this.headerDate;
        let result;
        if (ownDay) {
          result = (resultDay + i) > currentMonthDay ? resultDay + i - currentMonthDay : resultDay + i
        } else {
          // 日期大于上月总天数，就减去总天数，否则加i
          result = (resultDay + i) > prevMonthDay ? resultDay + i - prevMonthDay : resultDay + i;
        }
        return result;
      },
      // 展示日期和是否当月上月下月标记
      getDateMark(i) {
        const { resultDay, ownDay, prevMonthDay, currentMonthDay } = this.headerDate;
        let result;
        if (ownDay) {
          if((resultDay + i) > currentMonthDay){
            result = {
              date: resultDay + i - currentMonthDay,
              type: "next",
              disabled: false
            }
          } else {
            result = {
              date: resultDay + i,
              type: "current"
            }
            if(new Date(new Date().getFullYear(),this.monthIndex-1,result.date).getTime() < new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()).getTime()) {
              result.disabled = true
            } else {
              result.disabled = false
            }
          }
        } else {
          if((resultDay + i) > prevMonthDay){
            result = {
              date: resultDay + i - prevMonthDay,
              type: "current"
            }
            if(new Date(new Date().getFullYear(),this.monthIndex-1,result.date).getTime() < new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()).getTime()) {
              result.disabled = true
            } else {
              result.disabled = false
            }
          } else {
            result = {
              date: resultDay + i,
              type: "prev",
              disabled: true
            }
          }
        }
        return result;
      },
      // 设定本周开始和结束时间
      setRangeDate() {
        const { resultDay, ownDay, prevMonthDay } = this.headerDate;
        this.weekRange[0] = new Date(new Date().getFullYear(), ownDay ? this.monthIndex - 1 : this.monthIndex - 2, resultDay);
        this.weekRange[1] = new Date(new Date().getFullYear(), this.monthIndex - 1, ownDay ? resultDay + WEEKSLENGTH - 1 : resultDay - prevMonthDay + WEEKSLENGTH - 1, 23, 59, 59);
      },
      // 过滤非本周任务，并拆分分为一天以上和一天内的
      splitEvents() {
        const [ rangeStart, rangeEnd ] = this.weekRange;
        this.events.forEach(item => {
          const { start, end } = item;
          // 将不在该周范围的事件过滤掉
          if (this.isDateInRange(start, rangeStart, rangeEnd) || this.isDateInRange(end, rangeStart, rangeEnd)) {
            if (item.allDay) {
              item.dateRange = 1;
              this.dayEvents.push(item);
            } else if (end.getTime() - start.getTime() >= dayMilliseconds) {
              // item.dateRange = this.getDateRange(end, start);
              this.dayEvents.push(item);
            } else if (end.getDate() !== start.getDate()) {
              // 开始结束时间不在同一天，但是时间没超过24小时
              // 感觉可以把上面的判断逻辑去掉了
              this.dayEvents.push(item);
            } else {
              this.hourEvents.push(item);
            }
          }
        });
        this.rangeAllEvents();
      },
      // 是否在时间范围区间内
      isDateInRange(date, rangeStart, rangeEnd) {
        if (!date) {
          return false;
        }
        return date.getTime() >= rangeStart.getTime() && date <= rangeEnd.getTime();
      },
      // 全天任务排列组合
      rangeAllEvents() {
        // 根据start将事件排序
        this.dayEvents.sort((a, b) => {
          return a.start - b.start;
        });
        // 按照start时间 用map集合将事件组合
        const filtered = this.filterEvents(this.dayEvents);
        filtered.forEach((val, item) => {
          const startDate = clearTime(new Date(item));
          const curr = filtered.get(item);
          this.findBefindEvents(curr, startDate);
        });
        this.showFlatEvents = this.parseEvents.flat();
      },
      filterEvents(events) {
        const res = new Map()
        const [ rangeStart, rangeEnd ] = this.weekRange;
        // events.forEach(item => {
        //   const key = clearTime(item.start).toString();
        //   if (res.has(key)) {
        //     res.set(key, [...res.get(key), item]);
        //   } else {
        //     res.set(key, [item]);
        //   }
        // });
        events.forEach(item => {
          let key = 0;
          if (new Date(item.start).getTime() - new Date(rangeStart).getTime() > 0) {
            key = clearTime(item.start).toString();
          } else {
            key = clearTime(rangeStart).toString();
          }
          if (res.has(key)) {
            res.set(key, [...res.get(key), item]);
          } else {
            res.set(key, [item]);
          }
        });
        return res;
      },
      // 解析事件并计算位置及宽度
      findBefindEvents(event, startDate) {
        const [ rangeStart, rangeEnd ] = this.weekRange;
        event.forEach(item => {
          const itemInfo = { ...item };
          const { end } = item;
          let dateLength;
          // const j = this.getDateRange(startDate, rangeStart) - 1;
          let j = 0;
          if (new Date(startDate).getTime() >  new Date(rangeStart).getTime()) {
            j = this.getDateRange(startDate, rangeStart) - 1;
          } else {
            j = 0;
          }
          let i = 0;
          while (Boolean(this.parseEvents[i]) && Boolean(this.parseEvents[i][j])) {
            i++;
          }
          if (!end) {
            dateLength = 1;
          } else  {
            dateLength = this.isDateInRange(end, rangeStart, rangeEnd) ? this.getDateRange(end, startDate) : this.getDateRange(rangeEnd, startDate);
          }

          itemInfo.leftPos = this.round(Number(j) / WEEKSLENGTH);
          itemInfo.width = Math.min(1 - this.round(Number(j) / WEEKSLENGTH), this.round((dateLength) * 1 / WEEKSLENGTH));
          itemInfo.topInd = i;

          item.topInd = i;

          const list = new Array(dateLength).fill().map((x,i) => i);
          // list.forEach(dist => {
          //   if (!this.parseEvents[i]) {
          //       this.parseEvents[i] = [];
          //   }
          //   if (dist > 0) {
          //       this.parseEvents[i][j + dist] = item;
          //   } else {
          //       this.parseEvents[i][j + dist] = itemInfo;
          //   }
          // });
          list.forEach(dist => {
            if (!this.parseEvents[i]) {
              this.parseEvents[i] = [];
            }
            if (dist > 0) {
              this.parseEvents[i][j + dist] = deepmerge({
                leftPos: this.round(Number(j + dist) / WEEKSLENGTH),
              }, item);
            } else {
              this.parseEvents[i][j + dist] = itemInfo;
            }
          });
        });
      },
      round(value) {
        return Math.round(value * 1000) / 1000;
      },

      // 根据leftPos进行分组
      getLeftPosGroup() {
        let leftPosArray = [];
        let leftPosMap = new Map();
        this.showFlatEvents.forEach(item => {
          if(!leftPosMap.get(item.leftPos)) {
            leftPosArray.push({
              leftPos: item.leftPos,
              data: [item]
            })
            leftPosMap.set(item.leftPos,true)
          } else {
            leftPosArray.forEach(leftPosItem => {
              if(leftPosItem.leftPos == item.leftPos){
                leftPosItem.data.push(leftPosItem)
              }
            }) 
          }
        })
        return leftPosArray;
      },

      // 计算每一天日程的个数·
      getDayLeftPosLength(flatEventItem) {
        const data = this.getLeftPosGroup().find(item=>item.leftPos == flatEventItem.leftPos);
        if(data) {
          return data.data.length
        }
      },

      // 获取两个时间间隔（最小间隔为天）
      getDateRange(date1, date2) {
        const interval = clearTime(date1).getTime() - clearTime(date2).getTime();
        return interval / dayMilliseconds + 1;
      },

      // 对比两个元素是否有交集（是否在一个连续区间内）
      intersection(event1, evnet2) {
        const { startIndex: start1, endIndex: end1 } = event1
        const { startIndex: start2, endIndex: end2 } = evnet2
        if (start1 <= start2 && end1 >= start2) return true
        if ( start1 >= start2 && start1 <= end2) return true
        if (start1 <= start2 && end1 >= end2) return true
        if (start2 <= start1 && end2 >= end1) return true
        return false
      },

      // 格式化事件
      formatEvent(arr) {
        const group = []
        const data = [...arr].sort((a, b) => {
          if (a.startIndex === b.startIndex) {
            return (a.endIndex - a.startIndex) - (b.endIndex - b.startIndex)
          } else {
            return a.startIndex - b.startIndex
          }
        }).map((i) => {
          return {
            ...i
          }
        })
        // 给事件进行分组，连续交叉事件为一组
        data.forEach((i) => {
          const inGroup = group.find(item => {
            return (item).some(items => this.intersection(items, i))
          })
          if (!inGroup) {
            group.push([i])
          } else {
            inGroup.push(i)
          }
        })

        group.forEach((i) => {
          const list = i
          // 每一组的每一个事件复制left，top
          list.forEach((item, index) => {
            const beforeList = list.slice(0, index + 1)
            const active = beforeList.filter(i => i.endIndex < item.startIndex && !i.noCheck)
            if (active && active.length) {
              active[0].noCheck = true
              item.refresh = () => {
                item.width = active[0].width
                item.left = active[0].left
                item.hasMove = true
              }
              item.refresh()
            }
            beforeList.filter(item => !item.hasMove).forEach((i, index, arr) => {
              i.width = 100 / arr.length
              i.left = i.width * index
            })
            beforeList.filter(item => item.hasMove).forEach(i => {
              i.refresh && i.refresh()
            })
          })
        })
        return group.reduce((p, n) => { return [...p, ...n] }, [])
      },

      // 解析一日内的事件
      hourEventsParse() {
        const liItemHeight = 30;
        this.hourEvents.forEach(item => {
          const itemInfo = { ...item };
          const { start, end } = item;
          // const startIndex = start.getHours() * 2 + Math.round(start.getMinutes() / 30);
          // const endIndex = end.getHours() * 2 + Math.round(end.getMinutes() / 30);
          // if (start.getDate() === end.getDate()) {
          //   // 开始结束时间在同一天
          //   itemInfo.height = (endIndex - startIndex) * liItemHeight - 8;
          //   itemInfo.top = startIndex * liItemHeight + 4;
          // } else {
          //   itemInfo.height = (48 - startIndex) * liItemHeight - 8;
          //   itemInfo.top = startIndex * liItemHeight + 4;
          // }
          const dayInterval = (clearTime(start).getTime() - this.weekRange[0].getTime()) / dayMilliseconds;
          if (!this.parseHourEvents[dayInterval]) {
            this.parseHourEvents[dayInterval] = [];
          }
          this.parseHourEvents[dayInterval].push(itemInfo);
        })
        this.parseHourEvents = this.parseHourEvents.map(events => {
          if (events && events.length) {
            return this.formatEvent(events.map(i => {
              const { start, end } = i
              const startHour = start.getHours()
              const startMinute = start.getMinutes()
              const endHour = end.getHours()
              const endMinute = end.getMinutes()
              const startIndex = startHour*2 + (startMinute >=30 &&startMinute <=60 ? 1 : 0)
              const endIndex = endHour*2 + (endMinute === 0 ? -1 : endMinute > 0 && endMinute <= 30 ? 0 : 1 )
              return {
                ...i,
                startIndex,
                endIndex,
                height: (endIndex - startIndex + 1) *liItemHeight,
                top: startIndex * liItemHeight
              }
            }))
          }
          return events
        })
      },

      // 和当前时间对比是否在当前时间之前
      isHistoryTime(starttime,endtime) {
        if(endtime) {
          return endtime.getTime() - Date.now() < 0
        } else {
          const beforeDawn = new Date(new Date().setHours(0, 0, 0, 0)) // 凌晨
          if(starttime.getTime() >= beforeDawn) {
            return false
          } else {
            return true
          }
        }
      },

      // 获取对应的节日名称
      getFestivalName(data) {
        const {date, type} = data;
        let month;
        if(type == "current") {
          month = this.monthIndex.toString()
        } else if(type == "prev") {
          month = (this.monthIndex - 1).toString()
        } else if(type == "next") {
          month = (this.monthIndex + 1).toString()
        }
        let day = new Date().getFullYear().toString() + month + `00${date}`.slice(-2);
        const res = this.festivals.find(item => item.currentDate.replace(/-/g,"") == day)
        if(res) {
          return res.festivalName
        }
        return null
      },

      // 计算el-calendar__week--header-event的高度
      getHeaderEventHeight() {
        if (this.parseEvents.length <= 3) return `calc(3em + 4px)`
        if(this.collapse) {
          return `calc(${this.parseEvents.length}em + 4px)`
        } else {
          if(this.parseEvents.length > 2) {
            return `calc(3em + 4px)`
          }
          return `calc(${this.parseEvents.length}em + 4px)`
        }
      },

      showFlatEvent(item) {
        const dayLength = this.getDayLeftPosLength(item)
        if(this.collapse) {
          return item.width
        }
        // return item.width && item.topInd < 3
        return dayLength > 3 ? item.width && item.topInd < 2 : item.width && item.topInd < 3
      },

      handleCollapse(){
        this.collapse = !this.collapse;
        if(!this.collapse) {
          this.collapseStyle = {
            transform: "rotate(90deg)"
          }
        } else {
          this.collapseStyle = {
            transform: "rotate(-90deg)"
          }
        }
      },

      // 点击事件
      clickItem(item) {
        this.$emit('clickItem', item)
      },
      // 计算-webkit-line-clamp
      webkitLineClamp(itemHeight) {
        const lineHeight = 22
        const maxLines = Math.floor(itemHeight / lineHeight)
        return maxLines > 1 ? { '-webkit-line-clamp': maxLines } : { '-webkit-line-clamp': 1, 'padding': '1px 8px' }
      }
    }
  };
</script>
