<template>
  <el-checkbox-group v-model="selectedItem" @change="handleChange">
    <el-checkbox v-for="item in props.data" :key="item.value" :label="item.label" border size="large">
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script setup>
import { ref, defineEmits, defineProps } from "vue";
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  count: {
    type: Number,
    default: 1, // 默认只能选择一个
  },
});
const selectedItem = ref([]);
const emit = defineEmits(["update:modelValue", "change"]);

const handleChange = (val) => {
  // 实现单选逻辑：如果选中多个，只保留最后一个
  if (val.length > props.count) {
    selectedItem.value = val.slice(-props.count);
  }
  emit("update:modelValue", selectedItem.value);
  emit("change", selectedItem.value);
};
</script>

<style scoped></style>
