import React, { Component } from 'react'
import { Form, Spin } from 'antd'
import { AntIcon } from 'components'
import { api } from 'common/api'

const initialValues = {}

export default class form extends Component {
    state = {
        // 加载状态
        loading: true,
    }

    // 表单实例
    form = React.createRef()

    // 初始化数据
    record = {}

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }

    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData(params) {
        const state = { loading: false }
        //#region 从后端转换成前段所需格式,也可以在此处调用获取详细数据接口
        if (params.id) {
            this.record = (await api).data
        }
        //#endregion
        this.form.current.setFieldsValue(this.record)

        this.setState(state)
    }

    /**
     * 获取数据
     * 可以对postData进行数据结构调整
     * [异步,必要]
     * @returns
     */
    async getData() {
        const form = this.form.current

        const valid = await form.validateFields()
        if (valid) {
            const postData = form.getFieldsValue()
            if (this.record) {
                postData.id = this.record.id
            }
            //#region 从前段转换后端所需格式
            //#endregion
            return postData
        }
    }

    //#region 自定义方法
    //#endregion

    render() {
        return (
            <Form initialValues={initialValues} ref={this.form} className="yo-form">
                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                    <div className="yo-form-group"></div>
                </Spin>
            </Form>
        )
    }
}