import React, { Component } from 'react'
import { Form, Input, Radio, InputNumber, TreeSelect, Spin } from 'antd'
import { AntIcon } from 'components'
import { cloneDeep } from 'lodash'
import getDictData from 'util/dic'
import { EMPTY_ID } from 'util/global'
import { api } from 'common/api'

const initialValues = {
    type: 1,
    sort: 100
}
export default class form extends Component {

    state = {
        // 加载状态
        loading: true,
        options: {
            dicTreeData: []
        }
    }

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

    // 初始化数据
    record = {}

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

    /**
         * 填充数据
         * 可以在设置this.record之后对其作出数据结构调整
         * [异步,必要]
         * @param {*} params 
         */
    async fillData(params) {
        this.record = cloneDeep(params.record)
        const treeData = await this.loadDicTreeData()
        this.setState({
            options: {
                dicTreeData: treeData
            }
        })

        this.record = {
            pid: params.pid,
            ...this.record
        }

        if (this.record.code) {
            this.record.type = 2;
            this.setState({
                type: 2
            })
        }

        this.form.current.setFieldsValue(this.record)

        this.setState({
            loading: false
        })
    }

    /**
     * 获取数据
     * 可以对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 自定义方法
    async loadDicTreeData() {
        const { data } = await api.sysDictTypeTree()
        return [{
            id: EMPTY_ID,
            parentId: undefined,
            title: '顶级',
            value: EMPTY_ID,
            pid: undefined,
            children: data,
        }]
    }

    //#endregion

    render() {
        return (
            <Form
                initialValues={initialValues}
                ref={this.form}
                className="yo-form"
                onValuesChange={(changeValues) => {
                    if (changeValues.hasOwnProperty('type')) {
                        this.setState({
                            type: changeValues.type
                        })
                    }
                }}
            >
                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                    <div className="yo-form-group">
                        {/* 表单控件 */}
                        <Form.Item label="类型名称" name="name" rules={[{ required: true, message: '请输入类型名称' }]}>
                            <Input autoComplete="off" placeholder="请输入类型名称" />
                        </Form.Item>
                        <Form.Item label="类型" name="type" rules={[{ required: true, message: '请选择需要添加的数据类型' }]}>
                            <Radio.Group>
                                <Radio.Button value={1}>
                                    目录
                                </Radio.Button>
                                <Radio.Button value={2}>
                                    字典类型
                                </Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="父结点" name="pid" rules={[{ required: true, message: '请选择父结点' }]}>
                            <TreeSelect
                                treeData={this.state.options.dicTreeData}
                                dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
                                treeDefaultExpandAll
                                placeholder="请选择父结点"
                            />
                        </Form.Item>
                        {this.state.type == 2 &&
                            <>
                                <Form.Item label="唯一编码" name="code" rules={[{ required: true, message: '请输入唯一编码' }]}>
                                    <Input autoComplete="off" placeholder="请输入唯一编码" />
                                </Form.Item>
                            </>
                        }
                        <Form.Item label="排序" name="sort">
                            <InputNumber
                                min={0}
                                placeholder="请输入排序"
                                className="w-100-p"
                            />
                        </Form.Item>
                        <Form.Item label="备注" name="remark">
                            <Input.TextArea placeholder="请输入备注" />
                        </Form.Item>
                        {/* ... */}
                    </div>
                </Spin>
            </Form>
        )
    }
}