<template>
    <div class="container">
        <header>
            <el-form :label-width="120">
                <el-form-item label="年份">
                    <el-date-picker
                        v-model="year"
                        type="year"
                        value-format="YYYY"
                        placeholder="请选择年份"
                        :disabled-date="disabledDate"
                    />
                </el-form-item>
            </el-form>
        </header>
        <div>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in holidays" :key="item.month">
                    <div class="calendar-month">
                        <header>{{ year }}年{{ item.month }}月</header>
                        <div class="calendar-week flex wrap">
                            <div
                                class="calendar-cell calendar-cell_week flex center"
                                v-for="week in weeks"
                                :key="week"
                            >
                                <div class="cell">{{ week }}</div>
                            </div>
                            <div
                                class="calendar-cell flex center calendar-body"
                                v-for="(day, index) in item.days"
                                :key="index"
                            >
                                <div
                                    class="cell"
                                    :disabled="!day.day"
                                    :isHoliday="day.flag"
                                >
                                    {{ day.day }}
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import moment from "moment";
import { listHolidays } from "@/api/system/holiday";

const year = ref(moment().year() + '');
const holidays = ref([]);

const weeks = ["一", "二", "三", "四", "五", "六", "日"];

const disabledDate = (time) => {
  return time.getFullYear() < 2023
}

function getHolidays() {
    listHolidays(year.value).then((data) => {
        holidays.value = data;
    });
}

onMounted(() => {
    getHolidays();
})

watch(year, () => {
    getHolidays();
})
</script>
<style lang="scss" scoped>
.calendar-month {
    background: #fbfcff;
    box-shadow: inset 0px -1px 0px 0px #e9ebfd;
    border: 1px solid #e9ebfd;
    margin-bottom: 20px;
    padding: 20px;
    header {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 700;
    }
}
.calendar-cell {
    width: 14.26%;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 700;
    .cell {
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-radius: 50%;
    }
    &.calendar-body {
        .cell[disabled="false"]:hover {
            background-color: #eee;
            cursor: pointer;
        }
        .cell[isHoliday="true"] {
            background-color: #ff5722;
            color: #fff;
            &:hover {
                background-color: #f9825d;
            }
        }
    }
    &.calendar-cell_week {
        color: #777;
        font-family: SourceHanSansCN, SourceHanSansCN;
    }
}
</style>