import React from 'react'
import { Button, Row, Col, message } from 'antd';
import ZdyTable from '../Table'
import UUID from 'react-native-uuid';

import { Card, WingBlank } from 'antd-mobile';


export default class ChildForm extends React.Component {

    constructor(props) {
        super(props)
        const value = props.value || {};

        this.state = value

    }
    triggerChange = (changedValue) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(Object.assign({}, this.state, changedValue));
        }
    }
    componentWillReceiveProps(nextProps) {
        // Should be a controlled component.
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState(value);
        }
    }
    componentDidMount = () => {
        if (Object.keys(this.state).length == 0 && this.props.isEdit) {
            if (this.props.num != null && this.props.num > 0) {
                const objs = this.state
                if (this.props.min != null && this.props.min > this.props.num) {
                    for (var i = 0; i < this.props.min; i++) {
                        objs["id_" + UUID.v4().replace(/-/g, "2")] = {}
                    }
                } else {
                    for (var i = 0; i < this.props.num; i++) {
                        objs["id_" + UUID.v4().replace(/-/g, "2")] = {}
                    }
                }

                if (!('value' in this.props)) {
                    this.setState({ ...objs });
                }
                this.triggerChange({ ...objs });


            }
        }
    }
    delete = (uuid) => {
        const objs = this.state

        if (this.props.min != null && Object.keys(objs).length - 1 < this.props.min) {
            message.error("不能小于最小限制")

            return
        }

        delete objs[uuid]
        if (!('value' in this.props)) {
            this.setState({ ...objs });
        }
        this.triggerChange({ ...objs });



    }
    add = () => {
        const objs = this.state
        console.log(objs)
        if (this.props.max != null && Object.keys(objs).length + 1 > this.props.max) {
            message.error("不能大于最大限制")

            return
        }
        objs["id_" + UUID.v4().replace(/-/g, "2")] = {}

        if (!('value' in this.props)) {
            this.setState({ ...objs });
        }
        this.triggerChange({ ...objs });



    }




    render() {
        const objs = this.state;

        const { form, mapData, sqlData, defaultValues, datas, base52, isEdit, addName, deleteName, obj, isMobile, json } = this.props
        const span = json.span || 24
        const gutter = json.gutter != null ? json.gutter : 0
        const rights = this.props.rights
        if (datas == null) {
            return (<div>还没有配置子表单key</div>)
        }

        if (isMobile) {

            return (
                <WingBlank size="lg">
                    {Object.keys(objs).length > 1 || rights.includes("add") ? <Card style={{ marginLeft: '-27px' }}>
                        {rights.includes("add") ?
                            !isEdit ? '' : (<Card.Header title={<span style={{ fontSize: 14, color: '#333333', fontWeight: 'bold' }}></span>}
                                extra={rights.includes("add") ? <Button style={{ margin: "auto" }} onClick={this.add}>{addName || "新增"}</Button> : ""}
                            />) : ""
                        }
                        <Card.Body style={{ minHeight: 10 }}>
                            {Object.keys(objs).map((r) => {
                                if (r == "") {
                                    return ""
                                }
                                return <Row key={r} gutter={gutter} ><Col style={{ textAlign: 'right' }} span={isEdit ? 23 : span} >
                                    <ZdyTable key={r} formConfig={datas} get='mobile' fatherCode={base52} isEdit={isEdit} index={r} obj={objs[r]} fatherObj={this.props.fatherObj} init={objs} isChild={true} form={form} mapData={mapData} sqlData={sqlData} {...datas} defaultValues={defaultValues} />
                                    {rights.includes("delete") && isEdit ? <Button type='danger' onClick={this.delete.bind(this, r)}>{deleteName || "删除"} </Button> : ''}
                                </Col>
                                </Row>
                            })}
                        </Card.Body>
                    </Card> : ""}
                </WingBlank>
            )
        }

        return (
            <div style={{ width: "100%" }}>
                <Row gutter={gutter}>
                    {Object.keys(objs).map((r) => {
                        if (r == "") {
                            return ""
                        }

                        return <Col
                            span={span}
                        >

                            <ZdyTable
                                formConfig={datas}
                                key={r}
                                fatherCode={base52}
                                isEdit={isEdit}
                                index={r}
                                obj={objs[r]}
                                fatherObj={this.props.fatherObj}
                                init={objs} isChild={true}
                                get="web"
                                form={form}
                                mapData={mapData}
                                sqlData={sqlData}
                                {...datas}
                                defaultValues={defaultValues} />

                            {rights.includes("delete") && isEdit ? <Button size="small"
                                style={{
                                    position: "absolute",
                                    left: ' 95%',
                                    top: '10px',
                                    transform: 'translateY(-50%)',
                                    borderRadius: '50%',
                                    height: '13px',
                                    width: '13px',
                                    padding: 0,
                                    lineHeight: '10px'
                                }}
                                type='danger'
                                onClick={this.delete.bind(this, r)}>{deleteName || "-"}
                            </Button> : ""}

                        </Col>

                    })}
                </Row>
                {rights.includes("add") && isEdit ? <Row><Col span={24} style={{ textAlign: "center" }}><Button style={{ margin: "auto" }} type='primary' onClick={this.add} size="small">{addName || "新增"}</Button></Col> </Row> : ""}
            </div>

        );
    }
}