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

const parts = [
    {
        title: '建筑物基本信息',
        component: () => import('./building'),
    },
    {
        title: '权属情况',
        component: () => import('./ownership'),
    },
    // {
    //     title: '调查情况',
    //     component: () => import('./investigation'),
    // },
    // {
    //     title: '鉴定治理',
    //     component: () => import('./identification'),
    // },
    {
        title: '图纸资料存档处',
        component: () => import('./drawing'),
    },
    {
        title: '相关附件资料',
        component: () => import('./attachments'),
    },
    {
        title: '建筑概貌',
        component: () => import('./aspect'),
    },
    {
        title: '调查单位',
        component: () => import('./unit'),
    },
]

export default class index extends Component {
    container = window

    children = []

    formData = {}

    shouldComponentUpdate(props) {
        return this.props.loading !== props.loading
    }

    // 通知上层组件已加载完毕
    call(child, index) {
        this.children[index] = child
        if (this.children.filter(p => p).length === parts.length) {
            if (this.props.onRef) {
                this.props.onRef(this)
            }
        }
    }

    setContainer = container => {
        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
    }

    async getData() {
        for (const child of this.children) {
            const data = await child.getData()
            merge(this.formData, data)
        }

        return this.formData
    }

    render() {
        const { id, loading } = this.props

        return (
            <Container mode="fluid" ref={this.setContainer}>
                <Row gutter={16} type="flex">
                    <Col flex="1">
                        <br />
                        <div className="yo-adorn--house-top" />
                        <Card className="yo-form-page--body">
                            {parts.map((part, i) => (
                                <React.Fragment key={i}>
                                    <section id={`form-${i}-${id}`}>
                                        {part.title && <h5>{part.title}</h5>}
                                        <Spin
                                            spinning={loading}
                                            indicator={<AntIcon type="loading" />}
                                            wrapperClassName={loading && 'h-400-min'}
                                        >
                                            {!loading && (
                                                <ComponentDynamic
                                                    is={part.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>
        )
    }
}
