<template>
	<view class="select-types-box">
		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 1}" @click="handleClick(0)">学</ezyActiveVue>
		<icon class="jt-item" :class="{active: activeSelect == 1}"></icon>
		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 2}" @click="handleClick(1)">拼</ezyActiveVue>
		<icon class="jt-item" :class="{active: activeSelect == 2}"></icon>
		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 3}" @click="handleClick(2)">读</ezyActiveVue>
		<icon class="jt-item" :class="{active: activeSelect == 3}"></icon>
		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 4}" @click="handleClick(3)">选</ezyActiveVue>
		<icon class="jt-item" :class="{active: activeSelect == 4}"></icon>
		<ezyActiveVue class="ezy-btn-active types-item" :class="{active: activeSelect == 5}" @click="handleClick(4)">背</ezyActiveVue>
	</view>
</template>

<script setup>
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	defineProps({
		activeSelect: {
			type: [String,Number],
			required: true
		}
	})
	
	const emits = defineEmits(['change'])
	
	function handleClick(code) {
		emits('change',code)
	}
</script>

<style lang="scss" scoped>
	.select-types {
		display: flex;
		justify-content: space-between;
	}
	.active {
		color: red;
	}
</style>