HeNan_HanJia/Code/src/components/BaseImg/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { baseURL, myData } from '@/utils/http'
import { domDelOwnFu } from '@/utils/utilsSome'
import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
import FloorBtn from '../FloorBtn'

// 封面介绍
const txtRes = {
  cheQi:
    '拜谒迎宾是汉代社交活动中重要礼仪活动。拜谒礼始于周代，是我国古代社交中一种非常重要的见面礼节。“拥彗迎宾”则是两汉时期社交活动中一项约定俗成的礼仪，表达了主人对于宾客的欢迎与尊重。',
  yanYing:
    '两汉时，随着社会经济的繁荣，人们生活水平的提高，宴饮成为汉代社会生活的风尚，也是汉代庄园的重要社交方式和生活娱乐方式，宴饮中通常以乐舞、百戏等侑食助兴。《周礼·春官·大宗伯》中有记载：“以飨燕之礼，亲四方之宾客”。相较两周时期宴饮政治功能的侧重，汉代宴饮在重礼修时睦的同时，更多了些活沷生动的色彩。',
  yueWu:
    '乐舞百戏是流行于两汉的竞技、杂耍、幻术及乐舞蹈、俳优、动物戏等多种艺术形式的总称。其在对先秦文化的承续中，汇融了周边民族的器乐歌舞新风，以吹管与弹拔乐取代了金石之声，不仅改变了乐队的结构，也改变了音乐的旋律风格和表现形式。百戏是中外文化交流、融合的产物。东汉时洛阳成国西域人东来的主要流寓地，洛阳出土的舞乐百戏俑群展现了这种将器乐、歌舞、杂质、滑稽以汇为一体的表演方式。',
  houCu:
    '汉代是我国饮食文化高度发达的时期，汉代经过前期的休养生息，农业生产得以恢复并迅猛发展，为汉代饮食文化的发展奠定了物质基础。汉代已形成了以黍（稷）、粟、麦、菽、稻等五谷在内的谷物为主食,以蔬菜、肉类、水产、果类为副食的饮食结构。随着异域食物种类，以及饮食加工方法的引进，汉代菜肴的烹饪也已进入到精细化阶段，烹饪方法也更为多样。',
  tianJian:
    '汉代是我国农业生产水平大发展和变革时代，汉代确立了以农业为基础的经济体系，是精耕细作技术急速上升的阶段。中原地区是两汉时期全国重要的经济区。铁农具逐渐大量应用于农业生产，“二牛一人”式耕作方法、代田法、区田法等耕作技术的出现，以及耧车、水碓和风车的发明，极大地提高了农业生产效率，促进了农业的迅速发展。汉代庄园里的农业生产活动涉及农、林、牧、副、渔等多个门类，东汉后期,田庄中的经济体系已经逐步完备,使汉代庄园成为自给自足程度较高的经济实体。',
  xianJu:
    '汉代画像石中有大量神仙和天象主题的图像，一方面反映出汉代先民的敬天思想，对于自然和宇宙秩序的理解与探索。同时也反映了汉代人的神仙信仰，以神仙境界为生命的终极境界，向往永生的生死观。反映了汉代先民对于自然世界的朴素的理解，以及对于向往永生的神仙世界浪漫而瑰丽的想像。'
}

type Props = {
  isShow: boolean //是否显示
  iconSrc: string //icon 图标
  parentFu: () => void //点击继续的方法（调用父亲）
  bgImg?: string
  num?: number
  moreSta?: boolean
  imgNumFu: () => void
  imgNow: boolean
  hidden?: boolean
  lastNum?: number
  bird?: string //鸟图，时辰图
}

function BaseImg({
  isShow,
  iconSrc,
  parentFu,
  bgImg,
  num = 30,
  moreSta,
  imgNumFu,
  imgNow,
  hidden = false,
  lastNum = 100,
  bird
}: Props) {
  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)

  const timeRR = useRef(-1)

  const btnStartFu = useCallback(() => {
    if (loding >= 100) {
      parentFu()
      // 0.5s之后删除自己
      setTimeout(() => {
        domDelOwnFu('#BaseImg')
      }, 500)
    }
  }, [loding, parentFu])

  useEffect(() => {
    if (imgNow) {
      clearInterval(timeRR.current)
      timeRR.current = window.setInterval(() => {
        if (loding >= lastNum) {
          if (moreSta) btnStartFu()

          clearInterval(timeRR.current)
          return
        }
        setLoding(loding + 2)
      }, num)
    }
  }, [btnStartFu, imgNow, lastNum, loding, moreSta, num])

  // 点击 小鸡 出来的热点信息

  const [jiAc, setJiAc] = useState(false)

  return (
    <div
      id='BaseImg'
      hidden={hidden}
      className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}
    >
      {bgImg ? <img onLoad={imgNumFu} id='bgImgBox' src={bgImg} alt='' /> : null}

      {moreSta ? null : <img onLoad={imgNumFu} className='BIlogo' src={iconSrc} alt='' />}

      {/* 文字介绍 */}
      {bird ? (
        <div className='BItxt' style={{ backgroundImage: `url(${baseURL + 'Zhot/bac.png'})` }}>
          <div className='sizeNo'>{Reflect.get(txtRes, bird)}</div>
        </div>
      ) : null}

      {/* 右下角按钮 */}
      {loding >= 100 && bird ? <FloorBtn /> : null}

      {bird ? (
        <div
          className='birdBox'
          style={{
            opacity: loding >= 100 ? '1' : '0',
            pointerEvents: loding >= 100 ? 'auto' : 'none'
          }}
        >
          {/* 鸟图 */}
          <img className='bird1' onLoad={imgNumFu} src={`${baseURL}bird/${bird}.png`} alt='' />
          <div className='bird2' onClick={btnStartFu}>
            点击继续
          </div>
          <div className='bird3' onClick={() => setJiAc(true)}></div>
        </div>
      ) : (
        <div
          className='BIbaseBtn'
          onClick={btnStartFu}
          style={{ pointerEvents: loding >= 100 ? 'auto' : 'none' }}
        >
          {moreSta ? null : (
            <div className='BIcon'>
              <img onLoad={imgNumFu} src={`${baseURL}visit/arrow.png`} alt='' />
            </div>
          )}
          <div className={classNames('BIBtxt', loding >= 100 && !moreSta ? 'BIBtxtFont' : '')}>
            {loding >= 100 ? (moreSta ? '加载中' : '点击继续') : '加载中'}
          </div>
        </div>
      )}

      {/* 进度条 */}
      {loding >= 100 ? null : (
        <div className='BIBxian'>
          <div>
            <div style={{ width: loding + '%' }}></div>
          </div>
        </div>
      )}

      {/* 点击小鸡 */}
      {jiAc ? (
        <Hot2
          data={myData.xianJu.imgHot.find(v => v.name === '褐绿釉陶桃都树')!.data}
          name='褐绿釉陶桃都树'
          closeFu={() => setJiAc(false)}
          isJi={true}
        />
      ) : null}
    </div>
  )
}

const MemoBaseImg = React.memo(BaseImg)

export default MemoBaseImg