<template>
	<a-form :label-col="{ span: 4 }" :model="formState" :wrapper-col="{ span: 20 }" labelAlign="left" name="basic">
		<a-form-item label="表编号" name="tableName">
			<span>{{ formState.tableName }}</span>
		</a-form-item>
		<a-form-item label="表名称" name="tableComment">
			<span>{{ formState.tableComment }}</span>
		</a-form-item>
		<a-form-item label="表结构">
			<TableColumnsManage ref="tableColumnsManage" :list="dataList" read />
		</a-form-item>
	</a-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import requestMethod from '../../../api/dynamic/table'
import TableColumnsManage from './table-columns/Manage.vue'
import { DynamicFormTableColumnVo } from '../../../entity/dynamic/dynamic-form-table'
import { DEFAULT_DYNAMIC_TABLE_PREFIX } from '../common'

const props = defineProps<{
	id: string
}>()

// 表单字段列表
const dataList = ref<Array<DynamicFormTableColumnVo>>([])

interface FormState {
	// 表单编号（唯一）
	tableName: string
	// 表单名称（中文）
	tableComment: string
	// 表类型、模块
	tableType: string
	// 表内容
	tableContent: string
	version: number
}

const formState = reactive<FormState>({
	tableName: '',
	tableComment: '',
	tableType: '',
	tableContent: '',
	version: 0
})

/**
 * 信息初始化
 */
const init = () => {
	requestMethod.getById(props.id).then(data => {
		formState.tableName = data.data.tableName.replace(DEFAULT_DYNAMIC_TABLE_PREFIX, '')
		formState.tableComment = data.data.tableComment
		formState.tableType = data.data.tableType
		formState.tableContent = data.data.tableContent
		formState.version = data.data.version || 0
		dataList.value.push(...data.data.columnList)
	})
}

void init()
</script>

<style scoped></style>
