import React, { Component } from 'react'
import { Button, Col, Form, Input, Row, Select, Spin } from 'antd'
import { AntIcon } from 'components'
import { api } from 'common/api'
import getDictData from 'util/dic'

const initialValues = {}

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

        codes: {
            houseCompanyType: [],
        },
    }

    // 表单实例
    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 从后端转换成前段所需格式,也可以在此处调用获取详细数据接口
        state.codes = await getDictData('house_company_type')
        if (params.id) {
            this.record = (await api.houseCompanyDetail({ id: params.id })).data
            const { type, info } = this.record
            if (type) {
                this.record.type = type.split(',')
            }
        }
        //#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 从前段转换后端所需格式
            const { type, info } = postData
            if (Array.isArray(type)) {
                postData.type = type.join(',')
            }
            //#endregion
            return postData
        }
    }

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

    render() {
        const { codes } = this.state

        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="name"
                            rules={[{ required: true, message: '请输入名称' }]}
                        >
                            <Input autoComplete="off" placeholder="请输入名称" />
                        </Form.Item>
                        <Form.Item
                            label="类型"
                            name="type"
                            rules={[{ required: true, message: '请选择类型' }]}
                        >
                            <Select mode="multiple" placeholder="请选择类型">
                                {codes.houseCompanyType.map(item => (
                                    <Select.Option key={item.code} value={item.code}>
                                        {item.value}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <div className="yo-form--fluid">
                            <Form.List name="info">
                                {(fields, { add, remove }) => (
                                    <>
                                        {fields.map(({ key, name, fieldKey, ...restField }) => (
                                            <Row key={key} align="middle">
                                                <Col flex="30px" className="text-right">
                                                    <AntIcon
                                                        type="minus-circle"
                                                        onClick={() => remove(name)}
                                                    />
                                                </Col>
                                                <Col flex="187px">
                                                    <Form.Item
                                                        {...restField}
                                                        name={[name, 'name']}
                                                        fieldKey={[fieldKey, 'name']}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请输入信息名称',
                                                            },
                                                        ]}
                                                    >
                                                        <Input
                                                            autoComplete="off"
                                                            placeholder="请输入信息名称"
                                                            style={{ minWidth: 0 }}
                                                        />
                                                    </Form.Item>
                                                </Col>
                                                <Col flex="1">
                                                    <Form.Item
                                                        {...restField}
                                                        name={[name, 'value']}
                                                        fieldKey={[fieldKey, 'value']}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请输入信息内容',
                                                            },
                                                        ]}
                                                    >
                                                        <Input
                                                            autoComplete="off"
                                                            placeholder="请输入信息内容"
                                                        />
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                        ))}
                                        <Form.Item>
                                            <Button
                                                type="dashed"
                                                onClick={() => add()}
                                                block
                                                icon={<AntIcon type="plus" />}
                                            >
                                                添加单位信息
                                            </Button>
                                        </Form.Item>
                                    </>
                                )}
                            </Form.List>
                        </div>
                    </div>
                </Spin>
            </Form>
        )
    }
}
