index.js

import styles from './index.less'
import React, { forwardRef, useEffect, useRef, useState } from 'react';
import LoginAction from '../../../login';
import Account from '../../../js/useAccount';
import moment from 'moment';
import classnames from 'classnames';
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 { defaultApp } from '../../../../../../micro';
import logo from './images/logo.png'
import titleImage1 from './images/涓涓清泉.png'
import titleImage2 from './images/润泽万家.png'
import Krpano from '../../../components/Krpano';

const TieShanLogin = 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 [dateObj, setDateObj] = useState({});
    const { projectName } = props.loginParams
    const [action, setAction] = useState(
        () =>
            new LoginAction(Object.assign({}, props, { history }), setVisible, false),
    );

    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(() => {
        // if (props.loginMode === LOGIN_WAY.WeChart) {
        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} />;
    };

    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={styles.tieshanLogin}>
                <div className={styles['inner-wrapper']}>
                    {/* <div className={styles['left-imgbox']}></div> */}
                    <div className={styles['inner-center']}>
                        <div className={styles['welcome-title']}>
                            {/* <img src={loginTitlePng} alt="login-title" /> */}
                            <div className={styles['welcome-slogan']}>
                                <img src={titleImage1} />
                            </div>
                            <span className={styles['welcome-split']}></span>
                            <div className={styles['welcome-slogan']}>
                                <img src={titleImage2} />
                            </div>
                        </div>
                        <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
                            {renderPlatform()}
                        </div>
                    </div>
                </div>
                <div className={styles['login-header-wrapper']}>
                    <div className={styles['login-header']}>
                        <div className={styles['left-title']}>
                            <div>
                                <img src={logo} />
                            </div>
                            <div className={styles['cn-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>
                <div className={styles['krpano']}>
                    <Krpano projectName={projectName} />
                </div>
                <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(TieShanLogin));