import React, { Component } from 'react'
import { Button, Card, Col, message as Message, Modal, Row, Spin } from 'antd'
import { AntIcon, ComponentDynamic, Container } from 'components'
import { isEqual } from 'lodash'
import { api } from 'common/api'

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

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

        saving: false,
    }

    children = []

    formData = {}

    shouldComponentUpdate(props, state) {
        return !isEqual(this.state, state)
    }

    componentDidMount() {
        // 获取详细数据
        const { id } = this.props.param
        if (id) {
            api.houseCodeDetail({ id }).then(({ data }) => {
                this.setState({
                    record: data,
                    loading: false,
                })
            })
        } else {
            this.setState({ loading: 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 })
        if (!this.state.record) {
            // 新增
            try {
                const { success } = await api.houseCodeAdd(this.formData)
                if (success) {
                    Message.success('保存成功')
                    Modal.confirm({
                        content: '已添加成功，是否继续添加？',
                        onOk: () => {},
                        onCancel: () => {
                            window.closeContentWindow()
                        },
                    })
                }
            } finally {
                this.setState({ saving: false })
            }
        } else {
            // 编辑
            try {
                const { success } = await api.houseCodeEdit({
                    id: this.state.record.id,
                    ...this.formData,
                })
                if (success) {
                    Message.success('保存成功')
                }
            } finally {
                this.setState({ saving: false })
            }
        }
        //#endregion
    }

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

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

        return (
            <div className="yo-form-page">
                <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((item, i) => (
                                    <section key={i} 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}
                                                    record={record}
                                                    onRef={r => this.children.push(r)}
                                                />
                                            )}
                                        </Spin>
                                    </section>
                                ))}
                            </Card>
                        </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>
        )
    }
}
