<template>
    <div :class="['s-radio-group',props.layout]">
        <div class="s-radio" v-for="item in props.options" :key="item.key" @click="onChange">
            <input
                type="radio"
                :id="item.key"
                :value="item.value"
                :checked="props.value === item.value"
            />
            <label :for="item.key" :data-value="item.value">{{ item.label }}</label>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { RadioOptions } from "@types/index"
interface Props {
    options: RadioOptions;
    value: string | number;
    name: string;
    layout?: string;
}
const props = withDefaults(defineProps<Props>(), {
   layout: "row"
})

const emit = defineEmits(["update"])
const onChange = (e: Event) => {
   const target = (e.target as HTMLInputElement)
   if (target.tagName === "LABEL") {
      emit("update", { name: props.name, value: target.dataset.value })
   } else if (target.tagName === "INPUT") {
      emit("update", { name: props.name, value: target.value })
   }
}
</script>
<style lang="less" scoped>

    .s-radio-group{
        &.column{
            display: flex;
            flex-direction: column;
        }

        &.row{
            display: flex;
        }
        .s-radio {
            input,label{
                cursor: pointer;
            }
            line-height: @listHeight;
            height: @listHeight;
            margin-right: 10px;
            white-space: nowrap;
        }
    }

</style>
