/**
 * 表单提交：handleSubmit: Function,
 *
 * 表单取消：handleCancel:Function
 *
 * 数据回显：mapPropsToFields:Function
 *
 * 监听表单值发生变化是的回掉：onValuesChange:Function
 *
 * 样式：propClass：object
 *  */
import React, { Component } from 'react';
import { Form, Button } from 'antd';
import styles from './index.less';
import { config } from '../component/base/config';
import { transferAttr } from '../component/base/_utils/transferAttr';
import { getFormat } from '../component/base';
import { Provider } from '../component/context';
import { defaultLocale } from '@/submodule/components/apolloTable/locale';

const FormItem = Form.Item;

class FormWrap extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        e.stopPropagation();
        const { rowId, form, handleSubmit } = this.props;
        form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const result = [];
                Object.keys(values).map((el) => {
                    result.push({
                        columnCode: el,
                        cellValueList: values[el],
                    });
                });
                handleSubmit({ data: { id: rowId, value: result } });
            }
        });
    };

    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>
        );
    };

    renderEditForm = (item) => {
        const { getFieldDecorator } = this.props.form;
        const { rowData } = this.props;
        const {
            columnType,
            columnName,
            columnAttrObj,
            value,
            renderEditForm,
            readOnlyFlag,
            rules = [],
            validateFirst = true,
            validateTrigger = 'onChange',
        } = 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);
        // if(item.columnName==='emails'){
        // debugger
        // }
        return (
            <FormItem key={columnName} label={this.renderLabel(item)}>
                {getFieldDecorator(columnName, {
                    validateFirst,
                    validateTrigger,
                    rules: [{ required: !!item.requiredFlag }, ...rules],
                    // initialValue: getFormat(detailConfig, item, value),
                })(<EditComp {...transferColumn} columnConfig={item} disabled={readOnlyFlag} />)}
            </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 } = 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
                                        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: 'center' }}>
                            {isShowDelBtn ? (
                                <Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
                                    删除
                                </Button>
                            ) : null}
                            <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>
            </Provider>
        );
    }
}

function mapPropsToFields(props) {
    const returnObj = {};
    const { data, renderEditForm, rowData } = props;
    data.forEach((el) => {
        // let detailConfig: any;
        // if (typeof renderEditForm === 'function') {
        //     detailConfig = renderEditForm({ cellData: el.value, rowData, columnConfig: el });
        // } else {
        //     detailConfig = config[String(el.columnType)] || config['1'];
        // }
        // const formatValue = getFormat(detailConfig, el, el.value);
        // console.log('formatValue',formatValue)
        returnObj[el.columnType] = Form.createFormField({
            value: el.value,
        });
    });
    return returnObj;
}

function onValuesChange(props, changedValues, allValues) {
    if (props.changeValue) {
        props.changeValue(changedValues, allValues);
    }
}

export default Form.create({ name: 'form_view', mapPropsToFields, onValuesChange })(FormWrap);