<template>
  <view class="radio-group">
    <slot></slot>
  </view>
</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 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>
