<template>
    <uv-form-item :label="title" :prop="fieldItemProp" borderBottom>
        <FBFormField>
            <uv-textarea :modelValue="value" @update:modelValue="updateValue" v-bind="fieldProps"></uv-textarea>
        </FBFormField>
    </uv-form-item>
</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 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>