<template>
    <view class="fb-radio">
        <uv-form-item :label="title" :prop="fieldItemProp" borderBottom>
            <FBFormField>
                <uv-radio-group :modelValue="value" @update:modelValue="updateValue" v-bind="fieldProps">
                    <uv-radio v-for="(enumItem, index) in enums" :key="index" :name="enumItem.value"
                    :label="enumItem.label"></uv-radio>
                </uv-radio-group>
            </FBFormField>
        </uv-form-item>
    </view>
</template>

<script setup lang="ts">
import { computed, nextTick } from 'vue'
import type { FieldItemInfo } from '../../../types/basic';
import { getByPaths, setByPaths } from '../../../commons/utils/dataPath';
import FBFormField from './fb-form-field.vue'

const props = defineProps<FieldItemInfo>()
const emit = defineEmits()

const { title, dataIndex, fieldProps = {} } = props
const enums = props.valueEnum ? Object.keys(props.valueEnum).map(key => ({ label: props.valueEnum![key].text, value: key })) : []

const fieldItemProp = dataIndex.join('.')

const value = computed(() => getByPaths(props.modelValue, dataIndex))

const updateValue = (val: any) => {
    const oldVal = getByPaths(props.modelValue, dataIndex)
    if (val !== oldVal) {
        nextTick(() => {
            setByPaths(props.modelValue, dataIndex, val)
            emit('update:modelValue', props.modelValue)
        })
    }
}
</script>

<style lang="less" scoped>
.fb-radio {
    :deep(.uv-radio-group) {
        row-gap: 10px;
        column-gap: 10px;
    }
}
</style>