import React, { Fragment } from 'react';
import {
	Button,
	Card,
	DatePicker,
	Divider,
	Form,
	Row,
	Col,
	Input,
	message,
	Modal,
	Select,
	Popconfirm,
	Tooltip,
	Spin,
	Popover,
	Checkbox,
} from 'antd';
import { connect } from 'dva';
import PageHeaderWrapper from './PageHeaderWrapper';
import styles from './TableList.less';
import StandardTable from './StandardTable';
import moment from 'moment';
import router from 'umi/router';
import ExportInfo from '../../App/ExportInfo';
import ExportCurrentInfo from '../../App/ExportCurrentInfo';

import StatisticsInfo from '../../App/StatisticsInfo';
import ImportUtil from '../../App/ImportUtil';
import SearchInfo from '../../App/SearchInfo';
import { Base16Encode } from '../../Base16/index';

import { isEmpty } from 'lodash';
import FilePreview from '@/webPublic/one_stop_public/filePreview';
import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
import UploadCom from '@/webPublic/one_stop_public/libs/UploadCom';
import ButtonDiy from '../../App/ButtonDiy/ButtonDiy';
import { cloneDeep } from '../../copy/index';

const FormItem = Form.Item;
let AllWidth = 0; // 表格总长度
const { RangePicker } = DatePicker;

const text = [
	'BINARY',
	'BIT',
	'BLOB',
	'CHAR',
	'GEOMETRY',
	'GEOMETRYCOLLECTION',
	'JSON',
	'LINESTRING',
	'LONGBLOB',
	'LONGTEXT',
	'MEDIUMBLOB',
	'MEDIUMINT',
	'MEDIUMTEXT',
	'MULTILINESTRING',
	'MULTIPOINT',
	'MULTIPOLYGON',
	'POINT',
	'POLYGON',
	'REAL',
	'DECIMAL',
	'ENUM',
	'SET',
	'TEXT',
	'TINYBLOB',
	'TIBYTEXT',
	'VARBINARY',
	'VARCHAR',
	'VARCHAR2',
	'NVARCHAR2',
];
const number = [
	'BIGINT',
	'DOUBLE',
	'FLOAT',
	'INT',
	'INTEGER',
	'NUMERIC',
	'SMALLINT',
	'TINYINT',
	'NUMBER',
];
const data = ['DATE', 'DATETIME', 'TIME', 'TIMESTAMP', 'YEAR'];

const CreateForm = Form.create()((props) => {
	const {
		modalVisible,
		form,
		handleAdd,
		formLoading,
		formData,
		isAdd,
		handleModalVisible,
		formItem,
		getItem,
		isView,
	} = props;

	//通过回调
	const okHandle = () => {
		form.validateFields((err, fieldsValue) => {
			if (err) return;
			if (isView) {
				handleModalVisible();
				return;
			}
			formItem.map((item, index) => {
				if (item.type.indexOf('DATE') > -1) {
					for (let d in fieldsValue) {
						if (item.name === d && fieldsValue[d]) {
							//处理日期何时入库问题
							try {
								fieldsValue[d] = fieldsValue[d].format('YYYY-MM-DD HH:mm:ss');
							} catch (e) {}
							break;
						}
					}
				} else if (number.includes(item.type)) {
					for (let d in fieldsValue) {
						if (item.name === d && fieldsValue[d] == '') {
							fieldsValue[d] = null;
							break;
						}
					}
				}
			});
			let params = { ...fieldsValue };
			handleAdd(params, isAdd);
		});
	};

	//需要获取动态表单
	return (
		<Modal
			width="700px"
			maskClosable={false}
			destroyOnClose
			title={isView ? '查看详情' : isAdd ? '新增' : '编辑'}
			visible={modalVisible}
			footer={
				isView
					? null
					: [
							<Button key="back" onClick={() => handleModalVisible()}>
								取消
							</Button>,
							<Button key="submit" type="primary" onClick={okHandle}>
								确定
							</Button>,
					  ]
			}
			onOk={okHandle}
			onCancel={() => handleModalVisible()}>
			{formItem.map((item, index) =>
				getItem(false, form, item, isAdd, formData, { span: 5 }, { span: 15 }),
			)}
		</Modal>
	);
});

@connect(({ formList, DataColumn, DataObj, loading }) => ({
	formList,
	DataColumn,
	DataObj,
	loading: loading.models.formList || loading.models.DataColumn || loading.models.DataObj,
}))
@Form.create()
class FormList extends React.Component {
	state = {
		data: {
			list: [],
			pagination: {},
		},
		selects: [],
		modalVisible: false,
		formData: null,
		formValues: {},
		formItem: [],
		objId: this.props.objId || (this.props.location ? this.props.location.state.id : null),
		isAdd: false,
		querys: [],
		selectedRows: [],
		primaryKey: null,
		options: {},
		isTable: true,
		tableWidth: 500,
		rights: this.props.rights || [],
		columnRights: [],
		isReady: false,
		groups: {},
		showDiv: '',
		showMobileDiv: '',
		isView: false,
		checkedList: [], // 复选框默认选中
		cacheColumns: '', // 初始表头缓存数据 后续不做增删改查
	};

