import React, { Component } from 'react'
import { Row, Col, Form, Input, DatePicker, Spin } from 'antd'
import { cloneDeep, isEqual } from 'lodash'
import { AntIcon } from 'components'
import moment from 'moment'
import { CITY } from 'util/global'

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

export default class base extends Component {
    state = {
        loading: true,
    }

    form = React.createRef()

    shouldComponentUpdate(props, state) {
        return !isEqual(this.state, state)
    }

    componentDidMount() {
        this.fillData({
            record: this.props.record,
        })
    }

    call() {
        if (this.props.onRef) {
            this.props.onRef(this)
        }
    }

    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData(params) {
        this.record = cloneDeep(params.record)
        //#region 从后端转换成前段所需格式
        if (this.record) {
            const { patrolDate } = this.record.patrolInfo
            this.record.patrolInfo.patrolDate = patrolDate ? moment(patrolDate) : patrolDate
        }
        //#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 从前段转换后端所需格式
            if (postData.patrolInfo.patrolDate) {
                postData.patrolInfo.patrolDate = postData.patrolInfo.patrolDate.format('YYYY-MM-DD')
            }
            //#endregion
            return postData
        }
    }

    render() {
        const { loading } = this.state
        return (
            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
                <Form {...layout} ref={this.form}>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name={['patrolInfo', 'patrolDate']}
                                label="巡查日期"
                                rules={[{ required: true, message: '请选择巡查日期' }]}
                            >
                                <DatePicker
                                    onChange={date => {
                                        /*$root.transfer.completedYear = date.format('YYYY') */
                                    }}
                                    className="w-100-p"
                                    placeholder="请选择巡查日期"
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="巡查人/单位"
                                name={['patrolInfo', 'patrolUser']}
                                rules={[{ required: true, message: '请输入巡查人/单位' }]}
                            >
                                <Input autoComplete="off" placeholder="请输入巡查人/单位" />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Spin>
        )
    }
}
