<template>
	<div class="switch-box flex-between-center">
		<div class="item-text" :class="value === 'Daily' && 'active'" @click="handleClick('Daily')">Daily</div>
		<div class="diver"></div>
		<div class="item-text" :class="value === 'Weekly' && 'active'" @click="handleClick('Weekly')">Weekly</div>
		<div class="diver"></div>
		<div class="item-text" :class="value === 'Monthly' && 'active'" @click="handleClick('Monthly')">Monthly</div>
	</div>
</template>

<script>
// 从 sessionStorage 获取缓存数据的辅助函数
function getCachedMode() {
	try {
		const cachedData = sessionStorage.getItem('launches_search_cache');
		if (cachedData) {
			const parsedData = JSON.parse(cachedData);
			return parsedData.currentMode || 'Daily';
		}
	} catch (e) {
		console.error('获取缓存的模式失败', e);
	}
	return 'Daily';
}

export default {
	props: {
		value: {
			type: String,
			default: getCachedMode,
		}
	},
	data() {
		return {}
	},
	methods: {
		handleClick(type) {
			this.$emit('input', type);
		}
	}
}
</script>

<style scoped lang="scss">
.switch-box {
	padding: 12px 40px;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 10px 30px 0 #0000000d;
	.diver {
		width: 1px;
		height: 29px;
		margin-left: 33px;
		margin-right: 33px;
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #E2E8F0;
	}
	.item-text {
		font-size: 24px;
		font-family: 'Poppins-Regular';
		color: #3A4A65;
		&:active {
			opacity: 0.8;
		}
	}
	.active {
		color: #7B61FF;
		font-weight: 900 !important;
		font-family: 'Poppins-Bold';
	}
}
</style>
