import * as React from 'react';
import { observer } from 'mobx-react';
import { Form, Input, Checkbox, Button,Row,Col } from 'antd';
import Copyright from './components/Copyright';
import backgroundSrc from '@/assets/login/background.jpg';
import { regex } from '@/utils';
import store from './store';
import './style.less';

const FormItem = Form.Item;

const Login: React.FC = () => {
    const {
        state,
        onClickLogin,
        onCaptchaImage,
        init,
        reset
    } = store;
    const {
        buttonLoading,
        captchaData
    } = state;
    const [form] = Form.useForm();

    React.useEffect(() => {
        init(form);
        return () => reset();
    }, []);

    // 校验密码
    const validatorPassword = (rule: any, value: string) => {
        if (value) {
            const passwordRegex = new RegExp(regex.password);
            if (passwordRegex.test(value)) {
                return Promise.resolve();
            } else {
                return Promise.reject('密码格式不正确');
            }
        } else {
            return Promise.reject('密码不能为空');
        }
    };

    return (
        <div className='login'>
            <div className='login-left'>
                <img src={backgroundSrc} />
            </div>
            <div className='login-right'>
                <div className='login-right-content'>
                    <div className='login-right-content-title'>
                        <span className='login-right-content-title-text'>
                            平台登录
                        </span>
                    </div>
                    <Form form={form}>
                        <FormItem
                            name='account'
                            rules={[{ required: true, message: '账号不能为空', whitespace: true }]}
                        >
                            <Input size='large' placeholder='请输入账号' />
                        </FormItem>
                        <FormItem
                            name='password'
                            rules={[{ required: true, validator: validatorPassword }]}
                        >
                            <Input.Password size='large' placeholder='请输入密码' />
                        </FormItem>
                        <FormItem
                            name='code'
                            rules={[{ required: true, message: '验证码' }]}
                        > 
                              <Row gutter={8} >
                                    {/* 输入框占大部分宽度 */}
                                    <Col span={17}>
                                        <Input size='large' placeholder='请输入验证码' />
                                    </Col>
                                    {/* 验证码图片固定宽度 */}
                                    <Col span={7}>
                                        <div>
                                            <img 
                                                src={`data:image/png;base64,${captchaData.img}`} 
                                                alt="验证码"
                                                style={{ 
                                                    width: '100%', 
                                                    height: '38px', 
                                                    borderRadius: '2px',
                                                    cursor: 'pointer'  // 提示可点击刷新
                                                }}
                                                onClick={() => { onCaptchaImage()}}
                                            />
                                        </div>
                                    </Col>
                                </Row>
                        </FormItem>
                        <FormItem
                            name='remember'
                            valuePropName='checked'
                        >
                            <Checkbox>
                                记住密码
                            </Checkbox>
                        </FormItem>
                        <FormItem>
                            <Button
                                type='primary'
                                size='large'
                                block={true}
                                loading={buttonLoading}
                                onClick={() => {
                                    form.validateFields().then(async (values) => {
                                        const data = {
                                            userName: values.account,
                                            password: values.password,
                                            code: values.code,
                                            uuid: captchaData.uuid
                                        }
                                        await onClickLogin(data, values.remember);
                                    }).catch((error) => {
                                        console.error(error);
                                    });
                                }}
                            >
                                登录
                            </Button>
                        </FormItem>
                    </Form>
                </div>
                <Copyright />
            </div>
        </div>
    );
};

export default observer(Login);