import React, { Component } from 'react'
import { Button, Tabs } from 'antd'
import { ComponentDynamic, Container } from 'components'
import { isEqual } from 'lodash'

const tabs = [
    {
        title: '标题',
        component: () => import('./tab'),
        show: true,
    },
]

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

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

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

    /**
     * 阻止外部组件引发的渲染,提升性能
     * 可自行添加渲染条件
     * [必要]
     * @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 === tabs.filter(p => p.show).length) {
            this.setState({ saveDisabled: false })
        }
    }

    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
    }

    render() {
        const { actived, loading, record, saveDisabled, saving } = this.state

        return (
            <div className="yo-form-page">
                <div className="yo-form-page-layout">
                    {/* 底部工具栏(需放在前面) */}
                    <div className="yo-form-page--bar yo-form-page--bar--with-tab">
                        <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 className="yo-form-page--header" style={{ paddingBottom: 0 }}></div>
                    <div className="yo-tab-external-mount">
                        <Tabs
                            activeKey={actived}
                            animated={false}
                            onChange={activeKey => {
                                this.setState({ actived: activeKey })
                            }}
                        >
                            {tabs.map(
                                (tab, i) =>
                                    tab.show && (
                                        <Tabs.TabPane
                                            key={i}
                                            forceRender={false}
                                            tab={tab.title}
                                        ></Tabs.TabPane>
                                    )
                            )}
                        </Tabs>
                        <div className="yo-tab-external-mount-content">
                            {tabs.map((tab, i) => {
                                if (tab.show) {
                                    return (
                                        <div
                                            key={i}
                                            className={[
                                                actived == i
                                                    ? 'yo-tab-external-tabpane-active'
                                                    : 'yo-tab-external-tabpane-inactive',
                                                'yo-tab-external-tabpane',
                                            ].join(' ')}
                                        >
                                            <ComponentDynamic
                                                is={tab.component}
                                                record={record}
                                                loading={loading}
                                                onRef={child => this.call(child, i)}
                                            />
                                        </div>
                                    )
                                }
                                return <></>
                            })}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}