import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Anchor, Button, 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 {
    state = {
        loading: true,
        record: null,
        saveDisabled: true,
        saving: false,
    }

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

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

    // 锚点挂载DOM
    container = window

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

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

    call(child, index) {
        this.children[index] = child
        if (this.children.filter(p => p).length === parts.filter(p => p.show).length) {
            this.setState({ saveDisabled: false })
        }
    }

    /**
     * 提交
     * [异步,必要]
     * @returns
     */
    async onSubmit() {
        for (const child of this.children) {
            try {
                const data = await child.getData()
                merge(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, saveDisabled, saving } = this.state

        return (
            <div className="yo-form-page">
                <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}
                                                        id={id}
                                                        record={record}
                                                        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>
                <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
                                    disabled={saveDisabled}
                                    loading={saving}
                                    type="primary"
                                    onClick={() => this.onSubmit()}
                                >
                                    保存
                                </Button>
                            </span>
                        </div>
                    </Container>
                </div>
            </div>
        )
    }
}