	columns = [];
	checkList = []; // 复选框内容
	getOptions = () => {
		const refIds = [];
		for (var i = 0; i < this.state.formItem.length; i++) {
			if (
				this.state.formItem[i].referenceObjId != null &&
				this.state.options[this.state.formItem[i].id + ''] == null
			) {
				refIds.push(this.state.formItem[i].id);
			}
		}

		if (refIds.length > 0) {
			this.props.dispatch({
				type: 'formList/getBatchOptions',
				payload: { ids: refIds },
				callback: (options) => {
					this.setState({ options: { ...this.state.options, ...options } });
				},
			});
		}
	};
	modify = (record) => {
		//  if (this.state.formItem.length < 10) {
		this.getOptions();
		this.props.dispatch({
			type: 'formList/getDetail',
			payload: {
				dataObjId: this.state.objId,
				key: this.state.primaryKey,
				value: record[this.state.primaryKey],
				isBase: false,
			},
			callback: (record2) => {
				this.setState({
					formData: record2,
					modalVisible: true,
					isAdd: false,
					isView: false,
				});
			},
		});
	};

	view = (record) => {
		this.getOptions();
		this.setState({
			formData: record,
			modalVisible: true,
			isAdd: false,
			isView: true,
		});
	};

	isJSON = (str) => {
		if (typeof str == 'string') {
			try {
				var obj = JSON.parse(str);
				if (typeof obj == 'object' && obj) {
					return true;
				} else {
					return false;
				}
			} catch (e) {
				console.log('error：' + str + '!!!' + e);
				return false;
			}
		}
		console.log('这不是个字符串');
	};

	delete = (record) => {
		//找出主键
		let Keys = {};
		Keys[this.state.primaryKey] = record[this.state.primaryKey];
		this.props.dispatch({
			type: 'formList/delete',
			payload: {
				keys: JSON.stringify(Keys),
				objId: this.state.objId,
			},
			callback: () => {
				this.getPage();
			},
		});
	};

	viewProcess = (record) => {
		const { dispatch } = this.props;
		dispatch({
			type: 'formList/getAppId',
			payload: {
				code: record.process_biz_key,
			},
			callback: (data) => {
				const domainName = sessionStorage.getItem('domainName')
					? sessionStorage.getItem('domainName')
					: '';

				window.open(domainName + '/portal/serviceCentre/getdetail?id=' + data.id, '_blank');
				//router.push({ pathname: '/portal/serviceCentre/getdetail', state: { id: data.id } });
			},
		});
	};

	/**
	 * 宽度自适应函数
	 */
	resize = (e) => {
		let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度
		let showMobileDiv = scrollWidth - 77;
		if (document.querySelector('#previewDiv')) {
			// 预览模式
			this.setState({
				showMobileDiv: document.querySelector('#previewDiv').clientWidth - 77,
			});
		} else {
			this.setState({
				showMobileDiv,
			});
		}
	};

	//渲染值
	componentDidMount() {
		const { dispatch, isFormCom, isSelect, callback, valueName } = this.props;
		window.addEventListener('resize', this.resize);
		if (this.props.objCode) {
			const { dispatch, objCode, sql } = this.props;

			if (objCode == 1 || objCode == '1') {
				this.initColumn();
			} else {
				dispatch({
					type: 'DataObj/findByCode',
					payload: { objCode: this.props.objCode },
					callback: (dataObj) => {
						this.setState({ objId: dataObj.id, isTable: data.isTable }, () => {
							dispatch({
								type: 'DataRight/getUserRight',
								payload: { objId: this.state.objId },
								callback: (data) => {
									if (!this.props.rights) {
										this.setState({ rights: data });
									}
									dispatch({
										type: 'DataRight/getUserColumnRight',
										payload: { objId: this.state.objId },
										callback: (data) => {
											this.setState({ columnRights: data });
											this.initColumn();
										},
									});
								},
							});
						});
					},
				});
			}
		} else {
			dispatch({
				type: 'formList/getObjDetail',
				payload: { id: this.state.objId },
				callback: (data) => {
					this.setState({ isTable: data.isTable });
				},
			});
			dispatch({
				type: 'DataRight/getUserRight',
				payload: { objId: this.state.objId },
				callback: (data) => {
					if (!this.props.rights) {
						this.setState({ rights: data });
					}
					dispatch({
						type: 'DataRight/getUserColumnRight',
						payload: { objId: this.state.objId },
						callback: (data) => {
							this.setState({ columnRights: data });
							this.initColumn();
						},
					});
				},
			});
		}
	}

