Chengzhebei/src/pages/A7wjwj/index.tsx

import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import MenuSider from '@/components/MenuSider'
import Discover from './conponents/Discover'
import Shuxing from './conponents/Shuxing'
import { isPc } from '@/utils/http'
import classNames from 'classnames'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import Weijie from './conponents/Weijie'
import { isUnitySta, lodingUnityFu } from '../A0base/data'
import Zloding from '@/components/Zloding'

function A7Wjwj() {
  const { myData, unityKey, myLangue } = useSelector((state: RootState) => state.A0Layout)

  const [currentTab, setCurrentTab] = useState(0)

  // 判断是 返回 属性之辨 上一级 还是说 返回上级页面
  const tab2Ref = useRef<any>(null)
  const gotoBack = () => {
    const flag = tab2Ref.current?.sonGetStaFu()
    if (flag) tab2Ref.current?.sonSetStaFu()
    else window.location.replace('#/base?t=2')
  }

  // 监听unity是否被销毁了
  const [unitySta, setUnitySta] = useState(false)

  useEffect(() => {
    const flag = isUnitySta()
    if (flag) {
      lodingUnityFu()
    }
    setUnitySta(flag)
  }, [unityKey])

  return (
    <div className={classNames(styles.A7Wjwj, isPc ? '' : styles.A7WjwjMo)}>
      {unitySta ? (
        <Zloding
          isShow={unitySta}
          bacNum={4}
          callBackFu={() => {
            setTimeout(() => {
              setUnitySta(false)
              const search = new URLSearchParams(window.location.hash.split('?')[1] || '')
              const to = search.get('to')
              console.log(to)
              if (to === 'yblm') window.location.replace('#/yblm')
            }, 400)
          }}
        />
      ) : null}

      {/* 发现之谜 */}
      <Discover style={{ display: currentTab === 0 ? 'flex' : 'none' }} />
      {/* 属性之辨 */}
      <Shuxing ref={tab2Ref} style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
      {/* 未解之思 */}
      {currentTab === 2 ? <Weijie txt={myData.weijie} myLang={myLangue} /> : null}

      <div className={classNames('back', isPc ? '' : 'moBack')} onClick={() => gotoBack()}>
        <img src={require(`@/assets/img/btn_back${myLangue === 'EN' ? 'En' : ''}.png`)} alt='' />
      </div>

      <div className='topBar'>
        <div
          className={`tab songFont ${currentTab === 0 ? 'active' : ''}`}
          onClick={() => setCurrentTab(0)}
        >
          {myLangue === 'EN' ? 'Discover' : '发现之谜'}
        </div>
        <div
          className={`tab songFont ${currentTab === 1 ? 'active' : ''}`}
          onClick={() => setCurrentTab(1)}
        >
          {myLangue === 'EN' ? 'Distinction' : '属性之辨'}
        </div>
        <div
          className={`tab songFont ${currentTab === 2 ? 'active' : ''}`}
          onClick={() => setCurrentTab(2)}
        >
          {myLangue === 'EN' ? 'Unresolved' : '未解之思'}
        </div>
      </div>

      <MenuSider activeTab={2} />
    </div>
  )
}

const MemoA7Wjwj = React.memo(A7Wjwj)

export default MemoA7Wjwj