import React, { Component } from 'react'
import { Button, Form, Input, message as Message } from 'antd'
import Container from 'components/container'
import { encryptByRSA } from 'util/rsa'
import { RSA_PUBLIC_KEY } from 'util/global'
import { api } from 'common/api'
import { token } from 'common/token'

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

        focusUser: false,
        focusPassword: false,

        btnDisabled: true,
    }

    backgroundImage = require(`assets/image/login-bg-0${Math.floor(Math.random() * 4)}.jpg`)

    focus = {
        user: false,
        password: false,
    }

    form = React.createRef()

    onLogin = values => {
        this.setState({ loading: true })

        let { account, password } = values
        password = encryptByRSA(password, RSA_PUBLIC_KEY)
        api.login({ account, password })
            .then(({ success, data, message }) => {
                if (success) {
                    token.value = data
                    Message.success('登录成功')
                    this.props.history.replace('/')
                } else {
                    this.setState({ loading: false })
                    Message.error(message)
                }
            })
            .catch(({ message }) => {
                if (typeof message === 'object' && message[0]) {
                    Message.error(message[0].messages[0])
                }
                this.setState({ loading: false })
            })
    }

    render() {
        const { loading, focusUser, focusPassword, btnDisabled } = this.state

        return (
            <div className="yo-login">
                <img src={this.backgroundImage.default} alt="" />
                <div className="yo-login--placeholder">
                    <Container mode="sm">
                        <Form
                            ref={this.form}
                            layout="vertical"
                            onFinish={this.onLogin}
                            onValuesChange={(changedValues, values) => {
                                this.setState({
                                    btnDisabled: !values.account || !values.password,
                                })
                            }}
                        >
                            <Form.Item
                                name="account"
                                className={!focusUser && 'yo-login--label'}
                                colon={false}
                                label="用户名"
                            >
                                <Input
                                    onBlur={() => {
                                        this.setState({
                                            focusUser: !!this.form.current.getFieldValue('account'),
                                        })
                                    }}
                                    onFocus={() => {
                                        this.setState({ focusUser: true })
                                    }}
                                    size="large"
                                    autoComplete="off"
                                />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                className={!focusPassword && 'yo-login--label'}
                                colon={false}
                                label="密码"
                            >
                                <Input.Password
                                    onBlur={() => {
                                        this.setState({
                                            focusPassword:
                                                !!this.form.current.getFieldValue('password'),
                                        })
                                    }}
                                    onFocus={() => {
                                        this.setState({ focusPassword: true })
                                    }}
                                    size="large"
                                    autoComplete="off"
                                />
                            </Form.Item>
                            <Form.Item className="mt-lg">
                                <Button
                                    disabled={btnDisabled}
                                    loading={loading}
                                    block
                                    htmlType="submit"
                                    size="large"
                                    type="primary"
                                >
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </Container>
                </div>
            </div>
        )
    }
}