<!--
 * @Author: 张宁 18339727226@163.com
 * @Date: 2024-05-28 11:56:59
 * @LastEditors: 张宁 18339727226@163.com
 * @LastEditTime: 2024-05-29 15:23:57
 * @FilePath: \welcome-system-screen\src\components\datePicker\monthPane.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="box">
        <div class='box-item' v-for="item, index in MonthList">
            <div class="item-num" :class="{ selected: isSelectedDate(item) }" @click="selectMonth(item)">{{ item }}
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
const props = defineProps({
    curMonth: Number,
});
const selectMonths:Ref<any> = ref(props.curMonth)
const MonthList = computed(() => {
    let Months = []
    for (let i = 0; i < 12; i++) {
        Months.unshift(12 - i);
    }
    return Months;
})
const selectMonth = (Month: number) => {
    if(selectMonths.value === Month){
        selectMonths.value = 0
    }else{
        selectMonths.value = Month;
    }
}
// 更新外面的值
const emits = defineEmits(["update:curMonth"]);
watch(selectMonths, (newVal) => {
    emits("update:curMonth", newVal);
});
const isSelectedDate = (Month: any) => {
    if (Month == selectMonths.value) {
        return true
    } else {
        return false
    }
}
</script>

<style scoped lang='scss'>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    .box-item {
        margin-right: 10px;
        margin-top: 20px;
        width: 120px;
        height: 70px;
        line-height: 70px;
        display: flex;
        justify-content: center;

        .item-num {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;

        }

        .selected {
            background-color: #007bff;
            color: #fff;
        }
    }
}
</style>