<template>
    <div class="input radio" :style="{ width, height }">
        <input :name="name" :disabled="disabled" :id="id" type="radio" class="replace-input" :checked="props.modelValue" @change="ev => emit('update:modelValue', ev.target.checked)" />
        <span class="replace"></span>
    </div>
    <label class="label" v-if="props.label || props.icon" :for="id">
        <Icon :type="props.icon" :tip="props.tip" v-if="props.icon" />
        {{ props.label }}
    </label>
</template>

<script setup lang="ts">
import Icon from '../icon'
import { radioPropsDesc } from './state'
import { randomId } from '../../utils'
import { defineProps, defineEmits } from 'vue'
const props = defineProps(radioPropsDesc)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)
</script>
