Chengzhebei/src/components/MenuSider/index.tsx

import React, { useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import { toEchPageFu } from './data'

/**
 * @param activeTab 0:一碑两面 1:一碑万象 2:无尽未竟
 */
function MenuSider({ activeTab }: { activeTab: number }) {
  const { myLangue, myData } = useSelector((state: RootState) => state.A0Layout)

  const [isShowMenu, setIsShowMenu] = useState(false)

  const byzhClick = (activeTab: number) => {
    window.location.replace(
      activeTab === 0
        ? '#/byzh?fromPath=yblm'
        : activeTab === 1
          ? '#/byzh?fromPath=ybwx'
          : '#/byzh?fromPath=wjwj'
    )
  }
  return (
    <>
      <div
        className={classNames(myLangue === 'EN' ? styles.menuEn : '', styles.menu)}
        onClick={() => setIsShowMenu(true)}
      >
        <img src={require('@/assets/img/btn_menu.png')} alt='' />
      </div>
      <div
        className={classNames(
          styles.menuSider,
          isShowMenu ? 'show' : '',
          myLangue === 'EN' ? styles.menuSiderEn : ''
        )}
        onClick={() => setIsShowMenu(false)}
      >
        <div className='sider' onClick={e => e.stopPropagation()}>
          <img
            onClick={() => setIsShowMenu(false)}
            src={require(`@/assets/img/menuSiderBtn.png`)}
            alt=''
          />
          <div className='siderContent'>
            <div
              className={`tab ${activeTab === 0 ? 'tabAc' : ''}`}
              onClick={() => {
                window.location.replace('#/yblm')
              }}
            >
              <div className='txt songFontc'>{myData.baseInfo[0].title}</div>
              <div className={`bottomLine`}>
                <img
                  src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)}
                  alt=''
                />
              </div>
            </div>
            <div
              className={`tab ${activeTab === 1 ? 'tabAc' : ''}`}
              onClick={() => {
                window.location.replace('#/ybwx')
              }}
            >
              <div className='txt songFontc'>{myData.baseInfo[1].title}</div>
              <div className={`bottomLine`}>
                <img
                  src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)}
                  alt=''
                />
              </div>
            </div>
            <div
              className={`tab ${activeTab === 2 ? 'tabAc' : ''}`}
              onClick={() => {
                window.location.replace('#/wjwj')
              }}
            >
              <div className='txt songFontc'>{myData.baseInfo[2].title}</div>
              <div className={`bottomLine`}>
                <img
                  src={require(`@/assets/img/menu_item${activeTab === 2 ? '_ac.png' : '.png'}`)}
                  alt=''
                />
              </div>
            </div>
            <div className='icon'>
              <div className='paint' onClick={() => byzhClick(activeTab)}>
                <img src={require('@/assets/img/icon_paint.png')} alt='' />
                <div className='txt'>
                  {myLangue === 'EN' ? 'Stele Shadow Intelligence Mapping' : '碑影智绘'}
                </div>
              </div>
              <div className='knowledge'>
                <img src={require('@/assets/img/icon_knowledge.png')} alt='' />
                <div className='txt' onClick={() => toEchPageFu()}>
                  {myLangue === 'EN' ? 'mapping knowledge domain' : '展览图谱'}
                </div>
              </div>
              {/* <div className='poster'>
                <img src={require('@/assets/img/icon_poster.png')} alt='' />
                <div className='txt'>分享海报</div>
              </div> */}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

const MemoMenuSider = React.memo(MenuSider)

export default MemoMenuSider