<template>
  <div class="dv-data-calendar-wrap">
    <div class="dv-data-calendar-index-column">
      <div class="dv-data-calendar-index-column-label">日</div>
      <div class="dv-data-calendar-index-column-label" v-for="(row, index) in rows" :key="index">{{row|labelFormat}}</div>
    </div>
    <div class="dv-data-calendar-body">
      <dv-loading v-if="loading"></dv-loading>
      <div class="dv-data-calendar-header">
        <div class="dv-data-calendar-header-cells">
          <div class="dv-data-calendar-header-cell" v-for="hour in 24" :key="hour">{{ hour }}</div>
        </div>
      </div>
      <div class="dv-data-calendar-rows">
        <div class="dv-data-calendar-row" v-for="(row, index) in rows" :key="index">
          <div class="dv-data-calendar-row-cells">
            <div :class="[getCellClass(row, hour)]"
                 class="dv-data-calendar-row-cell"
                 v-for="hour in 24"
                 @mouseenter="handleCellMouseEnter($event, row, hour)"
                 @mouseleave="handleCellMouseLeave"
                 @click="onClick($event, row, hour)"
                 :key="hour">
              <slot v-if="isCellValid(row, hour)"
                    :value="getCellValue(row, hour)"
                    :time="getTime(row, hour)">{{getCellValue(row, hour)}}</slot>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { debounce } from 'canknow-core/src/libs';
import SubDayCalendar from "./SubDayCalendar";

export default {
  name: "HourDataCalendar",
  mixins: [SubDayCalendar],
  filters: {
    labelFormat(value) {
      return dayjs(value).format('MM-DD');
    }
  },
  props: {
    startTime: {
      type: String,
      default: '2020-12-01'
    },
    endTime: {
      type: String,
      default: '2020-12-31'
    },
  },
  computed: {
    rows() {
      const rows = [];
      let date = dayjs(this.startTime);
      const endTime = dayjs(this.endTime);

      while (date.isBefore(endTime)) {
        rows.push(date.format('YYYY-MM-DD'));
        date = date.add(1, 'day');
      }
      return rows;
    }
  },
  methods: {
    isCellValid (date, hour) {
      const time = dayjs(date).hour(hour);
      return !time.isAfter(dayjs());
    },
    getTime(date, hour) {
      return dayjs(date).hour(hour).format('YYYY-MM-DD HH:00:00');
    }
  }
}
</script>
