<template>
	<a-form
		:label-col="{ span: 4 }"
		:model="formState"
		:wrapper-col="{ span: 20 }"
		autocomplete="off"
		labelAlign="left"
		name="basic"
		scrollToFirstError
		@finish="onFinish"
		@finishFailed="useUpdateMethod.formFail"
	>
		<BaseFormItem v-for="item in filedList" :key="item.name" v-model:value="formState[item.name]" v-bind="item" />

		<a-form-item :wrapper-col="useUpdateMethod.formActionCol">
			<a-button html-type="submit" type="primary">提交</a-button>
			<a-button style="margin-left: 10px" @click="useUpdateMethod.handleCancel">关闭</a-button>
		</a-form-item>
	</a-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import requestMethod from '../../../../api/dynamic/record'
import dictionaryRequestMethod from '../../../../api/system/dictionary'
import { CascaderProps, FieldProps } from '../../../../components/form-item/field-props'
import { QueryObjectType } from '../../../../http/request-model'
import { updateMethod } from '../../../../components/form/method'
import BaseFormItem from '../../../../components/form-item/BaseFormItem.vue'
import { messageMethod } from '../../../../utils/message-util'
import { ShowTableField } from './columns'

// 操作页面的公用方法
const useUpdateMethod = updateMethod()

/**
 * 属性
 */
const props = defineProps<{
	id?: string
	tableId: string
	fields: FieldProps[]
	dictionaryIdMap?: { [key: string]: string }
	showTableFieldList?: ShowTableField[]
}>()

const formState = ref<QueryObjectType>({
	id: ''
})

/**
 * 如果是编辑，获取数据
 * 请求列表数据
 */
const filedList = reactive<FieldProps[]>([])
onMounted(async () => {
	new Promise(resolve => {
		if (props.id) {
			requestMethod.getById(props.tableId, props.id).then(data => {
				const item = data.data as QueryObjectType
				Object.keys(item).forEach(key => {
					formState.value[key] = item[key]
				})
				// 判断有多少个是需要查询字段信息的
				resolve('update')
			})
		} else {
			resolve('add')
		}
	}).then(type => {
		operationType = type as string
	})
	filedList.push(...props.fields)
	// 获取所有的rootCode
	if (props.dictionaryIdMap) {
		Object.entries(props.dictionaryIdMap).forEach(([columnName, dictionaryId]) => {
			dictionaryRequestMethod.getListRootCode(dictionaryId).then(data => {
				const formItem = filedList.find((value: FieldProps) => value.name == columnName)
				if (!formItem) {
					return
				}
				const list = data.data.map(item => ({
					label: item.itemName,
					value: item.id
				}))
				const typeValue = {} as CascaderProps
				typeValue.options = list
				formItem.typeValue = typeValue
			})
		})
	}
	// 获取所有的动态表关联信息
	if (props.showTableFieldList && props.showTableFieldList.length > 0) {
		props.showTableFieldList.forEach(item => {
			requestMethod.listBySelectField(item.tableId, item.showFieldName).then(data => {
				const formItem = filedList.find((value: FieldProps) => value.name == item.columnName)
				if (!formItem) {
					return
				}
				const typeValue = {} as CascaderProps
				formItem.typeValue = typeValue
				typeValue.options = Object.entries(data.data).map(([key, value]) => ({
					label: value,
					value: key
				}))
			})
		})
	}
})

// 操作类型add或者update
let operationType = 'add'

/**
 * 提交表单
 * @param value
 */
const onFinish = async (value: QueryObjectType) => {
	// 转成list
	const list = Object.entries(value).map(([key, value]) => ({
		columnName: key,
		columnValue: value
	}))
	if (operationType === 'add') {
		const resultModel = await requestMethod.add(props.tableId, list)
		messageMethod.success(resultModel.message)
		useUpdateMethod.handleSave()
	} else {
		const resultModel = await requestMethod.update(props.tableId, props.id || '', list)
		messageMethod.success(resultModel.message)
		useUpdateMethod.handleSave()
	}
}
</script>

<style lang="scss" scoped>
.form-grid {
	display: grid;
}
</style>
