HeNan_HanJia/Code/src/pages/B1more/S3goods/index.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import { GoodsKeyType, GoodsType } from '@/types'
import classNames from 'classnames'
import HotInfo from './HotInfo'

const txtBg = {
  全部: 'more/txtBg/1quanbu.png',
  车骑拜谒: 'more/txtBg/2cheqi.png',
  主客宴请: 'more/txtBg/3zhuke.png',
  乐舞百戏: 'more/txtBg/4yuewu.png',
  后厨备宴: 'more/txtBg/5houchu.png',
  田间耕作: 'more/txtBg/6tianjian.png',
  仙居世界: 'more/txtBg/7xianju.png'
}

type Props = {
  hidden: boolean
}
const data = myData.more['文物欣赏']

function S3goods({ hidden }: Props) {
  const [key, setKey] = useState<GoodsKeyType>('全部')

  useEffect(() => {
    if (sroolRef.current) {
      sroolRef.current.scrollLeft = 0
    }
  }, [key])

  const listAll = useMemo(() => {
    let arr: {
      name: GoodsKeyType
      info: GoodsType[]
    }[] = []

    let temp: GoodsType[] = []

    data.dataArr.forEach(v => {
      arr.push(v)

      v.info.forEach(c => {
        temp.push(c)
      })
    })

    arr.unshift({
      name: '全部',
      info: temp
    })
    return arr
  }, [])

  // 滚轮和拖动
  const [isFlag, setIsFlag] = useState(false)

  const sroolRef = useRef<HTMLDivElement>(null)

  const mousemoveFu = useCallback(
    (ev: any, flag?: boolean) => {
      if (sroolRef.current) {
        if (flag && !isFlag) {
          const nowMove = sroolRef.current.scrollLeft

          // 滚轮
          let num = 50
          if (ev.deltaY < 0) num = -num
          sroolRef.current.scrollLeft = nowMove + num
        } else if (isFlag) {
          const nowMove = sroolRef.current.scrollLeft

          // 鼠标按住移动
          sroolRef.current.scrollLeft = nowMove - ev.movementX
        }
      }
    },
    [isFlag]
  )

  const row2Bac = useCallback((index2: number) => {
    const num = index2 % 3
    return `${baseURL}more/txtBg/ban${num + 1}.jpg`
  }, [])

  // 打开详情
  const [openInfo, setOpenInfo] = useState({} as GoodsType)

  return (
    <div
      hidden={hidden}
      className={styles.S3goods}
      style={{ backgroundImage: `url(${baseURL + data.bg})`, zIndex: openInfo.name ? 50 : 1 }}
    >
      <div className='S3main' hidden={!!openInfo.name}>
        {listAll.map((item1, index1) => (
          <div className={classNames('S3row', key === item1.name ? 'S3rowShow' : '')} key={index1}>
            {/* 一直有的 */}
            <div
              onClick={() => setKey(item1.name)}
              className='S3rowTit'
              style={{ backgroundImage: `url(${baseURL + Reflect.get(txtBg, item1.name)})` }}
            >
              <div>{item1.name}</div>
            </div>
            {/* 展开的 */}
            <div
              className='S3rowZhan'
              style={{ cursor: isFlag ? 'move' : 'pointer' }}
              ref={key === item1.name ? sroolRef : null}
              onMouseDown={() => setIsFlag(true)}
              onMouseUp={() => setIsFlag(false)}
              onMouseLeave={() => setIsFlag(false)}
              onMouseMove={e => mousemoveFu(e)}
              onWheel={e => mousemoveFu(e, true)}
            >
              {item1.info.map((item2, index2) => (
                <div
                  onClick={() => setOpenInfo(item2)}
                  className='S3zRow sizeNo'
                  key={index2}
                  style={{ backgroundImage: `url(${row2Bac(index2)})` }}
                >
                  {item2.name}
                  {/* 上下的线 待完善 */}
                  {/* <div className='S3zRxian'></div>
                  <div className='S3zRxian S3zRxian2'></div> */}

                  {/* 右下角图片 */}
                  <img className='S3zRimg' src={baseURL + item2.suoSrc} alt='' />
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* 打开热点详情 */}
      {openInfo.name ? (
        <HotInfo info={openInfo} closeFu={() => setOpenInfo({} as GoodsType)} />
      ) : null}
    </div>
  )
}

const MemoS3goods = React.memo(S3goods)

export default MemoS3goods