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

<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';
import IconPrevDisabled from '@/static/launches/icon_prev_disabled.png';

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

export default {
	data() {
		return {
		}
	},
	props: {
		value: {
			type: Number,
			default: getCachedMonth
		}
	},
	methods: {
		prevYear() {
			if (this.value > 1) {
				this.$emit('input', this.value - 1);
			}
		},
		nextYear() {
			if (this.value < 12) {
				this.$emit('input', this.value + 1);
			}
		}
	},
	computed: {
		monthName() {
			const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
			return months[this.value - 1];
		},
		prevIcon() {
			return this.value > 1 ? IconPrev : IconPrevDisabled;
		},
		nextIcon() {
			return this.value < 12 ? IconNext : IconNextDisabled;
		},
		isNextDisabled() {
			return this.value >= 12;
		}
	},
}
</script>

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

		&:active {
			opacity: 0.8;
		}

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