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

const initialValues = {
    houseInfo: {
        straightHouseCount: 0,
        selfHouseCount: 0,
        privateHouseCount: 0,
        businessCount: 0,
        changeHouseCount: 0,
        resettlementHouseCount: 0,
        otherCount: 0,
        houseCount: 0,
    },
}

const layout = {
    labelCol: { flex: '150px' },
    wrapperCol: { flex: '1' },
}

export default class ownership extends Component {
    state = {
        loading: true,
        codes: {
            housePropertyRights: [],
        },
        options: {},
    }

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

    // 初始化数据
    record = {}

    /**
     * 阻止外部组件引发的渲染,提升性能
     * 可自行添加渲染条件
     * [必要]
     * @param {*} props
     * @param {*} state
     * @returns
     */
    shouldComponentUpdate(props, state) {
        return !isEqual(this.state, state)
    }

    /**
     * DOM加载完成钩子,绑定数据
     */
    componentDidMount() {
        this.fillData({
            record: this.props.record,
        })
    }

    /**
     * 加载完成,通知父级组件并传递自身
     */
    call() {
        const { onRef } = this.props
        if (onRef) onRef(this)
    }

    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData(params) {
        this.record = cloneDeep(params.record)
        //#region 从后端转换成前段所需格式
        const codes = await getDictData('house_property_rights')
        this.setState({ codes })
        //#endregion
        this.form.current && this.form.current.setFieldsValue(this.record)

        this.setState({ loading: false })
        this.call()
    }

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

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

    //#region 自定义方法
    /**
     * 表单change事件处理,包括了所有字段的change
     * [异步,非必要]
     * @param {*} changedValues
     * @param {*} allValues
     */
    async onValuesChange(changedValues, allValues) {
        const form = this.form.current
        const { houseInfo } = changedValues

        if (
            houseInfo.hasOwnProperty('straightHouseCount') ||
            houseInfo.hasOwnProperty('selfHouseCount') ||
            houseInfo.hasOwnProperty('otherCount') ||
            houseInfo.hasOwnProperty('businessCount') ||
            houseInfo.hasOwnProperty('changeHouseCount') ||
            houseInfo.hasOwnProperty('resettlementHouseCount') ||
            houseInfo.hasOwnProperty('privateHouseCount')
        ) {
            const {
                houseInfo: {
                    straightHouseCount,
                    selfHouseCount,
                    otherCount,
                    businessCount,
                    changeHouseCount,
                    resettlementHouseCount,
                    privateHouseCount,
                },
            } = allValues
            form.setFieldsValue({
                houseInfo: {
                    houseCount:
                        +straightHouseCount +
                        +selfHouseCount +
                        +otherCount +
                        +businessCount +
                        +changeHouseCount +
                        +resettlementHouseCount +
                        +privateHouseCount,
                },
            })
        }
    }
    //#endregion

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

        return (
            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
                <Form
                    initialValues={initialValues}
                    ref={this.form}
                    {...layout}
                    onValuesChange={(changedValues, allValues) =>
                        this.onValuesChange(changedValues, allValues)
                    }
                >
                    <Form.Item
                        label="产权性质"
                        name={['houseInfo', 'propertyRights']}
                        rules={[{ required: true, message: '请选择产权性质' }]}
                    >
                        <Radio.Group buttonStyle="solid">
                            {codes.housePropertyRights.map(item => (
                                <Radio.Button key={item.code} value={item.code}>
                                    {item.value}
                                </Radio.Button>
                            ))}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="房屋包含的住宅总套数" className="mb-none">
                        <Row>
                            <Col>
                                <Form.Item colon={false} label="直管公房" required>
                                    <Form.Item
                                        name={['houseInfo', 'straightHouseCount']}
                                        rules={[{ required: true, message: '请输入直管公房' }]}
                                        noStyle
                                    >
                                        <InputNumber min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套；</div>
                                </Form.Item>
                            </Col>
                            <Col>
                                <Form.Item colon={false} label="单位自管公房" required>
                                    <Form.Item
                                        name={['houseInfo', 'selfHouseCount']}
                                        rules={[{ required: true, message: '请输入单位自管公房' }]}
                                        noStyle
                                    >
                                        <InputNumber min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套；</div>
                                </Form.Item>
                            </Col>
                            <Col>
                                <Form.Item colon={false} label="其他">
                                    <Form.Item name={['houseInfo', 'otherCount']} noStyle>
                                        <InputNumber min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套；</div>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <Form.Item colon={false} label="商品房" required>
                                    <Form.Item
                                        name={['houseInfo', 'businessCount']}
                                        rules={[{ required: true, message: '请输入商品房' }]}
                                        noStyle
                                    >
                                        <InputNumber min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套；</div>
                                </Form.Item>
                            </Col>
                            <Col>
                                <Form.Item colon={false} label="房改房" required>
                                    <Form.Item
                                        name={['houseInfo', 'changeHouseCount']}
                                        rules={[{ required: true, message: '请输入房改房' }]}
                                        noStyle
                                    >
                                        <InputNumber min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套；</div>
                                </Form.Item>
                            </Col>
                            <Col>
                                <Form.Item colon={false} label="拆迁安置房" required>
                                    <Form.Item
                                        name={['houseInfo', 'resettlementHouseCount']}
                                        rules={[{ required: true, message: '请输入拆迁安置房' }]}
                                        noStyle
                                    >
                                        <InputNumber min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套；</div>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <Form.Item colon={false} label="私房">
                                    <Form.Item name={['houseInfo', 'privateHouseCount']} noStyle>
                                        <InputNumber min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套；</div>
                                </Form.Item>
                            </Col>
                            <Col>
                                <Form.Item colon={false} label="总共">
                                    <Form.Item name={['houseInfo', 'houseCount']} noStyle>
                                        <InputNumber disabled min={0} step={1} placeholder="几" />
                                    </Form.Item>
                                    <div className="ant-form-text">套</div>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form.Item>
                    <Form.Item label="产权单位" name={['houseInfo', 'propertyUnit']}>
                        <Input autoComplete="off" placeholder="请输入产权单位" />
                    </Form.Item>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="负责人" name={['houseInfo', 'propertyUnitUser']}>
                                <Input autoComplete="off" placeholder="请输入负责人" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="负责人电话"
                                name={['houseInfo', 'propertyUnitUserTel']}
                            >
                                <Input autoComplete="off" placeholder="请输入负责人电话" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="联系人" name={['houseInfo', 'propertyUnitConent']}>
                                <Input autoComplete="off" placeholder="请输入联系人" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="联系人电话"
                                name={['houseInfo', 'propertyUnitConentTel']}
                            >
                                <Input autoComplete="off" placeholder="请输入联系人电话" />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Spin>
        )
    }
}
