import React, {Component, PropTypes} from 'react';

import {
    Row,
    Col,
    Form,
    Input,
    Button,
    Checkbox,
    Select,
    message,
    Tabs,
    Cascader,
    Radio,
    Upload,
    Icon,
    Modal,
    DatePicker,
    Table,
    Spin
} from 'antd';

import {
    arrayRemoveIndex,
    UUID,
    NULL,
    formItemLayout,
    smallFormItemLayout,
    footerFormSubmitLayout
} from '../../utils';

import FooterOperation from '../FooterOperation/FooterOperation';


@Form.create()
export default class ContactForm extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            staffs: []
        };

    }

    componentDidMount() {
        this.analysisStaffs(this.props);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.isEdit !== this.props.isEdit) {
            this.analysisStaffs(nextProps);
        }
    }

    analysisStaffs(props) {
        if (props.product && props.product.staffs) {
            this.setState({
                staffs: props.product.staffs.map(staffs=> {
                    staffs.key = UUID();
                    return staffs;
                })
            });
        }
    }

    static propsType = {
        product: PropTypes.object,
    };

    /**
     * 删除基本要素
     * @param index
     * @param e
     */
    handleRemove(index, e) {
        e.preventDefault();
        const staffs = arrayRemoveIndex(this.state.staffs, index);
        this.setState({staffs: staffs});
    }

    /**
     * 添加基本要素
     * @param e
     */
    handleAdd(e) {
        e.preventDefault();
        let staffs = [].concat(this.state.staffs);
        staffs.push({key: UUID()});

        this.setState({staffs});
    }

    handleSubmit(e) {
        e.preventDefault();
        const formData = this.props.form.getFieldsValue();
        const tmp = Object.keys(formData).map(index=> {
            return {
                ...formData[index]
            }
        }).filter(item=>item.name && item.mobile);
        const data = {
            id: this.props.product.id,
            staffs: JSON.stringify(tmp)
        }

        console.log('收到表单值：', data);

        this.props.dispatch({
            type: 'UPDATE_PRODUCT_ITEM',
            item: data
        });


    }

    render() {
        const {form:{getFieldProps}, loading, isEdit, isCreate}  = this.props;
        return (
            <Spin spinning={loading}>
                <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
                    <Row style={{padding:'0 20px'}}>
                        <Col span="24">
                            {
                                isEdit ?
                                    <Form.Item>
                                        {
                                            this.state.staffs.map((item, index)=>
                                                <div key={item.key} style={{marginBottom:8}}>
                                                    <Input.Group>
                                                        <Col span="6">
                                                            <Input placeholder="姓名"
                                                                {...getFieldProps(item.key + '.name', {
                                                                    initialValue: item.name
                                                                })} />
                                                        </Col>
                                                        <Col span="10">
                                                            <Input placeholder="电话"
                                                                {...getFieldProps(item.key + '.mobile', {
                                                                    initialValue: item.mobile
                                                                })}/>
                                                        </Col>
                                                        <Col span="4">
                                                            <Icon type="cross" title="删除"
                                                                  onClick={this.handleRemove.bind(this, index)}/>
                                                        </Col>
                                                    </Input.Group>
                                                </div>
                                            )
                                        }
                                    </Form.Item>
                                    :

                                    this.state.staffs.length ?
                                        <Form.Item>
                                        <table className="data-grid">
                                            <thead>
                                            <tr>
                                                <th width="100">姓名</th>
                                                <th>电话</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {
                                                this.state.staffs.map((item, index)=>
                                                    <tr key={index}>
                                                        <td>{item.name}</td>
                                                        <td>{item.mobile || NULL}</td>
                                                    </tr>
                                                )
                                            }
                                            </tbody>
                                        </table>
                                            </Form.Item>
                                        :
                                        <Form.Item {...footerFormSubmitLayout}>
                                            还没有设置过任何一位服务经理及其联系电话
                                        </Form.Item>

                            }

                            <FooterOperation {...this.props} command="PRODUCT" hasCancel={!isCreate} beforeButtons={
                                isEdit &&
                                 <Button size="large" onClick={this.handleAdd.bind(this)}
                                        style={{marginRight:'1em'}}>
                                    <Icon type="plus"/>添加
                                </Button>
                            } />
                        </Col>
                    </Row>
                </Form>
            </Spin>
        );
    }
}
