import React, { Component } from 'react'
import { Form, Input, InputNumber, Select, Spin } from 'antd'
import { AntIcon } from 'components'
import { cloneDeep } from 'lodash'
import getDictData from 'util/dic'

const initialValues = {
    sort: 100,
}
export default class form extends Component {
    state = {
        // 加载状态
        loading: true,
        exist: false,
        codes: {
            areacodeType: [],
        },
    }
    // 表单实例
    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)
        //#region 从后端转换成前段所需格式

        const codes = await getDictData('areacode_type')
        const exist = !!params.record
        this.setState({
            codes,
            exist,
        })

        this.record = {
            ...this.record,
        }
        //#endregion

        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
        }
    }

    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">
                        {/* 表单控件 */}
                        <Form.Item
                            label="区域类型"
                            name="levelType"
                            rules={[{ required: true, message: '请选择区域类型' }]}
                        >
                            <Select
                                placeholder="请选择区域类型"
                                suffixIcon={<AntIcon type="lock" v-if={this.state.exist} />}
                            >
                                {this.state.codes.areacodeType.map(item => {
                                    return (
                                        <Select.Option key={item.code} value={+item.code}>
                                            {item.value}
                                        </Select.Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="区域名称"
                            name="name"
                            rules={[{ required: true, message: '请输入区域名称' }]}
                        >
                            <Input autoComplete="off" placeholder="请输入区域名称" />
                        </Form.Item>
                        <Form.Item
                            label="区域编码"
                            name="code"
                            tooltip="用于系统内部使用，添加后不可更改"
                        >
                            <Input
                                disabled={this.state.exist}
                                placeholder="请输入区域编码"
                                suffix={this.state.exist && <AntIcon type="lock" />}
                            ></Input>
                        </Form.Item>
                        <Form.Item
                            label="行政编码"
                            name="adCode"
                            tooltip="国家规定的区划代码，可随实际情况更改而更改"
                        >
                            <Input placeholder="请输入区域编码"></Input>
                        </Form.Item>
                        <Form.Item label="排序" name="sort">
                            <InputNumber min={0} placeholder="请输入排序" className="w-100-p" />
                        </Form.Item>
                        <Form.Item label="备注" name="note">
                            <Input.TextArea placeholder="请输入备注" />
                        </Form.Item>
                        {/* ... */}
                    </div>
                </Spin>
            </Form>
        )
    }
}
