<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
const props = defineProps({
	list:{
		type:Array,
		default:()=>[]
	},
	selected:{
		type:String,
		default:()=>''
	}
})
const emit = defineEmits([
	'update:selected'
])
const checkList = computed(()=>{
	return [props.selected]
})
const handleChange = (val) => {
	if (val.length > 1) {
		emit('update:selected', val[val.length - 1])
	}
}
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<el-checkbox-group v-model="checkList" @change="handleChange">
		<el-checkbox 
			v-for="item in props.list" 
			:key="item.value"
			:value="item.value"
		>
			{{ item.label }}
		</el-checkbox>
	</el-checkbox-group>
</template>
<style lang="less" scoped>
	.el-checkbox-group{
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
	}
	label{
		--el-checkbox-font-size: 1.6rem;
		--el-checkbox-checked-text-color: #232323;
		--el-checkbox-font-weight: 400;
		--el-checkbox-height: 2rem;
		--el-checkbox-checked-bg-color: #232323;
		--el-checkbox-checked-input-border-color: #232323;
		--el-checkbox-input-border: 1px solid #232323;
		font-family: "KaiseiOpti-Regular";
		line-height: 2rem;
		.el-checkbox__label{
			padding-left: 1.4rem;
		}
	}
</style>