
<template>
    <view class="calendar-month">
        <view class="calendar-month__row">
            <view
                v-for="(w, index) in weeks"
                :key="index"
                class="calendar-month__item calendar-month__week"
            >
                {{ w }}
            </view>
        </view>
        <view class="c-gap-bottom">
            <view
                v-for="(row, rowIndex) in rowArray"
                :key="rowIndex"
                class="calendar-month__row"
            >
                <!-- 循环判断的时候使用 template + v-if -->
                <template
                    v-for="(dayItem, dayIndex) in dayArray"
                >
                    <!-- item -->
                    <!-- 用等分容器包裹 -->
                    <view
                        v-if="dayIndex >= rowIndex * 7 && dayIndex < (rowIndex + 1) * 7"
                        :key="rowIndex + '' + dayIndex"
                        class="calendar-month__item"
                        @tap="handleDayItemTap({
                            item: dayItem,
                            index: dayIndex,
                        })"
                    >                
                        <!-- 项容器 -->
                        <view>
                            <!-- 天 -->
                            <view :class="{'calendar-month__day--actived': dayItem.isToday}" class="calendar-month__day">
                                {{ dayItem.onlyFill ? '' : dayItem.day }}
                                <!-- <text v-if="dayItem.dateStr" class="calendar-month__day--times">{{dayItem.times}}场</text> -->
                            </view>
                            <view class="calendar-month__lives">
                                <view
                                    v-for="(live, liveIndex) in dayItem.lives"
                                    :key="liveIndex"
                                    class="c-gap-top-small"
                                >
                                    <!-- <view v-if="live.doctor" class="calendar-month__lives__doctor">{{live.doctor}}</view> -->
                                    <view v-if="live.department" class="calendar-month__lives__doctor calendar-month__lives__department">
                                        <text class="calendar-month__lives__dot"/>
                                        <view>
                                            <view v-if="showDoctorName">{{ live.doctor }}</view>
                                            <view>{{ live.department }}</view>
                                        </view>
                                    </view>
                                </view>
                                <view v-if="dayItem.times > 2" class="calendar-month__lives__elipsis">...</view>
                                <view v-if="dayItem.more" class="calendar-month__lives__more c-gap-top-small">{{ dayItem.more }}</view>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
        </view>
    </view>
