/**
 * 表单提交：handleSubmit: Function,
 *
 * 表单取消：handleCancel:Function
 *
 * 数据回显：mapPropsToFields:Function
 *
 * 监听表单值发生变化是的回掉：onValuesChange:Function
 *
 * 样式：propClass：object
 *
 * 增加字段：hideOperateBtn，有该字段，隐藏表单底部操作按钮
 *
 * 失去焦点：onBlurFn
 *  */
import React, { Component } from 'react';
import { Form, Button } from 'antd';
import { emptyModel } from '@/submodule/components/apolloTable/component/base/_utils/setFormatter';
import { defaultLocale } from '@/submodule/components/apolloTable/locale';
import _ from 'lodash';
import styles from './index.less';
import { config } from '../component/base/config';
import { transferAttr } from '../component/base/_utils/transferAttr';
import { getFormat, setFormat } from '../component/base';
import { Provider } from '../component/context';

const FormItem = Form.Item;

class FormWrap extends Component {
    wrapDom: any;

    handleSubmit = (e) => {
        e.preventDefault();
        e.stopPropagation();
        const {
            rowId, form, handleSubmit, data, rowData, detailType,
        } = this.props;
        form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const newValues: any[] = [];
                _.keys(values).map((key) => {
                    const item = data.find((temp: any) => {
                        return temp.columnName === key;
                    });
                    const { columnType, columnAttrObj, renderEditForm, readOnlyFlag, dynamicCellConfigDTO } = item;
                    if (readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag)) {
                        return;
                    }
                    let detailConfig: any;
                    if (typeof renderEditForm === 'function') {
                        detailConfig = renderEditForm({ cellData: values[key], rowData, columnConfig: item });
                    } else {
                        detailConfig = config[String(columnType)] || config['1'];
                    }
                    const cellValueList = setFormat(detailConfig, item, values[key]);
                    const newData: any = {
                        columnCode: key,
                        cellValueList,
                    };
                    newValues.push(newData);
                });

