import React, { Component } from 'react'
import { Button, DatePicker, Form, Input, message as Message, Radio } from 'antd'
import { AntIcon } from 'components'
import { api } from 'common/api'
import moment from 'moment'

export default class index extends Component {
    state = {
        saving: false,
    }

    form = React.createRef()

    componentDidMount() {
        const { user } = this.props
        if (user.birthday) {
            user.birthday = moment(user.birthday)
        }
        this.form.current.setFieldsValue(user)
    }

    async onSvaeInfo() {
        this.setState({ saving: true })
        try {
            await api.sysUserUpdateInfo(this.form.current.getFieldsValue())
            await this.props.loadData()
            Message.success('更新个人信息成功')
        } finally {
            this.setState({ saving: false })
        }
    }
    onAvatarStart() {}

    render() {
        const { user } = this.props

        const { saving } = this.state

        return (
            <>
                <Form className="yo-form yo-form--no-border" ref={this.form}>
                    <div className="yo-form-group yo-form--short">
                        <Form.Item label="昵称" name="nickName">
                            <Input autoComplete="off" placeholder="请输入昵称" />
                        </Form.Item>
                        <Form.Item label="用户名">
                            <span>{user.name}</span>
                        </Form.Item>
                        <Form.Item label="生日" name="birthday">
                            <DatePicker className="w-100-p" placeholder="请选择生日" />
                        </Form.Item>
                        <Form.Item label="性别" name="sex">
                            <Radio.Group>
                                <Radio.Button value={0}>
                                    <AntIcon className="mr-xxs" type="stop" />
                                    <span>保密</span>
                                </Radio.Button>
                                <Radio.Button value={1}>
                                    <AntIcon
                                        style={{ color: '#1890ff' }}
                                        className="mr-xxs"
                                        type="man"
                                    />
                                    <span>男</span>
                                </Radio.Button>
                                <Radio.Button value={2}>
                                    <AntIcon
                                        style={{ color: '#eb2f96' }}
                                        className="mr-xxs"
                                        type="woman"
                                    />
                                    <span>女</span>
                                </Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="电话" name="tel">
                            <Input autoComplete="off" placeholder="请输入电话" />
                        </Form.Item>
                    </div>
                </Form>
                <Button loading={saving} onClick={() => this.onSvaeInfo()} block type="text">
                    更新个人信息
                </Button>
            </>
        )
    }
}
