<template>
  <div class="dv-data-calendar" :class="themeClasses">
    <hour-data-calendar v-if="timeUnit==='hour'"
                        v-bind="$attrs"
                        :loading="loading"
                        :cell-class="cellClass"
                        :cell-value="cellValue"
                        @select="onSelect"
                        :startTime="startTime"
                        :endTime="endTime"><slot slot-scope="scope" :data="scope"></slot></hour-data-calendar>
    <day-data-calendar v-else-if="timeUnit==='day'"
                       :loading="loading"
                       @select="onSelect"
                        :cell-class="cellClass"
                        :cell-value="cellValue"
                        :startTime="startTime"
                        :endTime="endTime"><slot slot-scope="scope" :data="scope"></slot></day-data-calendar>

  </div>
</template>

<script>
import HourDataCalendar from "./HourDataCalendar";
import dayjs from "dayjs";
import ThemeComponent from "../../../mixins/ThemeComponent";
import DayDataCalendar from "./DayDataCalendar";

export default {
  name: 'DvDataCalendar',
  components: {DayDataCalendar, HourDataCalendar},
  mixins: [ThemeComponent],
  provide () {
    return {
      dataCalendar: this
    };
  },
  props: {
    onMouseEnter: {
      type: Function,
      default () {
      }
    },
    onMouseLeave: {
      type: Function,
      default() {

      }
    },
    timeUnit: {
      type: String,
      default: 'hour'
    },
    startTime: {
      type: String,
    },
    endTime: {
      type: String,
    },
    cellValue: {
      type: Function,
      default(time, items) {
        return dayjs(time).format('MM-DD');
      }
    },
    cellClass: {
      type: Function,
      default(time, items) {
        return 'cell-class';
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onSelect (time, $event) {
      this.$emit('select', time, $event);
    }
  }
};
</script>
