<template>
    <vx-calendar
        id="app"
        :events="fcEvents"
        :currentMonth="currentMonth"
        :can-change-month="canChangeMonth"
        :default-selected-dates="defaultSelectedDates"
        :selectable="selectable"
        @dayClick="dayClick"
        @changeMonth="changeMonth"
        @eventClick="eventClick"
        firstDay="1"
        lang="zh"
    ></vx-calendar>
</template>
<script>
import dayjs from 'dayjs'
export default {
    name: 'Calendar',
    data() {
        return {
            fcEvents: [
                {
                    title: '',
                    start: dayjs(new Date()).format('YYYY-MM-DD'),
                    end: dayjs(new Date()).format('YYYY-MM-DD'),
                    cssClass: 'selectedDay'
                }
            ]
        }
    },
    props: {
        /* 当前月份 */
        currentMonth: {
            type: String
        },
        monthRange: {
            type: Array
        },

        planClassName: {
            type: String
        },
        canChangeMonth: {
            type: Boolean
        },
        /*是否可选择 */
        selectable: {
            type:Boolean,
            default:true
        },
        /*默认选中日期*/
        defaultSelectedDates: {
            type: Array,
            default() {
                return []
            }
        }
    },
    watch: {
        monthRange: {
            handler(val) {
                let currDayItem = this.fcEvents.shift()
                this.fcEvents = []
                this.fcEvents.push(currDayItem)
                val.forEach(item => {
                    this.fcEvents.push({
                        title: item.title || '',
                        start: item.vdate,
                        end: item.vdate,
                        cssClass: item.cssClass || this.planClassName
                    })
                })
            },

            deep: true
        }
    },
    methods: {
        dayClick(day, event) {
            this.fcEvents.shift()
            this.fcEvents.unshift({
                title: '',
                start: dayjs(day).format('YYYY-MM-DD'),
                end: dayjs(day).format('YYYY-MM-DD'),
                cssClass: 'selectedDay'
            })
            this.$emit('dayClick', dayjs(day).format('YYYY-MM-DD'))
        },
        changeMonth(start, end, current) {
            this.$emit(
                'monthChange',
                dayjs(start).format('YYYY-MM-DD'),
                dayjs(end).format('YYYY-MM-DD'),
                dayjs(current).format('YYYY-MM-DD')
            )
        },

        eventClick(e) {
            this.fcEvents.shift()
            this.fcEvents.unshift({
                title: '',
                start: e.start,
                end: e.start,
                cssClass: 'selectedDay'
            })
            this.$emit('dayClick', e.start)
        }
    }
}
</script>
<style>
/* .full-calendar-body .dates .dates-events .events-week {
    height: 30px;
}

.full-calendar-body .dates .dates-events .events-week .events-day {
    height: 30px !important;
    min-height: 0 !important;
    position: relative;
}
.selectedDay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.5;
}
.full-calendar-body .dates .week-row .day-cell {
    min-height: 0 !important;
}
.selectedDay {
    background-color: red;
}
.comp-full-calendar {
    max-width: 100% !important;
} */
</style>