<template>
	<div class="page">
		<InputNumberGroup />
		<a-form
			:label-align="useUpdateMethod.formLabelAlign"
			:label-col="useUpdateMethod.formLabelCol"
			:model="formState"
			:wrapper-col="useUpdateMethod.formWrapperCol"
			scrollToFirstError
			@finish="onFinish"
			@finishFailed="useUpdateMethod.formFail"
		>
			<base-form-item
				v-for="item of addFields"
				:key="item.name + item.type"
				v-model:value="formState[item.name]"
				v-bind="item"
				@update:extraValue="extraValueChange"
			/>

			<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>

		<div class="detail">
			<dc-drawer-item v-for="item in detailFields" :key="item.name" :data="detail" v-bind="item" :span="2"> </dc-drawer-item>
		</div>
	</div>
</template>

<script lang="ts" setup>
import fields from './fields'
import { onMounted, reactive } from 'vue'
import { ExtraProps, UploadProps } from '../../components/form-item/field-props'
import { updateMethod } from '../../components/form/method'
import { BaseFormDTO } from '../../entity/common/base'
import { messageMethod } from '../../utils/message-util'
import { LogFile } from '../../entity/system-log/log-file'
import { detailFields } from './detail-fields'
import InputNumberGroup from '../../components/form-item/input-number-group'

const detail: LogFile = {
	fileName: '文件名称',
	backupStatus: 0,
	convertMessage: 'null',
	convertStatus: 0,
	createUserName: '超级管理',
	fileSize: 50352,
	fileType: 'jpg',
	gmtCreate: '2022-04-22 11:45:53',
	gmtModified: '2022-04-22 11:45:53',
	id: 'a7168c5fd13f4841a21d1e79ec35eb0f',
	md5Hex: 'fd04816141b1c6b2932ea4023d4b184a',
	memo: 'null',
	newFileName: 'a7168c5fd13f4841a21d1e79ec35eb0f.jpg',
	oldFileName: 'js array.jpg',
	targetHost: 'null',
	updateUserName: '<p>这是一个富文本</p>'.repeat(10),
	uploadPath: '2022/202204/20220422/a7168c5fd13f4841a21d1e79ec35eb0f.jpg',
	version: 1
}

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

const formState = reactive<Partial<LogFile>>({})

function extraValueChange(name: string, extra: ExtraProps) {
	// 需要注意的是赋值以后和 onFinish 里面拿不到这个赋值， 两个不是一个对象

	// 这样赋值
	Object.assign(formState, extra)

	// 这样赋值
	Object.keys(extra).forEach(key => {
		formState[key] = extra[key]
	})

	// 或者通过 name 找到， 然后手动赋值
	// fields.find(value => value.name == name)
	if (name == 'upload-images') {
		//  手动进行操作或者判断
	}

	// console.log(extra)
}

const addFields = reactive(fields)
onMounted(async () => {
	let typeValue = addFields.find(value => value.name == 'upload-image')?.typeValue as UploadProps
	if (typeValue) {
		typeValue.fileList = [
			{
				oldFileName: '燕子.gif',
				id: '9f598a8b1e6547f6b6afb14dacda86ef',
				uploadPath: '2022/202204/20220426/86011c9d252943818240585895c1e655.gif'
			}
		]
	}
	formState['rich-text'] = '<p>这是一个富文本</p>'
})

/**
 * 提交表单
 * @param value
 */
const onFinish = async (value: BaseFormDTO) => {
	messageMethod.info(JSON.stringify(value))
	// console.log(value)
}
</script>
<script lang="ts">
export default {
	name: 'Dashboard'
}
</script>

<style scoped>
.page {
	height: 100%;
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	overflow-y: auto;
	padding: 16px 0;
}

.detail {
	padding-top: 30px;
	flex: 1 1 auto;
	margin-left: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: min-content;
	grid-auto-flow: row dense;
	grid-row-gap: 16px;
}
</style>