</template>
<script>
import {formatDate} from '@utils/core';
/**
 * @file: 月份纬度日历
 * @author: yantingxi
 */
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 指示器的长度
         */
        date: {
            type: Number,
            default: 0
        },
        /**
         * 直播数据
         */
        data: {
            type: Array,
            default: () => []
        },
        /**
         * 是否显示医生姓名
         */
        showDoctorName: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            weeks: ['日', '一', '二', '三', '四', '五', '六'],
            // 闰年月
            monthDayNumArrLeapYear: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
            // 普通年月
            monthDayNumArrNormalYear: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],

            dayArray: [],
            rowNum: 0,
            rowArray: []
        };
    },
    created() {
        const dateStr = formatDate(Date.now(), 'yyyy/MM/dd');
        this.initdayArray(dateStr);
    },
    methods: {
        // 初始化
        initdayArray(date) {
            const [year = 2020, month = 1, day = 1] = date.split('/') || [];
            this.dayArray = this.generatedayArray(year, month, day);
            this.rowNum = parseInt(this.dayArray.length / 7, 10);
            for (let i = 0; i < this.rowNum; i++) {
                this.rowArray.push({});
            }
        },

        /**
         * 生成天数组
         *
         * @param {number} year 年
         * @param {number} month 月
         * @param {number} day 日
         * @return {Array} dayArray
         */
        generatedayArray(year, month, day) {
            let dayArray = [];
            // 得到某个月份的天数
            let monthDayNum = this.getMonthDayNum(year, month);

            for (let i = 0; i < monthDayNum; i++) {
                let obj = {
                    year: year, // 年
                    month: month, // 月
                    day: i + 1 // 天
                };
                // 日期字符串；注意 iOS 须为 xxxx/xx/xx 这样
                obj.dateStr = `${year}/${month}/${obj.day}`;
                // date 对象
                obj.date = new Date(obj.dateStr);
                // 时间戳
                obj.timestamp = obj.date.getTime();
                // 星期
                obj.weekday = obj.date.getDay();
                // 选中态
                obj.selected = (obj.day === +day);

                // 直播场次
                const live = this.getLive(obj.day);
                obj.times = live.times || 0;
                obj.lives = (live.lives || []).slice(0, 2);
                obj.more = live.lives ? `共${live.lives.length}场` : null;

                obj.isToday = obj.day === new Date().getDate();

                dayArray.push(obj);
            }
            // 第一天不是周日的话，需要补齐
            let firstDayDiff = dayArray[0] && dayArray[0].weekday;
            let firstDayTimestamp = dayArray[0].timestamp;
            let preMonthDayNum = this.getMonthDayNum(year, month - 1);
            let preTimes = 0;
            for (let i = firstDayDiff - 1; i >= 0; i--) {
                let obj = {
                    weekday: i,
                    day: preMonthDayNum - preTimes,
                    // 这里加时间戳是因为在计算选中区域的时候会根据时间戳计算
                    timestamp: firstDayTimestamp - 1,
                    onlyFill: true,
                    selected: false
                };
                preTimes++;
                dayArray.unshift(obj);
            }
            // 最后一天不是周六的话，需要补齐
            let lastDayWeekday = dayArray[dayArray.length - 1] && dayArray[dayArray.length - 1].weekday;
            let lastDayTimestamp = dayArray[dayArray.length - 1] && dayArray[dayArray.length - 1].timestamp;
            // let sufMonthDayNum = this.getMonthDayNum(year, month + 1);
            let sufTimes = 0;
            for (let i = lastDayWeekday + 1; i < 7; i++) {
                let obj = {
                    weekday: i,
                    day: sufTimes + 1,
                    // 这里加时间戳是因为在计算选中区域的时候会根据时间戳计算
                    timestamp: lastDayTimestamp + 1,
                    onlyFill: true,
                    selected: false
                };
                sufTimes++;
                dayArray.push(obj);
            }
            return dayArray;
        },

        /**
         * 得到某个月份的天数
         *
         * @param {number} year 年
         * @param {number} month 月
         * @return {number} monthDayNum 这个月有几天
         */
        getMonthDayNum(year, month) {
            let isLeapYear = this.isLeapYear(year);
            if (isLeapYear) {
                return this.monthDayNumArrLeapYear[month - 1];
            }
            return this.monthDayNumArrNormalYear[month - 1];
        },

        /**
         * 判断是否是闰年
         * 其实只要满足下面几个条件即可：
         * 1.普通年能被4整除且不能被100整除的为闰年。如2004年就是闰年,1900年不是闰年
         * 2.世纪年能被400整除的是闰年。如2000年是闰年，1900年不是闰年
         *
         * @param {number} year 要判断的年份
         * @return {boolean} isLeapYear 返回布尔值
         */
        isLeapYear(year) {
            return !(year % (year % 100 ? 4 : 400));
        },

        getLive(day) {
            let liveInfo = {};
            this.data && this.data.length && this.data.forEach(live => {
                if (+live.day === +day) {
                    liveInfo = live;
                }
            });
            return liveInfo;
        },

        handleDayItemTap(params) {
            this.$emit('handleDayItemTap', params);
        }
    }
};
</script>
<style lang="less" scoped>
.calendar-month {
    &__row {
        position: relative;
        display: flex;
        text-align: center;
        justify-content: space-around;

        &:last-child::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 1px;
            transform: scaleY(0.333);
            background: #e0e0e0;
        }
    }

    &__item {
        position: relative;
        width: calc(100% / 7);

        &:nth-child(n+2) {
            &::before {
                content: '';
                display: block;
                position: absolute;
                width: 1px;
                height: 100%;
                left: 0;
                top: 0;
                background: #E0E0E0;
                transform: scaleX(.33);
            }
        }
    }

    &__week {
        padding: 5px 0;
        font-size: .12rem;
        color: #333;

        &::before {
            display: none !important;
        } 
    }

    &__day {
        // padding: 0 0 0 5px;
        font-size: .14rem;
        height: .22rem;
        color: #333;
        text-align: center;
        background: rgba(0, 0, 0, .04);

        &--times {
            font-size: .12rem;
            color: #3F3F3F;
        }

        &--actived {
            background: #00C8C8;
            color: #FFF !important;
            font-weight: 700;
        }
    }

    &__lives {
        display: flex;
        padding: 0 5px 5px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        line-height: 1.3;
        min-height: 100px;
        font-size: .1rem;
        color: #151515;
        &__dot {
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #00C8C8;
            border-radius: 50%;
            margin-right: 5px;
            margin-top: 5px;
            flex-shrink: 0;
        }

        &__doctor {
            display: flex;
            align-items: flex-start;
        }

        &__department {
            padding-left: 5px;
        }
        &__elipsis {
            padding-left: 5px;
            margin-bottom: 5px;
        }
        &__more {
            margin-top: auto;
            padding-left: 5px;
            font-size: 10px;
            color: #B8B8B8;
        }
    }
}
</style>
