<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
const props = defineProps({
	list:{
		type:Array,
		default:()=>[]
	},
	selected:{
		type:Array,
		default:()=>[]
	}
})
const emit = defineEmits([
	'update:selected','change'
])
const checkList = computed(()=>{
	if(props.selected[0] === 'all'){
		return props.list.map(item => item.value)
	}else{
		return [...props.selected]
	}
})
const handleChange = (val) => {
	let data = val.filter(item => item !== 'all')
	if(val.length == 0)return
	if(data.length == props.list.length){
		data = ['all']
	}else{
		data = [...val]
	}
	emit('update:selected', data)
	emit('change', data)
}
const checkAll = computed(()=>{
	return checkList.value.length === props.list.length
})
const handleCheckAllChange = (val) => {
	let data = []
	if(val && props.selected[0] !== 'all'){
		data = ['all']
		// data = props.list.map(item => item.value)
		emit('update:selected', data)
		emit('change', data)
	}
}
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="all">
		<el-checkbox
			v-model="checkAll"
			@change="handleCheckAllChange"
		>
			{{ $t('checked.All') }}
		</el-checkbox>
	</div>
	<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>
	.all{
		margin-bottom: 1.2rem;
	}
	.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>