<template>
  <radio-group class="radio-group" :value="modelValue" @change="handleChange">
    <slot></slot>
  </radio-group>
</template>

<script lang="ts" setup>
import { provide, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

// 处理变更
const handleChange = (e: any) => {
  const value = e.detail.value
  emit('update:modelValue', value)
  emit('change', value)
}

// 切换选项
const toggleOption = (value: string | number) => {
  emit('update:modelValue', value)
  emit('change', value)
}

// 提供给radio的上下文
provide('radioGroup', {
  modelValue: computed(() => props.modelValue),
  disabled: computed(() => props.disabled),
  toggleOption,
})
</script>

<style scoped lang="scss">
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
</style>
