<script>
import IconPrev from '@/static/launches/icon_prev.png';
import IconNext from '@/static/launches/icon_next.png';
import IconNextDisabled from '@/static/launches/icon_next_disabled.png';

// 从 sessionStorage 获取缓存数据的辅助函数
function getCachedYear() {
	try {
		const cachedData = sessionStorage.getItem('launches_search_cache');
		if (cachedData) {
			const parsedData = JSON.parse(cachedData);
			return parsedData.currentYear || new Date().getFullYear();
		}
	} catch (e) {
		console.error('获取缓存的年份失败', e);
	}
	return new Date().getFullYear();
}

export default {
	props: {
		value: {
			type: Number,
			default: getCachedYear
		}
	},
	data() {
		return {}
	},
	computed: {
		year() {
			return this.value;
		},
		prevIcon() {
			return IconPrev;
		},
		nextIcon() {
			return this.year === new Date().getFullYear() ? IconNextDisabled : IconNext;
		},
		isNextDisabled() {
			return this.year === new Date().getFullYear();
		}
	},
	methods: {
		prevYear() {
			this.$emit('input', this.year - 1);
		},
		nextYear() {
			if (!this.isNextDisabled) {
				this.$emit('input', this.year + 1);
			}
		}
	}
}
</script>

<template>
	<div class="flex-center box">
		<div class="btn" @click="prevYear">
			<img :src="prevIcon" alt="Previous Year" />
		</div>
		<div class="text">{{ year }}</div>
		<div class="btn" @click="nextYear">
			<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.box {
	gap: 6px;
	color: #3A4A65;
	font-size: 24px;
	font-family: 'Poppins-SemiBold';
	.btn {
		width: 36px;
		height: 36px;
		cursor: pointer;
		//background-color: #FFFFFF;
		border-radius: 4px;

		&:active {
			opacity: 0.8;
		}

		img {
			width: 100%;
			height: 100%;
		}
	}
	.text {
		width: 60px;text-align: center; font-family: 'Poppins-Regular';
	}
}
</style>