	/**
	 * 移除监听器
	 */
	componentWillUnmount() {
		window.removeEventListener('resize', this.resize);
	}

	custom = this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null;

	componentWillReceiveProps(nextProps) {
		const b = nextProps.value || {};

		const a = this.props.value || {};
		const jsonb = JSON.stringify(b);
		const jsona = JSON.stringify(a);

		this.custom = Base16Encode(jsonb);
		if (jsona != jsonb) {
			let params = {
				pageNo: b.pageNo ? b.pageNo : 1,
				pageSize: b.pageSize ? b.pageSize : this.state.data.pagination.pageSize,
				query: JSON.stringify(this.state.formValues),
			};

			if (nextProps.value.columns != null && nextProps.value.columns.length > 0) {
				this.columns = nextProps.value.columns;
			}

			if (nextProps.value.getPage) {
				this.getPage(params, null, nextProps.value.getPage);
			} else {
				if (this.state.objId) this.getPage(params);
			}
		}
		const x = nextProps.selects;
		const y = this.props.selects;
		if (JSON.stringify(x) != JSON.stringify(y)) {
			this.setState({ selects: x });
		}
	}

	initColumn = () => {
		const { dispatch, isFormCom, isSelect, callback, valueName } = this.props;

		const { rights, columnRights } = this.state;
		if (this.props.value && this.props.value.columns) {
			this.columns = this.props.value.columns;
			let cacheList = [];
			let cacheChecked = [];
			// 表头筛选逻辑
			Array.isArray(this.props.value.columns) &&
				this.props.value.columns.map((item) => {
					if (item.dataIndex != null) {
						cacheList.push({
							label: item.title,
							value: item.dataIndex,
						});
						cacheChecked.push(item.dataIndex);
					}
				});
			this.checkList = cacheList;

			this.setState({
				checkedList: cacheChecked,
				cacheColumns: cloneDeep(this.props.value.columns),
			});
			if (this.props.objCode == 1 || this.props.objCode == '1') {
				this.getPage();
			} else {
				dispatch({
					type: 'formList/getHead',
					payload: { dataObjId: this.state.objId },
					callback: (datas) => {
						this.state.formItem = datas;
						const querys = [];
						const groups = {};
						const refIds = [];
						for (let t in datas) {
							if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
							if (datas[t].isShowQuery) {
								querys.push(datas[t]);
								if (datas[t].referenceObjId != null) {
									refIds.push(datas[t].id);
								}
								if (datas[t].isGroupQuery != null) {
									dispatch({
										type: 'formList/getGroupList',
										payload: { columnId: datas[t].id },
										callback: (gourp) => {
											groups[datas[t].id] = gourp;
											this.setState({ groups });
										},
									});
								}
							}
						}
						if (querys.length > 0) {
							this.setState({ querys });
							if (refIds.length > 0) {
								dispatch({
									type: 'formList/getBatchOptions',
									payload: { ids: refIds },
									callback: (options) => {
										this.setState({ options });
									},
								});
							}
						}
						this.getPage();
					},
				});
			}
			return;
		}

		if (this.props.objCode == 1 || this.props.objCode == '1') {
		} else {
			dispatch({
				type: 'formList/getHead',
				payload: { dataObjId: this.state.objId },
				callback: (datas) => {
					const querys = [];
					const refIds = [];
					const groups = {};
					if (datas) {
						this.state.formItem = datas;
						let i = 0;
						let cacheList = [];
						let cacheChecked = [];
						// 表头筛选逻辑
						datas.map((item) => {
							if (item.name != null) {
								cacheList.push({
									label: item.title,
									value: item.name,
								});
								cacheChecked.push(item.name);
							}
						});
						this.checkList = cacheList;
						this.setState({
							checkedList: cacheChecked,
						});
						for (let t in datas) {
							if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
							if (datas[t].isHidden) {
								continue;
							}
							let column = {};
							column.title = datas[t].title;
							column.dataIndex = datas[t].name;
							column.width = datas[t].width;
							if (i == 0) column.fixed = 'left';

							if (columnRights.length > 0 && !columnRights.includes(datas[t].id)) {
								continue;
							}
							if (data.includes(datas[t].type)) {
								column.render = (val) => {
									if (val == null) {
										return val;
									}
									if (datas[t].dataFormatStrWeb != null) {
										return moment(val).format(datas[t].dataFormatStrWeb);
									} else {
										return moment(val).format('YYYY-MM-DD HH:mm:ss');
									}
								};
							} else if (datas[t].name.indexOf('process_status') > -1) {
								column.render = (val) => (val ? (val === '0' ? '审核通过' : '审核未通过') : null);
							} else if (datas[t].extendTypeId && datas[t].extendTypeId.indexOf('file') > -1) {
								//特殊处理附件
								column.render = (val) => {
									if (this.isJSON(val)) {
										val = JSON.parse(val);
										let files = val.files;
										let xx = (
											<ul>
												{files.map((f, index2) => {
													return (
														<li key={index2}>
															<FilePreview path={queryApiActionPath() + f.path} pathName={f.name} />
														</li>
													);
												})}
											</ul>
										);
										return xx;
									} else {
										return val;
									}
								};
							} else {
								column.render = (val) =>
									val && val.length > 100 ? (
										<Tooltip title={val} overlayStyle={{ width: 1000 }}>
											<span
												style={{
													width: column.width || 200,
													display: 'block',
													wordBreak: 'keep-all',
													whiteSpace: 'nowrap',
													overflow: 'hidden',
													textOverflow: 'ellipsis',
												}}>
												{val}
											</span>
										</Tooltip>
									) : (
										val
									);
							}

							this.setState({ tableWidth: (datas.length - 1) * 200 });
							this.columns.push(column);
							this.setState({
								cacheColumns: cloneDeep(this.columns),
							});
							if (datas[t].isShowQuery) {
								querys.push(datas[t]);
								if (datas[t].referenceObjId != null) {
									refIds.push(datas[t].id);
								}
								if (datas[t].isGroupQuery != null) {
									dispatch({
										type: 'formList/getGroupList',
										payload: { columnId: datas[t].id },
										callback: (gourp) => {
											groups[datas[t].id] = gourp;
											this.setState({ groups });
										},
									});
								}
							}
							i++;
						}
						if (querys.length > 0) {
							this.setState({ querys });
							if (refIds.length > 0) {
								dispatch({
									type: 'formList/getBatchOptions',
									payload: { ids: refIds },
									callback: (options) => {
										this.setState({ options });
									},
								});
							}
						}

						this.getPage();
					}
				},
			});
		}
	};
	sqlBs16 = Base16Encode(this.props.sql);
	getPage = (params, values, callPage, pageNo) => {
		if (this.columns == null || this.columns.length == 0) {
			return;
		}
		const { dispatch } = this.props;
		const pagination = this.state.data.pagination;

		if (params == null) {
			params = {
				pageNo: pageNo != null ? pageNo : pagination.current ? pagination.current : 1,
				pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10,
				query: JSON.stringify(values != null ? values : this.state.formValues),
			};
		} else {
			if (params.pageNo == null && callPage == null && this.props.value.getPage == null) return;
		}

		if (this.props.objCode && (this.props.objCode == '1' || this.props.objCode == 1)) {
			if (callPage) {
				callPage(params, (data) => {
					if (!this.state.isReady) {
						this.setState({ data, isReady: true });
					} else {
						this.setState({ data });
					}
				});
			} else if (this.props.value && this.props.value.getPage) {
				this.props.value.getPage(params, (data) => {
					if (!this.state.isReady) {
						this.setState({ data, isReady: true });
					} else {
						this.setState({ data });
					}
				});
			}
		} else {
			dispatch({
				type: 'formList/fetch',
				payload: {
					custom: this.custom,
					...params,

					sql: this.sqlBs16,
					dataObjId: this.state.objId,
				},
				callback: (data) => {
					if (!this.state.isReady) {
						this.setState({ data, isReady: true });
					} else {
						this.setState({ data });
					}
				},
			});
		}
	};

