import { Button, Card, Form, Input, Space } from 'antd-mobile';
import { LockOutline, PhonebookOutline } from 'antd-mobile-icons';
import { Image } from "antd"
import React from 'react';
import './index.less';
import { useLogin } from './useLogin';
export type LoginProps = {
  version?: 'V4' | 'V3';
  loginTitle?: string;
  modules?: string;
  loginLogo?: JSX.Element;
};

const Login: React.FC<LoginProps> = (props) => {
  const { onFinish } = useLogin();
  return (
    <div className={'login-root'}>
      <div className={'back'}>
        <div className={'welcome'}>
          <div style={{ display: 'inline-block' }}>{props.loginLogo}</div>
          <div className="company-title">{props.loginTitle}</div>
        </div>
        <div className="back-foot"></div>
      </div>
      <div className="login-foot">
        <div className="login-card">
          <Card>
            <div className="group">
              <Form
                layout="horizontal"
                onFinish={onFinish}
                footer={
                  <Button
                    shape="rounded"
                    block
                    type="submit"
                    color="primary"
                    size="large"
                  >
                    登录
                  </Button>
                }
              >
                <Space direction="vertical">
                  <Space align="center">
                    <PhonebookOutline fontSize={24} color={'white'} />
                    <Form.Item name="username">
                      <Input
                        style={{
                          width: '70vw',
                          '--placeholder-color': 'white',
                        }}
                        placeholder="请输入账号"
                        type="text"
                      ></Input>
                    </Form.Item>
                  </Space>
                  <Space align="center">
                    <LockOutline fontSize={24} color={'white'} />
                    <Form.Item name="password">
                      <Input
                        style={{
                          width: '70vw',
                          '--placeholder-color': 'white',
                        }}
                        placeholder="请输入密码"
                        type="password"
                      ></Input>
                    </Form.Item>
                  </Space>
                </Space>
              </Form>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};
Login.defaultProps = {
  version: 'V4',
  loginTitle: '登录页面',
  modules: '手机服务',
  loginLogo: (
    <Image
      src={require('../../assets/img/aofeng/logo.png')}
      width={80}
      alt=""
    />
  ),
};
export default React.memo(Login);