useIOTComponent.js

import Cookies from 'js-cookie';
import React from 'react';
import { LOGIN_DISPLAY, LOGIN_WAY } from '@/constants';
import Account from './useAccount';
import IOTQRCode from './useIOTQRCode';
import Phone from './usePhone';
import { useIntl } from '@wisdom-utils/components';
import styles from '../style.less';

const useIOTComponent = props => {
  const handlerType = type => {
    props.setType(LOGIN_DISPLAY[type]);
    props.updateLoginMode(LOGIN_WAY[type]);
    Cookies.set('loginMode', LOGIN_WAY[type], {
      expires: 5 * 60 * 1000,
      path: '/',
    });
  };
  return (
    <div className={styles.wechatQRcode}>
      {props.type === LOGIN_DISPLAY.Account ? (
        <Account {...props} />
      ) : props.type === LOGIN_DISPLAY.WeChart ? (
        <IOTQRCode {...props} />
      ) : props.type === LOGIN_DISPLAY.Mobile ? (
        <Phone {...props} />
      ) : (
        <Account {...props} />
      )}
      <div className={styles.loginDisplay}>
        <a
          onClick={() => handlerType('Account')}
          style={{
            display: props.type === LOGIN_DISPLAY.Account ? 'none' : 'block',
          }}
        >
          {useIntl().formatMessage({ id: 'pages.login.accountLogin.tab' })}
        </a>
        <a
          onClick={() => handlerType('WeChart')}
          style={{
            display: props.type === LOGIN_DISPLAY.WeChart ? 'none' : 'block',
          }}
        >
          {useIntl().formatMessage({ id: 'pages.login.weChart.tab' })}
        </a>
        <a
          onClick={() => handlerType('Mobile')}
          style={{
            display: props.type === LOGIN_DISPLAY.Mobile ? 'none' : 'block',
          }}
        >
          {useIntl().formatMessage({ id: 'pages.login.phoneLogin.tab' })}
        </a>
      </div>
    </div>
  );
};
export default useIOTComponent;