<script>
// 从 sessionStorage 获取缓存数据的辅助函数
function getCachedSortType() {
	try {
		const cachedData = sessionStorage.getItem('launches_search_cache');
		if (cachedData) {
			const parsedData = JSON.parse(cachedData);
			return parsedData.sortType || 'popular';
		}
	} catch (e) {
		console.error('获取缓存的排序类型失败', e);
	}
	return 'popular';
}

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

<template>
	<div class="switch-sort-box flex-center">
		<div class="btn-item" @click="handleClick('popular')">
			<img :src="value === 'popular' ? '/launches/icon_popular_checked.png' : '/launches/icon_popular.png'" alt="" />
		</div>
		<div class="btn-item" @click="handleClick('newest')">
			<img :src="value === 'newest' ? '/launches/icon_newest_checked.png' : '/launches/icon_newest.png'" alt="" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.switch-sort-box {
	width: 294px;
	height: 52px;
	background-color: #FFFFFF;
	border-radius: 12px;
	.btn-item {
		width: 147px;
		height: 52px;
		cursor: pointer;
		&:active {
			opacity: 0.8;
		}
		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
