<template>
    <view class="dir-top-nowrap">
        <view class="calendar__header main-between cross-center dir-left-nowrap">
            <view>{{ (nowDate.year || '') + '年' + (nowDate.month || '') + '月' }}</view>
            <view class="dir-left-nowrap cross-center">
                <view @click.stop="pre" style="padding: 32rpx">
                    <view class="jt-left"></view>
                </view>
                <view @click.stop="next" style="padding: 32rpx;margin-left: 6rpx">
                    <view class="jt-right"></view>
                </view>
            </view>
        </view>
        <view class="calendar__box">
            <view class="calendar__weeks dir-left-nowrap">
                <view class="calendar__weeks-day main-center cross-center"
                      v-for="(i,key) of ['日','一','二','三','四','五','六']" :key="key"
                >
                    <text class="calendar__weeks-day-text">{{ i }}</text>
                </view>
            </view>
            <view class="calendar__weeks dir-left-nowrap" v-for="(item,weekIndex) in weeks" :key="weekIndex">
                <view class="calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
                    <calendar-item
                        :has-kuatian="hasKuatian"
                        :weeks="weeks"
                        :calendar="calendar"
                        :end-title="endTitle"
                        :active-color="activeColor"
                        :noactive-color="noactiveColor"
                        :select-color="selectColor"
                        :place-unit="placeUnit"
                        :range="range"
                        @change="choiceDate"
                    ></calendar-item>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Calendar from './util.js';
import calendarItem from './uni-calendar-item.vue'

/**
 * Calendar 日历
 * @property {String} date 自定义当前时间，默认为今天
 * @property {String} startDate 日期选择范围-开始日期
 * @property {String} endDate 日期选择范围-结束日期
 * @property {Boolean} range 范围选择
 * @event {Function} change 日期改变
 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
 */
export default {
    components: {
        calendarItem
    },
    props: {
        placeUnit: String,
        activeColor: String,
        noactiveColor: String,
        selectColor: String,

        endTitle: String,
        isAlone: [Number, String],
        isDay: [Number, String],
        dayMax: [Number, String],


        date: {
            type: String,
            default: ''
        },
        selected: {
            type: Array,
            default() {
                return []
            }
        },
        startDate: {
            type: String,
            default: ''
        },
        endDate: {
            type: String,
            default: ''
        },
        range: {
            type: Boolean,
            default: false
        },
        hasKuatian: [String,Number],
    },
    data() {
        return {
            show: true,
            weeks: [],
            calendar: {},
            nowDate: '',
        }
    },
    watch: {
        date(newVal) {
            this.init(newVal)
        },
        startDate(val) {
            this.cale.resetSatrtDate(val)
        },
        endDate(val) {
            this.cale.resetEndDate(val)
        },
        selected(newVal) {
            this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
            this.weeks = this.cale.weeks
        }
    },
    created() {
        // 获取日历方法实例
        this.cale = new Calendar({
            // date: new Date(),
            selected: this.selected,
            startDate: this.startDate,
            endDate: this.endDate,
            range: this.range,
        })
        // 选中某一天
        this.init(this.date)
    },
    methods: {
        /**
         * 初始化日期显示
         * @param {Object} date
         */
        init(date) {
            this.cale.setDate(date)
            this.weeks = this.cale.weeks
            this.nowDate = this.cale.getInfo(date)
        },

        /**
         * 变化触发
         */
        change() {
            this.setEmit('change')
        },
        /**
         * 派发事件
         * @param {Object} name
         */
        setEmit(name) {
            let {
                year,
                month,
                date,
                extraInfo,
            } = this.calendar
            this.$emit(name, {
                range: this.cale.multipleStatus,
                year,
                month,
                date,
                extraInfo: extraInfo || {}
            })
        },
        /**
         * 选择天触发
         * @param {Object} weeks
         */
        choiceDate(weeks) {
            if (weeks.disable) return
            try {
                // 设置多选
                this.cale.setMultiple(weeks.fullDate,this.isDay, this.dayMax, this.hasKuatian, this.placeUnit)
                this.calendar = weeks
                this.weeks = this.cale.weeks
                this.change();
            } catch (error) {
                uni.showToast({title: error.message, icon: 'none'});
            }
        },
        /**
         * 上个月
         */
        pre() {
            const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
            this.setDate(preDate)
        },
        /**
         * 下个月
         */
        next() {
            const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
            this.setDate(nextDate)
        },
        /**
         * 设置日期
         * @param {Object} date
         */
        setDate(date) {
            this.cale.setDate(date)
            this.weeks = this.cale.weeks
            this.nowDate = this.cale.getInfo(date)
        }
    }
}
</script>

<style lang="scss" scoped>
.calendar__header {
    height: 100#{rpx};
    padding-left: 32#{rpx};

    > view {
        font-size: 32#{rpx};
        font-weight: bold;
        color: #242424;
    }

    .jt-left {
        height: 20#{rpx};
        width: 12#{rpx};
        border-right: 12#{rpx} solid #888F9A;
        border-top: 10#{rpx} solid transparent;
        border-left: 10#{rpx} solid transparent;
        border-bottom: 10#{rpx} solid transparent;
    }

    .jt-right {
        height: 20#{rpx};
        width: 12#{rpx};
        border-left: 12#{rpx} solid #888F9A;
        border-top: 10#{rpx} solid transparent;
        border-right: 10#{rpx} solid transparent;
        border-bottom: 10#{rpx} solid transparent;
    }
}

.calendar__box {
    position: relative;

    .calendar__weeks {
        position: relative;
        margin-bottom: 20#{rpx};
    }

    .calendar__weeks-day {
        height: 84#{rpx};
        flex: 1;
    }

    .calendar__weeks-day-text {
        font-size: 28#{rpx};
        color: #99A1AA;
    }

    .calendar__weeks-item {
        flex: 1;
    }
}
</style>
