<template>
	<u-checkbox-group
		v-model="checked"
		@change="checkboxChange"
		:borderBottom="true"
		placement="column"
		iconPlacement="right"
	>
		<u-checkbox
			:customStyle="{ marginBottom: '16px' }"
			v-for="(item, index) in list"
			:key="index"
			:label="item.name"
			:name="item.name"
			activeColor="#FF8CA6"
		>
		</u-checkbox>
	</u-checkbox-group>
</template>

<script setup>
const emits = defineEmits(['change'])
const props = defineProps({
	list: {
		type: Array,
		default: () => {
			return [
				{
					name: '汽车',
					disabled: false
				},
				{
					name: '蒸汽机',
					disabled: false
				},
				{
					name: '猪肉',
					disabled: false
				},
				{
					name: '抄手',
					disabled: false
				}
			]
		}
	},
	checked: {
		type: Array,
		default: () => []
	}
})
const checked = toRefs(props.checked)
const checkboxChange = (n) => {
	emits('change', n)
}
</script>

<style lang="scss" scoped>
.button-hover {
	background-color: transparent;
}
</style>
