'use strict';
import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Form, Button, Toast } from '@douyinfe/semi-ui';
import { login, LOGIN_SUCCESS } from '../actions/auth';
import { IconLock, IconUser } from '@douyinfe/semi-icons';
import '../style.less'

const Login = props => {
    const { dispatch, user, error, actions, apiRoot, isRequesting } = props
    const form = useRef();

    useEffect(() => {
        if (error) {
            Toast.error(error);
            form.current.setValue('password', '')
        }
    }, [error])

    useEffect(() => {
        if (user && user.authorized) {
            dispatch(push('/businessManagement/pmReport/reserveItemsReporting'));
            localStorage.setItem('poms_open_sider', JSON.stringify(["pmReport"]))
            localStorage.setItem('poms_selected_sider', JSON.stringify(["businessManagement"]))
        }
    }, [user])

    return (
        <div style={{
            width: '100%',
            height: '100%',
            background: "linear-gradient(#eff4fe, #f6f9fe)",
        }}>
            <div style={{
                width: '57.64%',
                height: '100%'
            }}>
                <div className='zoomImage'>
                    {/* <img src="/assets/images/background/loginText.png" style={{ width: 587, height: 81, margin: "143px 0 0 69px" }} /> */}
                </div>
            </div>
            <div style={{
                width: '42.36%',
                height: '100%',
                padding: '45px 60px',
                background: 'rgb(255 255 255 / 50%)',
                backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
                position: 'absolute',
                top: 0,
                right: 0,
                zIndex: "6",
                textAlign: 'center',
                display: 'flex',
                justifyContent: 'center',
                background: '#FFFFFF'
            }}>
                <div style={{
                    width: 388,
                    marginTop: "18.33%"
                }}>
                    <div style={{ fontSize: 31, color: '#000000', marginBottom: 90 }}>
                    数据报表中心
                    </div>
                    <Form
                        onSubmit={values => {
                            dispatch(login(values.username, values.password)).then(res => {
                                const data = res.payload.user
                                localStorage.setItem('word', JSON.stringify(values.password))
                                dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token, dcUserId: data.dcUserInfo && dcUserInfo.id }))
                            })
                        }}
                        getFormApi={formApi => form.current = formApi}
                    >
                        <Form.Input
                            className='inputbgc'
                            field='username'
                            noLabel={true}
                            label='用户名'
                            placeholder='请输入账号'
                            prefix={<IconUser style={{ color: '#717171', marginRight: 14, marginLeft: 8 }} />}
                            style={{ background: '#FFFFFF', height: 46, marginBottom: 33, border: '1px solid rgb(185 211 239)', borderRadius: '4px' }}
                        />
                        <Form.Input
                            field='password'
                            noLabel={true}
                            mode="password"
                            autoComplete=""
                            placeholder='请输入密码'
                            label='密码'
                            prefix={<IconLock style={{ color: '#717171', marginRight: 14, marginLeft: 8 }} />}
                            style={{ background: '#FFFFFF', height: 46, border: '1px solid rgb(185 211 239)', borderRadius: '4px' }}
                        />
                        <img src="/assets/images/background/xiangqi.png" style={{ width: 112, height: 14, margin: "4px 0 0 278px" }} />
                        <Button htmlType='submit' block theme="solid" loading={isRequesting} style={{ marginTop: 56, height: 46, backgroundColor: '#0F7EFB', borderRadius: '27px' }}>立即登录</Button>

                    </Form>

                </div>

            </div>
        </div >
    );
}

function mapStateToProps(state) {
    const { auth, global } = state;
    return {
        user: auth.user,
        error: auth.error,
        actions: global.actions,
        apiRoot: global.apiRoot,
        isRequesting: auth.isRequesting
    }
}

export default connect(mapStateToProps)(Login);