<template>
  <el-button v-for="(item, index) in props.data" :key="index" :type="modelValue === item.value ? 'primary' : ''" @click="handleChange(item)">{{
    item.label
  }}</el-button>
</template>

<script lang="ts" setup>
  import  type{ PropType } from 'vue'
  const props = defineProps({
    data: {
      type: Array as PropType<{ num?: number; label: string; value: string | number; [key: string]: any }[]>,
      default: () => [],
    },
  })

  const emits = defineEmits(['change'])

  const modelValue = defineModel<number | string>('modelValue', {
    required: true,
  }) // 双向绑定的value

  const handleChange = (value: { value: string | number; [key: string]: any }) => {
    modelValue.value = value.value
    emits('change', value)
  }
</script>
