<template>
    <div :class="`${prefix}-date-table`">
        <ul class="weeks">
            <li class="weeks__item">日</li>
            <li class="weeks__item">一</li>
            <li class="weeks__item">二</li>
            <li class="weeks__item">三</li>
            <li class="weeks__item">四</li>
            <li class="weeks__item">五</li>
            <li class="weeks__item">六</li>
        </ul>
        <ul class="days">
            <li v-for="item in currentDays"
                :key="item.key"
                :class="item.className"
                class="days__item"
                @click="handleClick(item)"
                @mouseenter="handleMouseEnter(item)">{{item.day}}</li>
        </ul>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import pickerMixins from './mixins';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-date-panel`,
    mixins: [prefixMixins, pickerMixins],
    data() {
        return {
            currentDays: []
        };
    },
    props: {
        date: Number,
        value: Number,
        selected: Number,
        start: Number,
        end: Number,
        range: [Array, Function]
    },
    inject: {
        jddDatePanel: {
            default: null
        }
    },
    computed: {
        nextDays() {}
    },
    watch: {
        date() {
            this.updateDisplay();
        },
        start() {
            this.updateDisplay();
        },
        end() {
            this.updateDisplay();
        }
    },
    methods: {
        handleMouseEnter(item) {
            this.$emit('hover', item.full);
        },
        handleClick(item) {
            if (item.className.indexOf('is-disabled') > -1) {
                return;
            }
            let state = null;
            if (item.className.indexOf('days__item--prev') > -1) {
                state = 'prev';
            }
            if (item.className.indexOf('days__item--next') > -1) {
                state = 'next';
            }
            this.$emit('select', item.full, state);
        },
        updateDisplay() {
            let date = dayjs(this.fixTime(this.date)).date(1);
            let startDate = date.subtract(date.day(), 'days'); //本月第一天是周几
            let arr = [];
            for (let i = 0; i < 42; i++) {
                let key = startDate.format('YYYYMMDD');
                let ym = startDate.format('YYYYMM');
                let full = +startDate.toDate();
                arr.push({
                    year: startDate.format('YYYY'),
                    month: startDate.format('MM'),
                    day: startDate.format('DD'),
                    ymd: key,
                    ym: ym,
                    full: full,
                    className: this.getDateClass({ key, ym, full })
                });
                startDate = startDate.add(1, 'days');
            }
            this.currentDays = arr;
        },
        getDateClass(item) {
            let now = this.fixTime();
            let prev = dayjs(this.date)
                .add(-1, 'months')
                .format('YYYYMM');
            let next = dayjs(this.date)
                .add(1, 'months')
                .format('YYYYMM');
            let clsNames = [];
            let rangeType = Object.prototype.toString
                .apply(this.range)
                .toLowerCase();
            let disabled = false;
            if (rangeType === '[object array]') {
                let disabledStart = this.fixTime(this.range[0]);
                let disabledEnd = this.fixTime(this.range[1]);

                if (item.full < disabledStart || item.full > disabledEnd) {
                    disabled = true;
                }
            } else if (rangeType === '[object function]') {
                disabled = !this.range(item.full);
            }
            if (disabled) {
                clsNames.push('is-disabled');
            }
            if (item.full === now) {
                clsNames.push('days__item--today');
            }
            if (item.full >= this.start && item.full <= this.end) {
                clsNames.push('in-range');
            }
            if (item.full === this.start) {
                clsNames.push('range-start');
            }
            if (item.full === this.end) {
                clsNames.push('range-end');
            }
            if (item.full === this.selected) {
                clsNames.push('days__item--selected');
            }

            if (item.ym === prev) {
                clsNames.push('days__item--prev');
            }
            if (item.ym === next) {
                clsNames.push('days__item--next');
            }

            return clsNames;
        }
    },
    mounted() {
        this.updateDisplay();
    }
};
</script>
