<script>
export default {
	props: {
		value: {
			type: String,
			default: 'popular'
		}
	},
	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>
