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

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue'
import UIIcon from '@kankan/components/basic/icon'
import { randomId } from '@kankan/utils'
import { radioProps } from './radio'
const props = defineProps(radioProps)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)

defineOptions({
    name: 'UIRadio',
})
</script>