	handleStandardTableChange = (pagination, filtersArg, sorter) => {
		const filters = Object.keys(filtersArg).reduce((obj, key) => {
			const newObj = { ...obj };
			newObj[key] = getValue(filtersArg[key]);
			return newObj;
		}, {});

		const params = {
			pageNo: pagination.current,
			pageSize: pagination.pageSize,
			...filters,
			query: JSON.stringify(this.state.formValues),
		};
		if (sorter.field) {
			params.sorter = `${sorter.field}_${sorter.order}`;
		}
		this.getPage(params);
	};

	handleAdd = (fields, isAdd) => {
		let params = {
			...fields,
		};
		this.props.dispatch({
			type: 'formList/add',
			payload: {
				params: params,
				objId: this.state.objId,
				isAdd: isAdd,
				isSelf: true,
				isView: false,
			},
			callback: () => {
				message.success('操作成功');
				this.setState({
					modalVisible: false,
				});
				this.getPage();
			},
		});
	};

	handleModalVisible = () => {
		this.setState({
			modalVisible: this.state.modalVisible ? false : true,
			formData: {},
			isView: false,
		});
	};

	add = () => {
		// if (this.state.formItem.length < 10) {
		this.getOptions();
		this.setState({
			modalVisible: true,
			formData: {},
			isAdd: true,
			isView: false,
		});
		// } else {
		//   router.push({
		//     pathname: '/admin/ddl/dataObj/formEdit',
		//     state: { id: this.state.objId,isAdd: true,isView:false }
		//   });
		// }
	};

