index.js

import React, { forwardRef, useEffect, useRef, useState } from 'react';

import { Modal, Popover } from 'antd';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { connect } from 'react-redux';
import { useHistory, withRouter } from '@wisdom-utils/runtime';
import { actionCreators } from '@/containers/App/store';
import defaultSetting from '../../../../../../../config/defaultSetting';
import LoginAction from '../../../login';
import styles from './index.less';
import Account from '../../../js/useAccount';
import { defaultApp } from '../../../../../../micro';
import QRCode from 'qrcode.react';
import classnames from 'classnames';
import moment from 'moment';
import Krpano from '../../../components/Krpano';

const PopOvercontent = () => {
    const qrcodes = window.globalConfig && window.globalConfig.qrcode;
    if (qrcodes) {
        return <QRCode value={qrcodes} />;
    }
    return <span>手持APP下载未配置</span>;
}

const Login = forwardRef((props, _ref) => {
    const sliVerify = useRef();
    const loginFormRef = useRef();
    const formRef = useRef(null);
    const [status, setStatus] = useState('normal');

    const [autoLogin, setAutoLogin] = useState(false);
    const [submitting, setSubmitting] = useState(false);
    const [type, setType] = useState('Account');
    const [visible, setVisible] = useState(false);
    const history = useHistory();
    const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
    const [dateObj, setDateObj] = useState({})
    const { projectName} = props.loginParams

    const logoImage =
    props?.global?.logo?.indexOf('CityTemp') > -1
      ? props?.global?.logo
      : `civweb4/${props?.global?.logo}`;
      
    const handleSubmit = values => {
        /* eslint-disable */
        action &&
            (type === 'Account'
                ? action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
                : type === 'Mobile'
                    ? action.phoneLoginFormHandler(values.mobile, values.captcha)
                    : null);

        setSubmitting(true);
        props.updateCurrentIndex && props.updateCurrentIndex(-1);
    };

    useEffect(() => {
        action &&
            action.events.on('loginSuccess', event => {
                setSubmitting(false);
                props.updateCurrentIndex && props.updateCurrentIndex(0);
                props.history.push(`/?client=${props.global.client}`);
                // window.share.event.emit('triggerMicro', props.global);
                // initMicroApps();
                defaultApp();
            });
        action &&
            action.events.on('loginError', event => {
                setVisible(false);
                setSubmitting(false);
            });
        action &&
            action.events.on('loginVisible', status => {
                setVisible(status);
            });
        return () => {
            action && action.events && action.events.removeAllListeners('loginSuccess');
            action && action.events && action.events.removeAllListeners('loginError');
            action && action.events && action.events.removeAllListeners('loginVisible');
        };
    }, [props.loginMode]);

    useEffect(() => {
        setSubmitting(false);
    }, [visible]);

    const renderPlatform = () => {
        const template = props.global.loginTemplate;
        const params = {
            fromRef: formRef,
            type,
            setType,
            status,
            submitting,
            autoLogin,
            setAutoLogin,
            action,
            onSubmit: handleSubmit,
            loginMode: props.loginMode,
            updateLoginMode: props.updateLoginMode,
            welcome: null,
        };
        return <Account {...params} />;
    };
    /* eslint-disable */

    const handleWeek = () => {
        const weekOfDay = Number(moment().format('E'));
        let weekDayName = ''
        switch (weekOfDay) {
            case 1:
                weekDayName = '周一'
                break
            case 2:
                weekDayName = '周二'
                break
            case 3:
                weekDayName = '周三'
                break
            case 4:
                weekDayName = '周四'
                break
            case 5:
                weekDayName = '周五'
                break
            case 6:
                weekDayName = '周六'
                break
            case 0:
                weekDayName = '周日'
                break
            default:
                weekDayName = ''
        }
        return weekDayName
    }

    useEffect(() => {
        const timer = setInterval(() => {
            setDateObj({
                curTime: moment().format('HH:mm:ss'),
                week: handleWeek(),
                date: moment().format('YYYY/MM/DD')
            });
        }, 1000);
        return () => {
            clearInterval(timer);
        };
    }, [])


    return (
        <HelmetProvider>
            <Helmet>
                <title>{props.global.title || defaultSetting.title}</title>
                <meta name="description" content={props.global.title || defaultSetting.title} />
            </Helmet>
            <div className={classnames(styles.linweiLogin, "linwei")}>
                <div className={styles['inner-wrapper']}>
                    {/* <div className={styles['left-imgbox']}></div> */}
                    <div className={styles['inner-center']}>
                        <div className={styles['welcome-title']}>
                        总量控制、定额管理、统一调度、分级负责
                        </div>
                        <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
                            {renderPlatform()}
                        </div>
                    </div>
                    {/* <Popover content={PopOvercontent} title="扫码下载APP" trigger="click" overlayClassName={'popover-style'}>
                        <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
                    </Popover> */}
                </div>
                <div className={styles['login-header']}>
                    <div className={styles['left-title']}>
                        <img src={`${window.location.origin}/${logoImage}`} alt='logo' className={styles['logo-png']} />
                        <div className={styles['cn-title']}>{props.global.title || "渭南市临渭区智慧灌区平台"}</div>
                    </div>
                    <div className={styles['right-timebox']}>
                        <div className={styles['curr-time']}>{dateObj.curTime}</div>
                        <div className={styles['curr-week-date']}>
                            <div className={styles['curr-week']}>{dateObj.week}</div>
                            <div className={styles['curr-date']}>{dateObj.date}</div>
                        </div>
                    </div>
                </div>
                <div className={styles['copyright']}>
                    Copyright ©熊猫智慧水务2024 All Rights Reserved
                </div>
                {
                    projectName ? <div className={styles['krpano']}>
                        <Krpano projectName={projectName} />
                    </div> : null
                }

                <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
                    <div ref={sliVerify} />
                </Modal>
            </div>
        </HelmetProvider>
    );
});

const mapStateToProps = state => ({
    global: state.getIn(['global', 'globalConfig']),
    loginMode: state.getIn(['global', 'loginMode']),
});

const mapDispatchToProps = dispatch => ({
    updateConfig(config) {
        dispatch(actionCreators.getConfig(config));
    },
    createContext(data) {
        dispatch(actionCreators.createContext(data));
    },
    updateLoginMode(mode) {
        dispatch(actionCreators.changeLoginMode(mode));
    },
    updateCurrentIndex(index) {
        dispatch(actionCreators.updateCurrentIndex(index));
    },
});
export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(withRouter(Login));