                if (typeof handleSubmit === 'function') {
                    handleSubmit({ data: { value: newValues }, formValues: values, detailType });
                }
            }
        });
    };

    handleCancel = () => {
        const { handleCancel } = this.props;
        if (typeof handleCancel === 'function') {
            handleCancel();
        }
    };

    handleDelete = () => {
        const { rowId, handleDelete } = this.props;
        if (typeof handleDelete === 'function') {
            handleDelete({ data: { id: rowId } });
        }
    };

    renderLabel = (item) => {
        // const { icon } = config[item.columnType];
        return (
            <span className={styles.titleContainer}>
                {/* icon && <div className={styles.colIcon}>{icon}</div> */}
                <span className={styles.itemTitle}>{item.columnChsName}</span>
            </span>
        );
    };

    validateRequired = (item, rule, value, callback) => {
        if (!item.requiredFlag) {
            return callback();
        }
        if (!value) {
            return callback('必填项不能为空');
        }
        if (Array.isArray(value)) {
            if (value.length === 0) {
                return callback('必填项不能为空');
            }
            const [first] = value;
            if (!first.text && first.text !== 0 && !first.value && first.value !== 0) {
                return callback('必填项不能为空');
            }
        }
        if (typeof value === 'object') {
            if (
                !value.label
                && value.label !== 0
                && !value.text
                && value.text !== 0
                && !value.value
                && value.value !== 0
            ) {
                return callback('必填项不能为空');
            }
        }
        return callback();
    };

    renderEditForm = (item) => {
        const { getFieldDecorator } = this.props.form;
        const { rowData, rowId, getInstanceDetail, onBlurFn } = this.props;
        const {
            columnType,
            columnName,
            columnAttrObj,
            value,
            renderEditForm,
            readOnlyFlag,
            rules = [],
            validateFirst = true,
            validateTrigger = 'onChange',
            dynamicCellConfigDTO,
            cellRenderProps,
        } = item;
        let detailConfig: any;
        if (typeof renderEditForm === 'function') {
            detailConfig = renderEditForm({ cellData: value, rowData, columnConfig: item });
        } else {
            detailConfig = config[String(columnType)] || config['1'];
        }
        const EditComp: any = detailConfig.editComp;
        const newProps = {
            ...(detailConfig.componentAttr || {}),
            ...(columnAttrObj || {}),
        };
        const transferColumn = transferAttr(columnType, newProps);
        const disabled = readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag);
        const onBlurFn1 = (changedValue: any, newVal: any) => {
            if (typeof onBlurFn === 'function') {
                let temp: any[] = [];
                value.map((item: any) => {
                    temp.push({ text: item.text, value: item.value });
                });
                if (temp.length === 0) {
                    temp = emptyModel;
                }
                if (!!item.requiredFlag && Array.isArray(newVal) && !newVal[0].value) {
                    return;
                }
                if (_.isEqual(temp, newVal)) {
                    return;
                }
                onBlurFn(changedValue);
            }
        };
        return (
            <FormItem key={columnName} label={this.renderLabel(item)}>
                {getFieldDecorator(columnName, {
                    validateFirst,
                    validateTrigger,
                    rules: [
                        { required: !!item.requiredFlag, message: '必填项不能为空' },
                        { validator: this.validateRequired.bind(this, item) },
                        ...rules,
                    ],
                    initialValue: getFormat(detailConfig, item, value),
                })(
                    <EditComp
                        {...transferColumn}
                        columnConfig={item}
                        disabled={disabled}
                        rowId={rowId}
                        onBlurFn={onBlurFn1}
                        rowData={{ id: rowId, rowData }}
                        cellRenderProps={cellRenderProps}
                        origin="editForm"
                        form={this.props.form}
                        getInstanceDetail={getInstanceDetail}
                        getCalendarContainer={() => {
                            return this.wrapDom;
                        }}
                        getPopupContainer={() => {
                            return this.wrapDom;
                        }}
                    />,
                )}
            </FormItem>
        );
    };

    getContext = () => {
        const { locale } = this.props;
        if (locale) {
            if (locale.context) {
                if (locale.lang && defaultLocale[locale.lang]) {
                    return { ...defaultLocale[locale.lang], ...locale.context };
                }
                return locale.context;
            }
        }
        return defaultLocale.cn;
    };

    render() {
        const {
            loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn,
        } = this.props;

        return (
            <Provider value={{ locale: this.getContext() }}>
                <div className={styles.wrap}>
                    <p className={styles.titleCls}>{name}</p>
                    <div
                        id="gotop"
                        className={styles.formItemCls}
                        ref={(r) => {
                            this.wrapDom = r;
                        }}
                    >
                        <Form onSubmit={this.handleSubmit} layout="vertical">
                            {data.map((item: any, i: number) => {
                                return (
                                    <div
                                        key={i}
                                        className={styles.item}
                                        style={{
                                            width: `${100 / colsNum}%`,
                                            marginLeft: colsNum > 1 && i % colsNum === 0 ? '-50px' : 0,
                                            paddingLeft: colsNum > 1 ? '50px' : 0,
                                        }}
                                    >
                                        {this.renderEditForm(item)}
                                    </div>
                                );
                            })}
                        </Form>
                    </div>
                    <div className={styles.buttonWrap} style={btnWrapStyle}>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            {isShowDelBtn && (
                                <Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
                                    {delLabel || '删除'}
                                </Button>
                            )}
                            {!hideOperateBtn && (
                                <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
                                    <Button onClick={this.handleCancel} className={styles.btnCls}>
                                        取消
                                    </Button>
                                    <Button
                                        onClick={this.handleSubmit}
                                        type="primary"
                                        className={styles.btnCls}
                                        loading={loading}
                                        id="submitBtn" // 用于业务监听此dom节点
                                    >
                                        确定
                                    </Button>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </Provider>
        );
    }
}

export default Form.create({ name: 'editFormV3' })(FormWrap);