<template>
	<div class="tab-switcher">
		<div :class="{ active: selectedTab === 'latest' }" @click="selectTab('latest')"><span style="font-size: 12px">最新</span></div>
		<div :class="{ active: selectedTab === 'hot' }" @click="selectTab('hot')"><span style="font-size: 12px">热门</span></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	const emit = defineEmits(['selectTab'])
	const selectedTab = ref('latest')

	const selectTab = (tab) => {
		if (selectedTab.value != tab) {
			selectedTab.value = tab
			emit('selectTab', tab)
		}
	}
</script>

<style scoped>
	.tab-switcher {
		display: flex;
		border-radius: 5px;
		border: 1px solid #1e90ff;
		overflow: hidden;
	}

	.tab-switcher div {
		padding: 1px 25px;
		background-color: #ffffff;

		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab-switcher div.active {
		background-color: #1e90ff;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab-switcher div:not(:last-child) {
	}
</style>
