<template>
    <table class="calendar-container" ref="table">
        <tbody>
            <tr>
                <td colspan="7" v-if="selector">
                    <div class="month-selector" v-if="selector === 'form'">
                        <Input
                            class="control"
                            type="number"
                            number
                            v-model="currentDate.year"
                            placeholder="请输入年份"
                            size="small"
                        ></Input>年
                        <Select
                            class="control"
                            v-model="currentDate.month"
                            placeholder="请选择月份"
                            size="small"
                        >
                            <Option v-for="item in monthList" :value="item" :key="item">{{item}}</Option>
                        </Select>月
                        <Select
                            class="control"
                            v-model="currentDate.date"
                            placeholder="请选择日期"
                            size="small"
                        >
                            <Option v-for="item in dateList" :value="item" :key="item">{{item}}</Option>
                        </Select>日
                    </div>
                    <div v-else-if="selector==='picker'" style="text-align:right">
                        <Date-picker
                            :value="current"
                            type="date"
                            format="yyyy/MM/dd"
                            placeholder="选择日期"
                            :editable="false"
                            :clearable="false"
                            show-week-numbers
                            @on-change="onPickerChange"
                        ></Date-picker>
                    </div>
                    <div v-else style="text-align:right">
                        {{currentString}}
                        <ButtonGroup>
                            <Button class="tool-button" @click="currentDate.year --">
                                <Icon type="ios-arrow-back" />
                                <Icon type="ios-arrow-back" style="margin-left:-10px;" />
                            </Button>
                            <Button class="tool-button" @click="monthsBefore">
                                <Icon type="ios-arrow-back" />
                            </Button>
                            <Button class="tool-button" @click="setCurrentDate(today)">
                                <Icon type="ios-calendar" />
                            </Button>
                            <Button class="tool-button" @click="monthsAfter">
                                <Icon type="ios-arrow-forward" />
                            </Button>
                            <Button class="tool-button" @click="currentDate.year ++">
                                <Icon type="ios-arrow-forward" />
                                <Icon type="ios-arrow-forward" style="margin-left:-10px;" />
                            </Button>
                        </ButtonGroup>
                    </div>
                </td>
            </tr>
            <tr class="week-header">
                <td class="day">一</td>
                <td class="day">二</td>
                <td class="day">三</td>
                <td class="day">四</td>
                <td class="day">五</td>
                <td class="day">六</td>
                <td class="day">日</td>
            </tr>
            <tr v-for="(week,weekIndex) in dates" :key="weekIndex">
                <td
                    class="date"
                    :class="{nowmonth:isnowmonth(date),now:isnow(date),today:istoday(date)}"
                    v-for="(date,dateIndex) in week "
                    :key="dateIndex"
                    @click="setCurrentDate(date)"
                >
                    <div class="date-title">
                        <slot class="date-title" name="date" :date="date">{{ date.getDate() }}</slot>
                    </div>
                    <div class="date-content">
                        <slot name="date-content" :date="date"></slot>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
import { time, tools } from 'hq-tools'
export default {
    name: 'Calendar',
    props: {
        value: {
            valid: true,
            type: Date,
            default: () => {
                return new Date();
            }
        },
        selector: {
            type: Boolean | String,
            default: () => {
                return true;
            }
        },
        value: {
            valid: true,
            type: Date,
            default: () => {
                return new Date();
            }
        }
    },
    data() {
        return {
            currentDate: {
                year: new Date().getFullYear(),
                month: new Date().getMonth() + 1,
                date: new Date().getDate()
            },
            monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }
    },
    computed: {
        today() {
            return new Date();
        },
        current() {
            return new Date(this.currentDate.year, this.currentDate.month - 1, this.currentDate.date)
        },
        currentString() {
            return tools.dateFormat(this.current, 'yyyy年MM月dd日')
        },
        dateList() {
            return time.dateInMonth(this.currentDate.month).map(item => item.getDate())
        },
        dates() {
            let days = time.dateInMonth(this.current);
            let list = [];
            while (days[0].getDay() !== 1) {
                days.unshift(time.daysBefore(1, days[0]));
            }
            while (days[days.length - 1].getDay() !== 0) {
                days.push(time.daysAfter(1, days[days.length - 1]));
            }
            for (let i = 0; i < days.length; i += 7) {
                list.push(days.slice(i, i + 7))
            }
            return list;
        }
    },
    watch: {
        value(to) {
            this.setCurrentDate(to)
        }
    },
    mounted() {
        if (this.value) {
            this.setCurrentDate(this.value)
        }
    },
    methods: {
        isnowmonth(day) {
            return day.getMonth() + 1 === this.currentDate.month;
        },
        isnow(day) {
            return this.isnowmonth(day) && day.getDate() === this.currentDate.date;
        },
        istoday(day) {
            return tools.dateFormat(day, 'yyyy-MM-dd') === tools.dateFormat(new Date(), 'yyyy-MM-dd')
        },
        monthsBefore() {
            this.setCurrentDate(time.monthsBefore(1, this.current));
        },
        monthsAfter() {
            this.setCurrentDate(time.monthsAfter(1, this.current));
        },
        onPickerChange(value) {
            this.setCurrentDate(new Date(value))
        },
        setCurrentDate(date) {
            this.currentDate = {
                year: date.getFullYear(),
                month: date.getMonth() + 1,
                date: date.getDate()
            }
            setTimeout(() => {
                this.$emit('input', this.current)
            }, 50)
        }
    }
}
</script>

<style lang="less" scoped>
@import "./calender.less";
</style>