<!--
 * @Author: 张宁 18339727226@163.com
 * @Date: 2024-05-28 11:55:39
 * @LastEditors: 张宁 18339727226@163.com
 * @LastEditTime: 2024-05-29 15:28:27
 * @FilePath: \welcome-system-screen\src\components\datePicker\yearPane.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 yearList" @click="selectYear(item)">
            <div :class="{ selected: isSelectedDate(item) }" class="item-num">{{ item }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
const props = defineProps({
    curYear: Number,
});
const currentYear = ref(new Date().getFullYear());
const selectYears:Ref<any> = ref(props.curYear)
// 获取到近六年的年份
const yearList = computed(() => {
    let years = []
    for (let i = 0; i < 6; i++) {
        years.unshift(currentYear.value - i);
    }
    return years;
})
// 选择年的处理 如果点击的是当前的 就赋值为空
const selectYear = (year: number) => {
    if (selectYears.value == year) {
        selectYears.value = 0
    } else {
        selectYears.value = year;
    }
}
const emits = defineEmits(["update:curYear"]);
watch(selectYears, (newVal) => {
    emits("update:curYear", newVal);
});
const isSelectedDate = (year: any) => {
    if (year == selectYears.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>