import React, { useState, useEffect } from 'react';
import { Form, Button } from 'antd';
import Shell from '@/baseComponent/Shell';
import { ModalInfo } from '@/baseComponent/Modal';
import { addOrEditTableItem, fetchTableData, fetchTableHeader } from '@/webPublic/Services';
import { preHandle } from '@/webPublic/one_stop_public/utils/myutils';
import { getOneStopConfig } from '@/baseComponent/utils';
import { RenderFormByContent } from '../RenderForm';

// 直接获取的表格数据的字段是明文,找换成base转换后的字段
function getBaseEncodedData(rowData, tableHeader) {
	// {name: base52}
	const nameBaseMap = tableHeader.reduce((acc, header) => {
		return { ...acc, [header.name]: header.base52 };
	}, {});
	// 明文字段转换成base后的字段, eg. {process_status: 1} => {JbZWZHoGRsA: 1}
	return Object.keys(rowData).reduce((acc, name) => {
		const base52 = nameBaseMap[name];
		if (!base52) return acc;
		return { ...acc, [base52]: rowData[name] };
	}, {});
}

// 配置页面,配置数据在元数据表格的第一行
// 1. 页面显示通过模板id渲染。
// 2. 页面数据通过元数据表id, 查询和修改。
// templateCode, 页面模板id
// tableId, 元数据列表id
// children, 可以传children,但children不能是数组(不能传属性),children里可以自定义其他组件。

function SingleDataPageInFirstRow(props) {
	const {
		children,
		form,
		templateCode: templateCodeFromProps,
		dataObjId: dataObjIdFromProps,
		location: { pathname },
	} = props;
	// templateCode 和 dataObjId 可以通过组件属性或者根据路径配置获取
	const templateCodeFromPathname = getOneStopConfig(`${pathname}-templateCode`);
	const dataObjIdFromPathname = getOneStopConfig(`${pathname}-dataObjId`);

	const templateCode = templateCodeFromPathname || templateCodeFromProps;
	const dataObjId = dataObjIdFromPathname || dataObjIdFromProps;

	if (!templateCode || !dataObjId) {
		console.warn(
			'模板code或者元数据表格id为空,templateCode: ' + templateCode + ', dataObjId: ' + dataObjId,
		);
		return null;
	}

	const [isAdd, setIsAdd] = useState(false);
	const [content, setContent] = useState({});

	useEffect(
		() => {
			fetchTableHeader(dataObjId).then((tableHeader) => {
				if (!tableHeader) return;
				fetchTableData({ pageNo: 1, pageSize: 10, isBase: true, dataObjId, query: {} }).then(
					(res) => {
						const firstRowData = (res && res.rows && res.rows[0]) || {};
						setContent(getBaseEncodedData(firstRowData, tableHeader));
						setIsAdd(!!(!res || res.errMsg));
					},
				);
			});
		},
		[dataObjId],
	);

	function handleSave() {
		const { validateFields } = form;

		validateFields((err, values) => {
			if (err) return;
			// console.log(JSON.stringify(values.JjvkRobXWTE), JSON.stringify(values.JjvkwLqcsyY));
			preHandle(values);
			// console.log(JSON.stringify(values.JjvkRobXWTE));
			addOrEditTableItem({ objId: dataObjId, isAdd, data: values }).then((res) => {
				if (res) {
					ModalInfo('保存成功!');
				}
			});
		});
	}

	let ClonedChildren;
	if (children) {
		ClonedChildren = React.cloneElement(React.Children.only(children), {
			form,
			isAdd,
			url: '/DataObjApi/addFormData',
		});
	}

	return (
		<Shell styleShell={{ marginTop: 0 }}>
			<RenderFormByContent content={content} templateCode={templateCode} form={form} />
			{ClonedChildren || (
				<div style={{ textAlign: 'center', padding: 16 }}>
					<Button type="primary" shape="round" ghost onClick={handleSave}>
						保存
					</Button>
				</div>
			)}
		</Shell>
	);
}

export default Form.create()(SingleDataPageInFirstRow);