	handleSelectRows = (rows) => {
		if (this.props.onSelectRow) {
			this.props.onSelectRow(rows);
		}
		this.setState({
			selectedRows: rows,
		});
	};

	batchDelete = (e) => {
		const { dispatch } = this.props;
		const { selectedRows } = this.state;

		if (!selectedRows) return;

		let columns = this.state.formItem;
		let Keys = {};

		for (let i in columns) {
			if (columns[i].isPrimaryKey) {
				//key
				Keys[columns[i].name] = selectedRows.map((row) => row[columns[i].name]).join(',');
			}
		}
		this.props.dispatch({
			type: 'formList/delete',
			payload: {
				keys: JSON.stringify(Keys),
				objId: this.state.objId,
				// isSelf: true,
			},
			callback: () => {
				this.setState({
					selectedRows: [],
				});
				this.getPage();
			},
		});
	};

	goBack = () => {
		router.goBack();
	};
	handleSearch = (e) => {
		e.preventDefault();

		const { dispatch, form } = this.props;

		const { formValues } = this.state;

		form.validateFields((err, fieldsValue) => {
			if (err) return;

			const formItem = this.state.formItem;
			formItem.map((item, index) => {
				if (item.type.indexOf('DATE') > -1) {
					for (let d in fieldsValue) {
						if (item.name === d && fieldsValue[d]) {
							if (fieldsValue[d] != null && fieldsValue[d].length > 0) {
								fieldsValue[d] = [
									fieldsValue[d][0].format('YYYY-MM-DD HH:mm:ss'),
									fieldsValue[d][1].format('YYYY-MM-DD HH:mm:ss'),
								];
							} else {
								fieldsValue[d] = '';
							}
						}
					}
				}
			});
			const values = {
				...this.state.formValues,
				...fieldsValue,
			};
			this.setState({
				formValues: fieldsValue,
			});
			const params = {
				pageNo: 1,
				pageSize: this.props.pageSize || 10,
				query: JSON.stringify(values),
			};
			this.getPage(params, values, null, 1);
		});
	};

