import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Anchor, Card, Col, Divider, Row, Spin } from 'antd'
import { AntIcon, ComponentDynamic, Container } from 'components'
import { isEqual, merge } from 'lodash'

const parts = [
    {
        // title: '标题',
        component: () => import('./part'),
    },
]

export default class index extends Component {
    // 子表单实例集合
    children = []

    // 整合提交数据
    formData = {}

    // 锚点挂载DOM
    container = window

    /**
     * 阻止外部组件引发的渲染,提升性能
     * 可自行添加渲染条件
     * [必要]
     * @param {*} props
     * @param {*} state
     * @returns
     */
    shouldComponentUpdate(props, state) {
        return !isEqual(this.state, state) || this.props.loading !== props.loading
    }

    /**
     * 加载完成,通知父级组件并传递自身
     */
    call(child, index) {
        this.children[index] = child
        if (this.children.filter(p => p).length === parts.length) {
            const { onRef } = this.props
            if (onRef) onRef(this)
        }
    }

    /**
     * 从下级组件获取表单数据,并传递给更上级组件
     * [异步,必要]
     * @returns
     */
    async getData() {
        for (const child of this.children) {
            const data = await child.getData()
            merge(this.formData, data)
        }
        return this.formData
    }

    /**
     * 设置锚点容器
     * [非必要]
     * @param {*} container
     */
    setContainer = container => {
        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
    }

    /**
     * 渲染
     * 当前渲染结构已完善,非必要可以不用修改
     * [必要]
     * @returns
     */
    render() {
        const { id, loading } = this.props

        return (
            <Container mode="fluid" ref={this.setContainer}>
                <Row gutter={16}>
                    <Col flex="1">
                        <br />
                        <div className="yo-adorn--house-top" />
                        <Card className="yo-form-page--body">
                            {parts.map((item, i) => (
                                <React.Fragment key={i}>
                                    <section id={`form-${i}-${id}`}>
                                        {item.title && <h5>{item.title}</h5>}
                                        <Spin
                                            spinning={loading}
                                            indicator={<AntIcon type="loading" />}
                                            wrapperClassName={loading && 'h-400-min'}
                                        >
                                            {!loading && (
                                                <ComponentDynamic
                                                    is={item.component}
                                                    {...this.props}
                                                    onRef={child => this.call(child, i)}
                                                />
                                            )}
                                        </Spin>
                                    </section>
                                    {i < parts.length - 1 && <Divider />}
                                </React.Fragment>
                            ))}
                        </Card>
                    </Col>
                    {/* 锚点,如果不需要可以删除以下节点 */}
                    <Col flex="240px">
                        <Anchor
                            getContainer={() => this.container}
                            offsetTop={24}
                            targetOffset={100}
                            wrapperStyle={{ backgroundColor: 'transparent' }}
                            onClick={e => e.preventDefault()}
                        >
                            {parts.map((part, i) => (
                                <Anchor.Link key={i} href={`#form-${i}-${id}`} title={part.title} />
                            ))}
                        </Anchor>
                    </Col>
                </Row>
            </Container>
        )
    }
}