import { useState,useEffect } from 'react';
import { ProCard } from '@ant-design/pro-components';
import { Button, Form, Input, Image,  message } from 'antd';
import { history} from 'umi';
import {BASE_URL} from '@/config'
import { userLogin,logger} from '@/apis/auth';
import dayjs from 'dayjs';
import loginAccount from '@/assets/icon/login-account.png';
import loginPassword from '@/assets/icon/login-password.png';
import loginVerificationCode from '@/assets/icon/login-verification-code.png'
import footerLogoSrc from '@/assets/image/login-footer-logo.png'; 
import siwpe1Src from '@/assets/image/swipe1.jpg';
import siwpe2Src from '@/assets/image/swipe2.jpg';
import siwpe3Src from '@/assets/image/swipe3.jpg';
import siwpe4Src from '@/assets/image/swipe4.jpg';
import './index.less';


const LoginPage = () => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [time,setTime] = useState(dayjs().valueOf());

    const swipeList = [
        {
            id: '1',
            img: siwpe1Src,
        },
        {
            id: '2',
            img: siwpe2Src,
        },
        {
            id: '3',
            img: siwpe3Src,
        },
        {
            id: '4',
            img: siwpe4Src,
        },

    ];
    const [prevIndex, setPrevIndex] = useState(swipeList.length - 1);
    
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentIndex((prevIndex) => (prevIndex + 1) % swipeList.length);
            setPrevIndex((prevIndex) => (prevIndex + 1) % swipeList.length);
        }, 5000);

        return () => clearInterval(interval);
    }, [currentIndex,swipeList.length]);
    


    
    const onFinish = async (values) => {
        try {
            const res = await userLogin({...values});
            
            if(res?.code === 200){
                
                localStorage.setItem('token',res?.data?.token);
                localStorage.setItem('userInfo',JSON.stringify({
                    isAdmin:res?.data?.isAdmin,
                    username:res?.data?.username
                }));
                localStorage.setItem('menuType', 'MIDDLE_GROUND');
                message.success('登录成功');
                await logger({description:"登录"})
                history.push(res?.data?.redirectUrl || '/home');
            }
        } catch (error) {
            console.log(error, 'user-login-error');

        }

    };

    return (
        <div className="login-page" style={{ backgroundImage:`url(${swipeList[currentIndex]?.img})`,opacity: currentIndex === prevIndex ? 0 : 1,}}>
            <header className='login-page-header'>
                <ProCard
                    title={
                        <section className='login-page-header-title'>
                            <span className='login-page-header-title-text'>瑞安市学业大数据分析系统</span>
                        </section>
                    }
                    bordered
                    style={{
                        width: 420,
                        height: 550,
                        marginRight: 60,
                        overflow: "hidden"
                    }}
                >
                    <section className='login-page-header-form'>
                        <section className='login-page-header-form-title'>
                            <span className='login-page-header-form-title-text'>
                                账号登录
                            </span>
                        </section>
                        <main className='login-page-header-form-body'>
                            <Form
                                name="basic"
                                wrapperCol={{ span: 24 }}
                                style={{ maxWidth: 412 }}
                                onFinish={onFinish}
                                autoComplete="off"
                            >
                                <Form.Item
                                    name="username"
                                    rules={[{ required: true, message: '请输入账号' }]}
                                >
                                    <Input prefix={<Image
                                        width={16}
                                        height={16}
                                        preview={false}
                                        style={{ marginBottom: 14 }}
                                        src={loginAccount}

                                    />} style={{ width: 360, height: 50, backgroundColor: '#F7F8FC' }} placeholder="请输入账号" />
                                </Form.Item>

                                <Form.Item
                                    name="password"
                                    rules={[{ required: true, message: '请输入密码' }]}
                                >
                                    <Input.Password prefix={<Image
                                        width={16}
                                        height={16}
                                        preview={false}

                                        style={{ marginBottom: 14 }}
                                        src={loginPassword}

                                    />} style={{ width: 360, height: 50, backgroundColor: '#F7F8FC' }} placeholder="请输入密码" />
                                </Form.Item>
                                <section style={{ width: 360, height: 50, backgroundColor: '#F7F8FC', borderRadius: 4, display: "flex", justifyContent: 'space-between', alignItems: "center" }}>
                                    <Form.Item
                                        name="code"
                                        rules={[{ required: true, message: '请输入验证码' }]}
                                    >
                                        <Input prefix={<Image
                                            preview={false}
                                            width={16}
                                            height={16}
                                            style={{ marginBottom: 14 }}
                                            src={loginVerificationCode}

                                        />}
                                            style={{ backgroundColor: '#F7F8FC', marginTop: 28, height: 48 }}
                                            placeholder="请输入验证码" />

                                    </Form.Item>
                                    <Image preview={false} style={{ width: 168, height: 36, objectFit: "contain", cursor: "pointer" }} src={`${BASE_URL}/auth/getCode?time=` + time}  onClick={()=>setTime(dayjs().valueOf())}/>
                                </section>
                                <section style={{ marginTop: 32 }}>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit" style={{ width: 360, height: 50, borderRadius: 30 }}>
                                            登录
                                        </Button>
                                    </Form.Item>
                                </section>
                            </Form>
                        </main>
                    </section>
                </ProCard>
            </header>
            <footer className='login-page-footer'>
                <section className='login-page-footer-content'>
                    {/* <Image  preview={false} src={footerLogoSrc} width={236} height={64}  style={{objectFit:"contain"}}/> */}
                    <section className='login-page-footer-content-tip'>
                        <span className='login-page-footer-content-tip-title'>瑞安市教育教学研究院</span>
                        <span className='login-page-footer-content-tip-text'>杭州号脉数字技术有限公司&nbsp;-&nbsp;13685755271</span>
                    </section>
                    
                </section>

            </footer>
        </div>
    )
};

export default LoginPage;