<template>
	<div class="check_box">
		<el-checkbox
			v-model="checkAll"
			:indeterminate="isIndeterminate"
			@change="handleCheckAllChange"
			><span style="font-size: 12px">全选</span></el-checkbox
		>
		<el-checkbox-group
			v-model="checkedCities"
			@change="handleCheckedCitiesChange"
		>
			<el-checkbox
				v-for="city in cities"
				:key="city.id"
				:label="city.label"
				><span
					class="label_style"
					:style="{
						color: checkedCities.includes(city.label)
							? 'rgba(153, 153, 153, 1)'
							: 'rgba(31, 31, 31, 1)',
					}"
					>{{ city.label }}</span
				>
			</el-checkbox>
		</el-checkbox-group>
	</div>
</template>

<script setup>
import { ref, toRefs } from 'vue';
const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedCities = ref([]); //用于存储选中的label
const props = defineProps({
	cities: {
		type: Array,
		defalut: [],
	},
});
// const datas = reactive({
//   checkAll:false,
//   checkedCities:[]
// })
const state = toRefs(props);
const { cities } = state;

//全选操作
const handleCheckAllChange = (val) => {
	if (val) {
		cities.value.forEach((item) => {
			checkedCities.value.push(item.label);
		});
	} else {
		checkedCities.value = [];
	}
	isIndeterminate.value = false;
};
//单个复选框操作
const handleCheckedCitiesChange = (value) => {
	const checkedCount = value.length;
	checkAll.value = checkedCount === cities.value.length;
	isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};
</script>

<style lang="scss" scoped>
@import '../../index.scss';
.label_style {
	display: inline-block;
	font-size: 12px;
	margin-bottom: 30px;
}
</style>
