<script setup lang="ts">
import { ref, watch, 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 = ref([])
const checkAll = ref(false)

watch(()=>props.selected, (newVal, oldVal) => {
	if(newVal[0] === 'all' && newVal.length === 1){
		checkList.value = []
		checkAll.value = true
	}else{
		checkList.value = [...newVal]
		checkAll.value = false
	}
},{immediate:true})
const handleChange = (val) => {
	let data = val.filter(item => item !== 'all')
	if(data.length == props.list.length || data.length == 0){
		data = ['all']
	}else{
		data = [...val]
	}
	emit('update:selected', data)
	emit('change', data)
}

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)
	}else{
		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>