<template>
    <view class="fb-date-picker">
        <uv-form-item :label="title" :prop="fieldItemProp" borderBottom @click="showPicker">
            <FBFormField>
                <view class=""></view>
                <uv-radio-group  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>
        <uv-datetime-picker ref="datetimePicker" :modelValue="value" @update:modelValue="updateValue" mode="datetime" @confirm="confirm">
		</uv-datetime-picker>
    </view>
</template>

<script setup lang="ts">
import { computed, nextTick, ref } 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 datetimePicker = ref();

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 showPicker = () => {
    datetimePicker.value?.open();
};

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>