Chengzhebei/src/pages/A2yblm/components/Shufa/index.tsx

import React, { useEffect, useState, useRef } from 'react'
import styles from './index.module.scss'
import Zback from '@/components/Zback'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import lian1 from '@/assets/img/frame_lian1.png'
import lian2 from '@/assets/img/frame_lian2.png'
import bei1 from '@/assets/img/frame_bei1.png'
import bei2 from '@/assets/img/frame_bei2.png'

type ActiveItem = 'lian1' | 'lian2' | 'bei1' | 'bei2' | 'normal'
function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => void }) {
  const [showName, setName] = useState('shufa1')
  const [activeItem, setActiveItem] = useState<ActiveItem>('normal')
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
  const Line = ({ index }: { index: number }) => {
    return (
      <div className={index % 2 !== 0 ? styles.shufaLine1 : styles.shufaLine2}>
        <div className='leftLine'>
          <div className='dot'>●</div>
        </div>
        <div className='rightLine'>
          <div className='dot'>●</div>
        </div>
      </div>
    )
  }

  useEffect(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current)
    }
    const delayMap = {
      lian1: 5000,
      lian2: 4000,
      bei1: 4000,
      bei2: 4000
    }

    if (activeItem && activeItem !== 'normal' && delayMap.hasOwnProperty(activeItem)) {
      timerRef.current = setTimeout(() => {
        setActiveItem('normal')
        // 定时器执行后清空 ref
        timerRef.current = null
      }, delayMap[activeItem])
    }

    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current)
      }
    }
  }, [activeItem])

  const backClick = () => {
    if (showName === 'shufa2') {
      setActiveItem('normal')
      setName('shufa1')
    }
    if (showName === 'shufa1') setIsShowShufa(false)
  }

  return (
    <div className={styles.shufa} style={{ zIndex: showName === 'shufa1' ? 3 : 4 }}>
      <Zback clickFu={backClick} />
      <div
        className='shufa1'
        style={{
          opacity: showName === 'shufa1' ? 1 : 0,
          pointerEvents: showName === 'shufa1' ? 'auto' : 'none'
        }}
      >
        <div className='sLeft'>
          <div className='zi' onClick={() => setName('shufa2')}>
            <img src={require('@/assets/img/A2_shufa_lian.png')} alt='' />
          </div>
          <div className='zi' onClick={() => setName('shufa2')}>
            <img src={require('@/assets/img/A2_shufa_bei.png')} alt='' />
          </div>
          <div className='leftTxt1'>{myData?.shufa?.lIntro}</div>
        </div>
        <div className='sRight'>
          <div className='rightTitle1 songFont'>{myData?.shufa?.rIntro}</div>
          <div className='rightTitleLine1' />
          <div className='rightIntro'>
            {myData?.shufa?.rItems?.map((item, index) => (
              <div className='rightItem' key={index}>
                <div className='rLabel'>{item?.label}</div>
                <div className='rtext'>{item?.txt}</div>
              </div>
            ))}
          </div>
          <div className='rightTxt1'>{myData?.shufa?.rTxt}</div>
          <div className='shufa1Btn songFont' onClick={() => setName('shufa2')}>
            字形赏析
          </div>
        </div>
        <Line index={1} />
        <Line index={2} />
      </div>

      <div
        className='shufa2'
        style={{
          opacity: showName === 'shufa2' ? 1 : 0,
          pointerEvents: showName === 'shufa2' ? 'auto' : 'none'
        }}
      >
        {/* 琏 */}
        <div className='lianContainer'>
          <div className='zicontent'>
            {myData?.shufa2?.lian?.map((item, index) => (
              <div
                className={`txtitem ${activeItem === `lian${index}` ? 'txtitemAc' : ''}`}
                key={index}
                onClick={() =>
                  index > 0 && index < 3 && setActiveItem(`lian${index}` as ActiveItem)
                }
              >
                <div className='txt' dangerouslySetInnerHTML={{ __html: item }} />
                <div
                  className='icon'
                  style={{ visibility: index === 0 || index === 3 ? 'hidden' : 'visible' }}
                >
                  <img src={require('@/assets/img/A7base3_icon.png')} alt='' />
                </div>
              </div>
            ))}
          </div>
          <div className={`zi1`}>
            <img
              className={activeItem}
              src={
                activeItem === 'lian1'
                  ? lian1
                  : activeItem === 'lian2'
                  ? lian2
                  : require('@/assets/img/A2_shufa_lian.png')
              }
              alt=''
            />
          </div>
        </div>
        {/* 碑 */}
        <div className='beiContainner'>
          <div className={`zi2 ${activeItem}`}>
            <img
              className={activeItem}
              src={
                activeItem === 'bei1'
                  ? bei1
                  : activeItem === 'bei2'
                  ? bei2
                  : require('@/assets/img/A2_shufa_bei.png')
              }
              alt=''
            />
          </div>
          <div className='zicontent'>
            {myData?.shufa2?.bei?.map((item, index) => (
              <div
                className={`txtitem ${activeItem === `bei${index}` ? 'txtitemAc' : ''}`}
                key={index}
                onClick={() => index > 0 && index < 3 && setActiveItem(`bei${index}` as ActiveItem)}
              >
                <div
                  className='icon'
                  style={{ visibility: index === 0 || index === 3 ? 'hidden' : 'visible' }}
                >
                  <img src={require('@/assets/img/A7base3_icon.png')} alt='' />
                </div>
                <div className='txt' dangerouslySetInnerHTML={{ __html: item }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoShufa = React.memo(Shufa)

export default MemoShufa