<template>
    <div :class="classes">
        <span :class="getCellCls(cell)" v-for="cell in cells" @click="handleClick(cell)" @mouseenter="handleMouseMove(cell)">
            <em>{{ cell.text }}</em>
        </span>
    </div>
</template>
<script>
import { clearHours } from '../util';
import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale';
import mixin from './mixin';
import prefixCls from './prefixCls';

export default {
    mixins: [Locale, mixin],
    props: {
    /* in mixin */
    },
    computed: {
        classes() {
            return [`${prefixCls}`, `${prefixCls}-month`];
        },
        cells() {
            let cells = [];
            const cell_tmpl = {
                text: '',
                selected: false,
                disabled: false
            };

            const tableYear = this.tableDate.getFullYear();
            const selectedDays = this.dates
        .filter(Boolean)
        .map(date =>
          clearHours(new Date(date.getFullYear(), date.getMonth(), 1))
        );
            const focusedDate = clearHours(
        new Date(this.focusedDate.getFullYear(), this.focusedDate.getMonth(), 1)
      );

            for (let i = 0; i < 12; i++) {
                const cell = deepCopy(cell_tmpl);
                cell.date = new Date(tableYear, i, 1);
                cell.text = this.tCell(i + 1);
                const day = clearHours(cell.date);
                cell.disabled =
          typeof this.disabledDate === 'function' &&
          this.disabledDate(cell.date) &&
          this.selectionMode === 'month';
                cell.selected = selectedDays.includes(day);
                cell.focused = day === focusedDate;
                cells.push(cell);
            }

            return cells;
        }
    },
    methods: {
        getCellCls(cell) {
            return [
                `${prefixCls}-cell`,
                {
                    [`${prefixCls}-cell-selected`]: cell.selected,
                    [`${prefixCls}-cell-disabled`]: cell.disabled,
                    [`${prefixCls}-cell-focused`]: cell.focused,
                    [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
                }
            ];
        },
        tCell(nr) {
            return this.t(`i.datepicker.months.m${nr}`);
        }
    }
};
</script>
