<template>
	<view class="fb-form-container">
		<view ref="form" class="fb-form">
			<uv-form labelWidth="80" labelPosition="left" :model="formData" ref="form">
				<view class="fb-form-item" v-for="(field, index) in formFields" :key="index">
					<FBText v-if="field.valueType === 'Digit'" v-model="formData" v-bind="field" />
					<FBText v-else-if="field.valueType === 'Text'" v-model="formData" v-bind="field" />
					<FBTextarea v-else-if="field.valueType === 'Textarea'" v-model="formData" v-bind="field" />
					<FBSelect v-else-if="field.valueType === 'select'" v-model="formData" v-bind="field" />
					<FBRadio v-else-if="field.valueType === 'radio'" v-model="formData" v-bind="field" />
					<FBDatePicker v-else-if="field.valueType === 'datetime'" v-model="formData" v-bind="field" />
					<FBCalendar v-else-if="field.valueType === 'date'" v-model="formData" v-bind="field" />
					<FBLookup v-else-if="field.valueType === 'Lookup'" v-model="formData" v-bind="field" />
					<FBSwitch v-else-if="field.valueType === 'switch'" v-model="formData" v-bind="field" />
					<FBAttachment v-else-if="field.valueType === 'Attachment'" v-model="formData" v-bind="field" />
					<FBAttachment v-else-if="field.valueType === 'MultiAttachment'" v-model="formData" v-bind="field" multi />
				</view>
			</uv-form>
		</view>
		<FBButtonBar :margin-top="20" :actions="formActions" />
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps } from 'vue';
import { doApiAction } from '../../commons/api/component';
import type { FormProps } from '../../types/components/form';


import FBButtonBar from '../commons/fb-button-bar.vue'

import FBText from './field/text.vue'
import FBTextarea from './field/textarea.vue'
import FBSelect from './field/select.vue'
import FBRadio from './field/radio.vue'
import FBDatePicker from './field/date-picker.vue'
import FBCalendar from './field/calendar.vue'
import FBLookup from './field/lookup.vue'
import FBSwitch from './field/switch.vue'
import FBAttachment from './field/attachment.vue'
import { ActionInfo } from '../../types/basic';
import { buildDefaultValue } from '../../commons/utils/defaultValue';

const { componentKey, variableForm, closePopup, readonly, actions, recordActions, fields, input, onDataLoad } = defineProps<FormProps>()


const formFields = fields.filter(field => field.display === 'Show')

const form = ref()
const formData = ref<any>()
const formActions: ActionInfo[] = []

const buildActionLoadData = () => [formData.value, input]

const buildActionCallback = (action: ActionInfo) => async () => {
	if (action.closePopupOnSuccess) {
		uni.navigateBack()
	}
}

actions?.forEach((action: ActionInfo) => {
	formActions.push({
		...action,
		data: input,
		callback: buildActionCallback(action),
		// errorCallback,
	})
})

recordActions?.forEach((action: ActionInfo) => {
	formActions.push({
		...action,
		needArrayWrapper: false,
		loadData: buildActionLoadData,
		callback: buildActionCallback(action),
		// errorCallback,
	})
})

const fetchFormData = async () => {
	const data = await doApiAction({ componentKey, type: 'API', actionKey: 'loadData', needArrayWrapper: false, data: [input] })
	if (onDataLoad) {
		onDataLoad(data);
	}
	formData.value = data
}

onMounted(async () => {
	if (variableForm) {
		await fetchFormData()
	} else if(input) {
		formData.value = input
	} else {
		formData.value = buildDefaultValue(formFields.filter(field => field.display != 'Disabled'))
	}
})
</script>

<style lang="less">
.fb-form-container {
	width: 100vw;
    overflow-y: auto;
    height: 100%;

	.fb-form {
		padding: 0px 10px 10px 10px;
	}
}
</style>