import React from 'react';
import { AutoComplete, Button, Form, Input } from 'antd';
import { connectAlita } from 'redux-alita';


/**
 * 添加属性标签的表单,
 * 包括编辑，和添加
 */
class AddLabelForm extends React.Component {

    static defaultProps = {
        searchLabel: { data: {} },
        cancel: () => {
        },
    };

    constructor(props) {
        super(props);
        let { label } = props;
        this.state = {
            label: label || { pid: 0 },
            labelList: [],
        };
    }

    handleSubmit = e => {
        e.preventDefault();
        const _this = this;
        let params = { id: _this.state.label.id, pid: _this.state.label.pid };
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                if (_this.state.label.id) {
                    _this.props.setAlitaState({ funcName: 'labelEdit', params: { ...values, ...params } })
                        .then((resp) => {
                            console.log(' resp ', resp);
                        });
                } else {
                    _this.props.setAlitaState({ funcName: 'labelAdd', params: { ...values, ...params } });
                }
            }
        });
    };

    handleSearchLabel = (keywords) => {
        this.props.setAlitaState({ funcName: 'searchLabel', params: { keywords } });
    };

    onSelect(sources = [], path) {
        for (let i in sources) {
            let source = sources[i];
            if (source.path === path) {
                let oldV = this.state.label;
                this.setState({ label: { ...oldV, pid: source.id } });
                break;
            }
        }
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        let { label } = this.props;
        if (!label) return null;
        const { data: dataSource, isFetching } = this.props.searchLabel || { data: {} };
        const { isFetching: isSubmitLoading } = this.props.labelAdd || {};
        const { isFetching: isEditLoading } = this.props.labelEdit || {};

        if (!dataSource.records) dataSource.records = [];
        return (<Form onSubmit={this.handleSubmit}>
            {(!label.id) && (<Form.Item>
                {getFieldDecorator('path')(<AutoComplete onSearch={this.handleSearchLabel}
                                                         dataSource={dataSource.records.map(item => item.path)}
                                                         loading={isFetching}
                                                         onSelect={this.onSelect.bind(this, dataSource.records)}
                                                         placeholder='输入关键词查询上级标签'/>)}
            </Form.Item>)}
            <Form.Item>
                {getFieldDecorator('label', {
                    rules: [{ required: true, message: '请输入标签' }],
                    initialValue: label.label,
                })
                (<Input disabled={!!label.id} placeholder='请输入标签'/>)}
            </Form.Item>
            <Form.Item>
                {getFieldDecorator('title', { initialValue: label.title })(<Input placeholder='请输入标签名称'/>)}
            </Form.Item>
            <Form.Item>
                {getFieldDecorator('description', { initialValue: label.description })(<Input placeholder='请输入标签简介'/>)}
            </Form.Item>
            <Form.Item>
                <Button type='default' htmlType='button' onClick={this.props.cancel}>取消</Button>
                <Button loading={isSubmitLoading || isEditLoading} htmlType='submit' type='primary'>提交</Button>
            </Form.Item>
        </Form>);
    }


}

export default connectAlita(['searchLabel', 'labelAdd', 'labelEdit'])(Form.create({ name: 'AddLabelForm' })(AddLabelForm));
