import { createRef } from 'react'
import GlobalComponent from '@/components/GlobalComponent'
import { connect, useModel, history } from '@umijs/max'
import './Login.less'
import login from '@/assets/login/login.png'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
import { getPageQuery } from '@/utils/utils'
import { getInitialState } from '@/app'

@connect(({ login, loading }) => ({
    login,
    loading: loading.models.login
}))

class Login extends GlobalComponent {
    formRef = createRef()
    state = {
        isRemember: false
    }

    componentDidMount() {
        const { dispatch } = this.props
    }

    toggleRemember = e => {
        this.setState({
            isRemember: e.target.checked ?? false
        })
    }

    replaceGoto = () => {
        const urlParams = new URL(window.location.href)
        const params = getPageQuery()
        let { redirect } = params

        if (redirect) {
            const redirectUrlParams = new URL(redirect)

            if (redirectUrlParams.origin === urlParams.origin) {
                redirect = redirect.slice(urlParams.origin.length)
                if (redirect.match(/^\/.*#/)) {
                    redirect = redirect.slice(redirect.indexOf('#') + 1)
                }
            } else {
                history.replace('/')
                return
            }
        }

        history.replace(redirect || '/')
    }

    submitForm = () => {
        this.formRef.current.validateFields()
            .then(fieldsValue => {
                const { dispatch } = this.props
                const { message } = this
                const params = {
                    username: fieldsValue?.username,
                    password: fieldsValue?.password
                }

                dispatch({
                    type: 'login/login_user',
                    payload: params,
                    callback: async res => {
                        if (res?.success && res?.datarecord) {
                            message.success('登录成功！')
                            await localStorage.setItem('antd-token-authority', res.datarecord.token)

                            await getInitialState('refresh').then(res => {
                                this.replaceGoto()
                            })
                        }
                    }
                })
            })
            .catch(error => {})
    }

    onKeyDown = e => {
        if (e.keyCode !== 13) return

        this.submitForm()
    }

    contactAdmin = () => {
    }

    render() {
        const { Row, Col, Carousel, Input, Form, Checkbox, Button, Spin } = this
        const { Item: FormItem } = Form
        const { Password } = Input
        const { isRemember } = this.state
        const { loading } = this.props

        return (
            <Row wrap={false} className='loginBox'>
                <Col xs={0} md={0} xl={12} className='boxLeft'>
                    <img src={login} alt='login' />
                </Col>

                <Col xs={24} md={24} xl={12} className='boxRight'>
                    <Row className='loginForm'>
                        <Col xs={24} md={24} className='formHeader'></Col>

                        <Col xs={24} md={24} className='formContent'>
                            <div className='contentBox'>
                                <div className='contentHeader'>
                                    <div className='headerName'>AI文档审阅系统</div>

                                    <div className='headerSlogan'>欢迎登录</div>
                                </div>

                                <div className='contentBody'>
                                    <Spin spinning={!!loading}>
                                        <Form ref={this.formRef} colon={false} layout='vertical' requiredMark={false}>
                                            <FormItem label='用户名' name='username' className='username' rules={[{ required: true, message: '请输入用户名', min: 1 }]}>
                                                <Input />
                                            </FormItem>

                                            <FormItem label='密码' name='password' className='password' rules={[{ required: true, message: '请输入密码', min: 1 }]}>
                                                <Password
                                                    onKeyDown={this.onKeyDown}
                                                    iconRender={visible => (visible ? <EyeTwoTone style={{ fontSize: '18px' }} /> : <EyeInvisibleOutlined style={{ fontSize: '18px' }} />)}
                                                />
                                            </FormItem>
                                        </Form>

                                        <div className='isRemember'>

                                        </div>

                                        <Button type='primary' className='loginBtn' onClick={this.submitForm} loading={loading}>登录</Button>
                                    </Spin>

                                    <div className='isForget'>

                                    </div>
                                </div>
                            </div>
                        </Col>

                        {/*<Col xs={24} md={24} className='formFooter'></Col>*/}
                    </Row>
                </Col>
            </Row>
        )
    }
}

export default Login
