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

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

export default class index extends Component {
    state = {
        loading: true,
        record: null,
        saving: false,
    }

    // 子表单实例集合
    children = []

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

    // 锚点挂载DOM
    container = window

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

    /**
     * DOM加载完成钩子,可在此获取详细数据赋值到record
     */
    componentDidMount() {}

    /**
     * 提交
     * [异步,必要]
     * @returns
     */
    async onSubmit() {
        for (const child of this.children) {
            try {
                const data = await child.getData()
                this.formData = {
                    ...this.formData,
                    ...data,
                }
            } catch (e) {
                return e
            }
        }

        //#region 提交数据
        this.setState({ saving: true })
        this.setState({ saving: false })
        //#endregion
    }

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

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

        const { loading, record, saving } = this.state

        return (
            <div className="yo-form-page">
                <Container mode="fluid" ref={e => this.setContainer(e)}>
                    <Row gutter={16}>
                        <Col flex="1">
                            <br />
                            <div className="yo-adorn--house-top" />
                            <Card className="yo-form-page--body">
                                {parts.map((item, i) => (
                                    <section key={i} id={`form-${i}-${id}`}>
                                        {item.title && <h5>{parts.title}</h5>}
                                        <Spin
                                            spinning={loading}
                                            indicator={<AntIcon type="loading" />}
                                            wrapperClassName="h-400-min"
                                        >
                                            {!loading && (
                                                <ComponentDynamic
                                                    is={item.component}
                                                    record={record}
                                                    onRef={r => this.children.push(r)}
                                                />
                                            )}
                                        </Spin>
                                    </section>
                                ))}
                            </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>
                <div className="yo-form-page--bar">
                    <Container mode="fluid">
                        <div className="yo-form-page--bar-inner">
                            <span></span>
                            <span>
                                <Button onClick={() => window.closeContentWindow()}>取消</Button>
                                <Button
                                    loading={saving}
                                    type="primary"
                                    onClick={() => this.onSubmit()}
                                >
                                    保存
                                </Button>
                            </span>
                        </div>
                    </Container>
                </div>
            </div>
        )
    }
}