Chengzhebei/src/pages/A7wjwj/conponents/Shuxing/index.tsx

import React, { useCallback, useState } from 'react'
import styles from './index.module.scss'
import { forwardRef, useImperativeHandle } from 'react'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'

type Props = {
  style: React.CSSProperties
  ref: any
}

function Shuxing({ style }: Props, ref: any) {
  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)

  const [currentIndex, setCurrentIndex] = useState(0)
  const [isShowDetail, setIsShowDetail] = useState(false)

  // 让父组件调用，查看当前层级
  const sonGetStaFu = useCallback(() => {
    return isShowDetail
  }, [isShowDetail])

  const sonSetStaFu = useCallback(() => {
    setIsShowDetail(false)
  }, [])

  // 可以让父组件调用子组件的方法
  useImperativeHandle(ref, () => ({
    sonGetStaFu,
    sonSetStaFu
  }))

  return (
    <div className={styles.Shuxing} style={style}>
      {!isShowDetail && (
        <div className='mainContent'>
          <div className='mainTitle'>
            {myLangue === 'EN' ?
              'The Northern Dynasties were a chaotic era marked by regime changes and constant warfare, but also a grand stage for ethnic integration. Shanxi, situated in the middle reaches of the Yellow River and guarding the gateway to the Central Plains, witnessed the clash between nomadic and agricultural societies, and the coexistence of Han and non-Han cultural influences. Various ethnic groups learned from and integrated with each other within this geographically connected land. Northern Dynasties inscriptions, such as the Cheng Zhe Stele, possess a dual nature, bearing witness to the diverse behaviors of the people in the delicate balance between institutions and customs, beliefs and funeral practices. This also showcases the rich expressiveness of history and the allure of the multifaceted and integrated development of the Chinese nation.' : '            北朝，是政权更迭与战火交织的乱世，亦是民族融合的壮阔舞台。山西地处黄河中游扼守中原门户，游牧与农耕在此碰撞，胡风汉韵于此共生，各民族在表里山河中互鉴互融。北朝如程哲碑有双面性质的碑刻，在制度与习俗、信仰与丧葬的微妙平衡中见证了信仰与现实在民众中的群像行为，也为我们展现出历史丰富表现力与中华民族多元融合发展的吸引力。'}
          </div>
          <div className='imgBox'>
            {myData.shuxing.map((item, index) => (
              <div
                className='item'
                key={index}
                onClick={() => {
                  setCurrentIndex(index)
                  setIsShowDetail(true)
                }}
              >
                <div className='pic'>
                  <img src={item.img} alt='' />
                </div>
                <div className='name songFont'>{item.name}</div>
                <div className='time'>{item.time}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {isShowDetail && (
        <div className='detailContent'>
          <div className='detailContainner'>
            <div className='left'>
              <div className='detailTitle songFont'>{myData.shuxing[currentIndex].name}</div>
              <div className='detailTime'>
                <div className='label'>年代：</div>&emsp;<p>{myData.shuxing[currentIndex].time}</p>
              </div>
              <div className='detailSize'>
                <div className='label'>尺寸：</div>&emsp;<p>{myData.shuxing[currentIndex].size}</p>
              </div>
              <div className='detailDesc'>
                <div className='label'>描述：</div>&emsp;
                <p>{myData.shuxing[currentIndex].desc}</p>
              </div>
            </div>
            <div className='right'>
              <img
                className='diwen'
                draggable={false}
                src={require(`@/assets/img/A7_diwen${currentIndex}.png`)}
                alt=''
              />
              <img src={myData.shuxing[currentIndex].img} alt='' />
            </div>
          </div>

          <div className='bottom'>
            {myData.shuxing.map((item, index) => (
              <div
                className={`item ${index === currentIndex ? 'itemAc' : ''}`}
                key={index}
                onClick={() => setCurrentIndex(index)}
              >
                <img src={item.img} alt='' />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default forwardRef(Shuxing)