	hanldeHighSearch = (e) => {
		const pagination = this.props.formList.data.pagination;
		let params = {
			pageNo: pagination.current ? pagination.current : 1,
			pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10,
			...e,
		};
		this.setState({ formValues: { ...e, ...this.state.formValues } });
		this.getPage(params);
	};
	handleFormReset = () => {
		const { form, dispatch } = this.props;
		form.resetFields();
		this.setState(
			{
				formValues: {},
			},
			() => {
				this.getPage();
			},
		);
	};
	getItem = (isQuery, form, item, isAdd, formData, labelCol, wrapperCol) => {
		const { groups, isView } = this.state;
		// console.log(item);
		//如果隐藏的话 就用隐藏域放置
		if (item.isHidden) {
			return (
				<FormItem className={styles.hidden}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? '' : formData[item.name],
					})(<Input type="hidden" placeholder="请输入" />)}
				</FormItem>
			);
		}

		if (item.isPrimaryKey) {
			if (isAdd) {
				return <></>;
			} else {
				return (
					<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
						{form.getFieldDecorator(item.name, {
							initialValue: formData == null ? '' : formData[item.name],
							rules: [{ required: !item.isNull }],
						})(<Input style={{ width: '70%' }} readOnly={!isAdd} placeholder="请输入" />)}
					</FormItem>
				);
			}
		} else if (item.referenceObjId != null) {
			const { options } = this.state;
			const ops = options[item.id + ''] || [];
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? '' : formData[item.name],
						rules: [{ required: !item.isNull }],
					})(
						<Select
							disabled={isView}
							style={{ width: '70%' }}
							optionFilterProp="children"
							showSearch
							filterOption={(input, option) =>
								option
									? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
									: false
							}
							placeholder="请选择"
							allowClear>
							{ops.map((r) => (
								<Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}>
									{r[item.referenceNameName]}
								</Option>
							))}
						</Select>,
					)}
				</FormItem>
			);
		} else if (item.name.indexOf('process_status') > -1) {
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? '' : formData[item.name],
						rules: [{ required: !item.isNull }],
					})(
						<Select disabled={isView} style={{ width: '70%' }} placeholder="请选择" allowClear>
							<Option value={'0'} key={'0'}>
								审核通过
							</Option>
							<Option value={'2'} key={'2'}>
								审核未通过
							</Option>
						</Select>,
					)}
				</FormItem>
			);
		} else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) {
			//特殊处理附件 如果是查询就 跳过
			if (isQuery) return;
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue:
							formData == null
								? ''
								: formData[item.name] && this.isJSON(formData[item.name])
									? JSON.parse(formData[item.name])
									: null,
						rules: [{ required: !item.isNull }],
					})(<UploadCom disabled={isView} />)}
				</FormItem>
			);
		} else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) {
			//如果是查询 并且是组合查询

			const ops = groups[item.id + ''] || [];
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? '' : formData[item.name],
						rules: [{ required: !item.isNull }],
					})(
						<Select
							disabled={isView}
							style={{ width: 200 }}
							placeholder="请选择"
							optionFilterProp="children"
							showSearch
							filterOption={(input, option) =>
								option
									? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
									: false
							}
							allowClear>
							{ops.map((r) => (
								<Option value={r.value} key={r.value}>
									{r.value}
								</Option>
							))}
						</Select>,
					)}
				</FormItem>
			);
		} else if (text.indexOf(item.type) > -1) {
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? '' : formData[item.name],
						rules: [{ required: !item.isNull }],
					})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)}
				</FormItem>
			);
		} else if (number.indexOf(item.type) > -1) {
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? '' : formData[item.name],
						rules: [
							{ required: !item.isNull },
							(rule, value, callback) => {
								var errors = [];
								var reg = new RegExp(/(^-?[0-9][0-9]*(.[0-9]+)?)$/);
								if (value != null && value != '' && !reg.test(value)) {
									errors.push(new Error('请输入'), rule.field);
								}
								callback(errors);
							},
						],
					})(<Input disabled={isView} placeholder="请输入" />)}
				</FormItem>
			);
		} else if (isQuery && data.indexOf(item.type) > -1) {
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? null : moment(formData[item.name]),
						rules: [{ required: !item.isNull }],
					})(
						<RangePicker
							disabled={isView}
							format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
							style={{ width: '95%' }}
						/>,
					)}
				</FormItem>
			);
		} else if (data.indexOf(item.type) > -1) {
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue:
							formData == null
								? moment()
								: formData[item.name]
									? moment(formData[item.name])
									: null,
						rules: [{ required: !item.isNull }],
					})(
						<DatePicker
							format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
							style={{ width: '100%' }}
							placeholder="请输入"
							disabled={isView}
						/>,
					)}
				</FormItem>
			);
		} else {
			return (
				<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
					{form.getFieldDecorator(item.name, {
						initialValue: formData == null ? '' : formData[item.name],
						rules: [{ required: !item.isNull }],
					})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)}
				</FormItem>
			);
		}
	};

	renderForm() {
		const { form, get } = this.props;

		const { querys } = this.state;
		if (querys.length == 0) {
			return '';
		}

		return (
			<Form layout="inline">
				<Row style={{ padding: '15px' }}>
					{querys.map((item) => (
						<Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}>
							{this.getItem(
								true,
								form,
								{
									...item,
									isNull: true,
								},
								true,
							)}
						</Col>
					))}

					<Col
						span={get === 'mobile' ? 24 : 8}
						style={{
							textAlign: get === 'mobile' ? 'right' : '',
							paddingRight: get === 'mobile' ? 12 : '',
						}}>
						<span className={styles.submitButtons}>
							<Button type="primary" loading={this.props.loading} onClick={this.handleSearch}>
								查询
							</Button>
							<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
								重置
							</Button>
							{/* <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <Icon type="down" />
              </a> */}
						</span>
					</Col>
				</Row>
			</Form>
		);
	}

	/**
	 * @description: 表头筛选复选框 根据用户筛选将表头内容重置
	 * @param { Array<string> } 用户选择参数
	 * @return:
	 */

	CheckboxChange = (checkedValues) => {
		if (checkedValues.length === 0) {
			message.error('至少选择一项');
			return;
		}
		const { cacheColumns } = this.state;
		let initList = [];
		checkedValues.map((item) => {
			let ary = cacheColumns.filter((data) => data.dataIndex === item);
			if (ary.length !== 0) {
				initList.push(ary[0]);
			}
		});
		this.columns = initList;
		this.setState({
			checkedList: checkedValues,
		});
	};

	render() {
		const { modalVisible, selectedRows, rights, data, isReady } = this.state;
		if (!isReady) {
			return (
				<div style={{ width: 20, margin: 'auto' }}>
					<Spin />
				</div>
			);
		}
		const {
			isFormCom,
			isSelect,
			get,
			callback,
			valueName,
			notShowBack,
			json,
			istableCom, // 是否有模板设计器调用
			value: { btns },
			loading,
		} = this.props;

		const { showMobileDiv, isView } = this.state;

		let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度
		let isMobile = scrollWidth < 1000;
		if (document.querySelector('#previewDiv')) {
			isMobile = true;
		}

		let showDiv = json.twidth
			? json.twidth
			: document.querySelector('#mobelDiv') &&
			  document.querySelector('#mobelDiv')?.parentNode.clientWidth;
		const parentMethods = {
			handleAdd: this.handleAdd,
			handleModalVisible: this.handleModalVisible,
			formData: this.state.formData,
			formItem: this.state.formItem,
			isAdd: this.state.isAdd,
			getItem: this.getItem,
			isView: isView,
		};

		if (
			!isSelect &&
			!rights.includes('edit') &&
			!rights.includes('delete') &&
			!rights.includes('view') &&
			!rights.includes('viewProcess')
		) {
		} else {
			let width = 0;
			if (rights && rights.includes('viewProcess')) {
				width = width + 120;
			}
			if (rights && rights.includes('view')) {
				width = width + 120;
			}
			if (rights && rights.includes('edit')) {
				width = width + 70;
			}
			if (rights && rights.includes('delete')) {
				width = width + 70;
			}
			const column = {
				title: '操作',
				fixed: 'right',
				width: width,
				render: (text, record) => {
					let Dom = [];
					if (isSelect) {
						if (this.state.selects.includes(record[valueName])) {
							Dom.push(<span>已选择</span>);
						} else {
							Dom.push(<a onClick={callback.bind(this, record, this.columns)}>选择</a>);
						}
					}
					if (rights) {
						if (rights.includes('view')) {
							Dom.push(<a onClick={this.view.bind(this, record)}>查看详情</a>);
						}
						if (rights.includes('edit')) {
							Dom.push(<a onClick={this.modify.bind(this, record)}>编辑</a>);
						}
						if (rights.includes('viewProcess') && record.process_biz_key) {
							Dom.push(<a onClick={this.viewProcess.bind(this, record)}>流程详情</a>);
						}
						if (rights.includes('delete')) {
							Dom.push(
								<Popconfirm
									title="确定删除该数据?"
									onConfirm={this.delete.bind(this, record)}
									okText="确定"
									cancelText="取消">
									<a>删除</a>
								</Popconfirm>,
							);
						}
					}
					return (
						<Fragment>
							<div style={{ textAlign: 'center', paddingLeft: '0px', paddingRight: '0px' }}>
								{Dom &&
									Dom.length &&
									Dom.map((x, index) => (
										<Fragment key={Math.random()}>
											{x}
											{index > 0 && index !== Dom.length - 1 && <Divider type="vertical" />}
										</Fragment>
									))}
							</div>
						</Fragment>
					);
				},
			};
			if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') {
				this.columns[this.columns.length - 1] = column;
			} else {
				this.columns.push(column);
			}
		}

		if (this.columns) {
			/**
			 * 计算总长度
			 */
			AllWidth = 0;
			this.columns = this.columns.map((item, index) => {
				if (isEmpty(item)) {
					return item;
				}
				if (
					index === this.columns.length - 1 &&
					this.columns[this.columns.length - 1].title !== '操作'
				) {
					AllWidth += 150;
					item.width = '';
					return item;
				}
				let width = item.width ? item.width : 150;
				if (!item.width) {
					item.width = 150;
				}
				AllWidth += width;
				return item;
			});
			if (
				!isEmpty(this.columns[this.columns.length - 1]) &&
				this.columns[this.columns.length - 1].title === '操作'
			) {
				if (this.columns[this.columns.length - 2]) {
					this.columns[this.columns.length - 2].width = '';
					AllWidth += 100;
				}
			}
		}
		const xxxx = (
			<>
				<Card
					bordered={false}
					bodyStyle={{ padding: 0, width: json.twidth ? json.twidth : '100%' }}>
					<div className={styles.tableList}>
						<div className={styles.tableListForm}>{this.renderForm()}</div>
						<div className={styles.tableListOperator}>
							{notShowBack ? (
								notShowBack
							) : (
								<Button icon="rollback" type="primary" onClick={this.goBack}>
									返回
								</Button>
							)}
							{btns && btns.before && btns.before.length > 0
								? btns.before.map((r) => <Button {...r} loading={loading} />)
								: ''}
							{rights && !rights.includes('add') ? (
								''
							) : (
								<Button icon="plus" type="primary" onClick={this.add}>
									新建
								</Button>
							)}
							{rights && !rights.includes('searchData') ? (
								''
							) : (
								<SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId} />
							)}

							{rights && !rights.includes('importData') ? (
								''
							) : (
								<ImportUtil objId={this.state.objId} callback={() => this.getPage()} />
							)}
							{this.props.value && this.props.value.importConfig
								? this.props.value.importConfig.map((r, i) => (
										<ImportUtil
											btn={r.btn}
											ext={r.ext ? r.ext : 'xlsx'}
											importConfig={r}
											objId={this.state.objId}
											callback={() => {
												this.getPage();
												if (r.callback) r.callback();
											}}
										/>
								  ))
								: ''}
							{rights && !rights.includes('exportCurrent') ? (
								''
							) : (
								<ExportCurrentInfo
									objId={this.state.objId}
									query={JSON.stringify(this.state.formValues)}
									custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null}
									sql={Base16Encode(this.props.sql)}
								/>
							)}
							{this.props.value && this.props.value.exportConfig
								? this.props.value.exportConfig.map((r, i) => (
										<ExportCurrentInfo
											objId={this.state.objId}
											query={JSON.stringify(this.state.formValues)}
											custom={
												this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null
											}
											index={i}
											btn={r.btn}
											ext={r.ext ? r.ext : 'xlsx'}
											sql={Base16Encode(this.props.sql)}
										/>
								  ))
								: ''}

							{rights && !rights.includes('exportData') ? (
								''
							) : (
								<ExportInfo objId={this.state.objId} />
							)}
							{rights && !rights.includes('statistics') ? (
								''
							) : (
								<StatisticsInfo objId={this.state.objId} />
							)}
							{rights && !rights.includes('delete')
								? ''
								: selectedRows.length > 0 && (
										<span>
											<Popconfirm
												title="确定删除该数据?"
												onConfirm={this.batchDelete}
												okText="确定"
												cancelText="取消">
												<Button>批量删除</Button>
											</Popconfirm>
										</span>
								  )}
							{rights && !rights.includes('headerFilter') ? (
								''
							) : (
								<Popover // 划入选择栏
									content={
										<div
											style={{
												width: 150,
											}}>
											<Checkbox.Group
												onChange={this.CheckboxChange}
												value={this.state.checkedList}
												options={this.checkList}
											/>
										</div>
									}
									title="请选择表头展示"
									trigger="click"
									placement="bottom">
									<Button // 表头筛选控件
										className={styles.filter_btn}
										icon="filter">
										表头筛选
									</Button>
								</Popover>
							)}
							{btns && btns.after && btns.after.length > 0
								? btns.after.map((r) => <Button {...r} loading={loading} />)
								: ''}
						</div>
						{!istableCom || (this.props.value && this.props.value.columns) ? (
							<div
								id="mobelDiv"
								style={{
									overflow: 'hidden',
									width: isMobile ? showMobileDiv : showDiv,
									height: '100%',
								}}>
								{showDiv && (
									<StandardTable
										showHeader={this.props.showHeader != null ? this.props.showHeader : true}
										noSelectRow={
											this.props.onSelectRow == null &&
											(rights == null || !rights.includes('delete'))
										}
										rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
										data={data}
										isHiddenPage={this.props.isHiddenPage != null ? this.props.isHiddenPage : false}
										columns={this.columns}
										scroll={{ x: AllWidth }}
										selectedRows={selectedRows}
										onSelectRow={this.handleSelectRows}
										onChange={this.handleStandardTableChange}
										loading={this.props.loading}
									/>
								)}
							</div>
						) : (
							<div
								id="mobelDiv"
								style={{
									overflow: 'hidden',
									width: isMobile ? showMobileDiv : showDiv,
									height: '100%',
								}}>
								<div>
									{get === 'mobile' ? <div>手机端,请使用浏览器将手机横屏查看</div> : null}
									{showDiv && (
										<StandardTable
											showHeader={this.props.showHeader != null ? this.props.showHeader : true}
											noSelectRow={
												this.props.onSelectRow == null &&
												(rights == null || !rights.includes('delete'))
											}
											rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
											data={data}
											columns={this.columns}
											scroll={this.props.value && this.props.value.columns ? {} : { x: AllWidth }}
											selectedRows={selectedRows}
											isHiddenPage={
												this.props.isHiddenPage != null ? this.props.isHiddenPage : false
											}
											onSelectRow={this.handleSelectRows}
											onChange={this.handleStandardTableChange}
											loading={this.props.loading}
										/>
									)}
								</div>
							</div>
						)}
					</div>
				</Card>
				<CreateForm {...parentMethods} modalVisible={modalVisible} />
			</>
		);
		if (isFormCom) {
			return xxxx;
		}
		return <PageHeaderWrapper title="">{xxxx}</PageHeaderWrapper>;
	}
}

export default FormList;