<template>
    <div class="box">
        <!-- 日历主体 -->
        <table class="diy-calendar-table">
            <!-- 星期栏 -->
            <thead>
                <tr class="table-header-row">
                    <th v-for="day in dayNameList" class="table-header">
                        {{ day }}
                    </th>
                </tr>
            </thead>
            <!-- 日期部分 -->
            <tbody>
                <tr class="table-body-row" v-for="(row, index) in dayList" :key="index">
                    <td v-for="col in row" class="table-data" :data-date="col">
                        <div class="td-content-box">
                            <div class="content-border" :class="{ selected: isSelectedDate(col) }"
                                @click="selectDay(col)">
                                <div :class="['date-number', {'current':col !==''}]">
                                    {{ col }}
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup lang="ts">
const props = defineProps({
    curYear: Number,
    curMonth: Number,
    curDay: Number,
});
const selectDays:Ref<any> = ref(props.curDay);
/**
 * @description: 获取某年某月的天数
 * @param {*} year
 * @param {*} month
 * @return {*}
 */
function getDaysInMonth(year: number, month: number) {
    const daysInMonth = new Date(year, month, 0).getDate();
    const firstDay = new Date(year, month - 1, 1).getDay(); // 获取本月第一天是星期几
    const weeks = Math.ceil((firstDay + daysInMonth) / 7); // 计算本月有几周

    let date = 1;
    const result = [];
    for (let i = 0; i < weeks; i++) {
        const week = [];
        for (let j = 0; j < 7; j++) {
            if ((i === 0 && j < firstDay) || date > daysInMonth) {
                week.push('');
            } else {
                week.push(date);
                date++;
            }
        }
        result.push(week);
    }

    return result;
}
/**
 * 用于展现的日历数据 -- 当前月
 */
const dayList = computed(() => {
    if (props.curYear && props.curMonth) {
        return getDaysInMonth(props.curYear, props.curMonth)
    } else {
        return []
    }
})
// 选择当前时间
const selectDay = (day: any) => {
    if (!day) {
        return
    }
    if (selectDays.value == day) {
        selectDays.value = 0
    } else {
        selectDays.value = day;
    }
}
const emits = defineEmits(["update:curDay"]);
watch(selectDays, (newVal) => {
    emits("update:curDay", newVal);
});
/**
 * @description: 判断是否被选择
 * @param {*} day
 * @return {*}
 */
const isSelectedDate = (day: any) => {
    if (!day) {
        return false
    }
    return day === selectDays.value
}
/**
* 有关周几的名称列表
*/
const dayNameList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
</script>

<style scoped lang='scss'>
.box {
    width: 100%;
    height: 100%;
    padding: 20px;
    .diy-calendar-table {
        width: 100%;
        user-select: none;
        border-collapse: collapse;

        .table-header-row {
            height: 32px;
            background-color: rgba(95, 147, 238, 0.06);

            .table-header {
                font-size: 16px;
                text-align: center;
                font-family: "Lucida Handwriting";
                font-weight: bold;
            }
        }

        .table-body-row {
            height: 75px;

            .table-data {
                text-align: center;

                .td-content-box {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .content-border {
                        position: relative;
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        transition: all ease 0.3s;

                        .table-badge {
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            position: absolute;
                            right: 3px;
                            top: 3px;
                            background-color: rgba(20, 167, 59, 0.5);
                            color: #ffffff;
                            font-size: 10px;
                            transition: all ease 0.3s;

                            &.current {
                                background-color: #14a73b;
                                font-weight: normal;
                            }
                        }

                        .date-number {
                            width: 100%;
                            position: absolute;
                            left: 0;
                            text-align: center;
                            top: 20px;
                            font-size: 18px;
                            line-height: 20px;
                            transition: all ease 0.3s;
                            font-family: Magneto;
                            font-weight: normal;
                            // color: rgba(42, 63, 103, 0.48);
                            color: #666;

                            &.current {
                                // color: #435069;
                                color: #cdd2d8;
                                cursor: pointer;
                                font-weight: bold;
                            }
                        }

                        .the-tradition-chinese-calendar {
                            width: 40px;
                            position: absolute;
                            left: 10px;
                            top: 34px;
                            font-size: 10px;
                            transition: all ease 0.2s;
                        }

                        &.selected {
                            //background: #023f99;
                            background: radial-gradient(#2B6CFF, #0062fb);
                            border-radius: 50%;

                            .table-badge {
                                background: #ffffff;
                                color: #023f99;
                            }

                            .date-number {
                                color: #ffffff;
                            }

                            .the-tradition-chinese-calendar {
                                color: #ffffff;
                            }
                        }
                    }
                }
            }
        }
    }

}
</style>