import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import classNames from 'classnames'
import HotIcon from '@/components/HotIcon'
import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
import history from '@/utils/history'
import ZHot0 from '@/components/ZHot0'

type Props = {
  hidden: boolean
}

const dataTemp = myData.more['汉代百科']

const data1 = dataTemp['物']

function S2mien({ hidden }: Props) {
  const sroolDomRef = useRef<HTMLDivElement>(null)

  // 选中的索引
  const [hotInd, setHotInd] = useState(-1)

  // 打开热点的索引
  const [opnInd, setOpenInd] = useState(-1)

  // 从热点图标子组件点击
  const clickSon = useCallback((index: number) => {
    const name = data1.hot[index].name
    // 打开热点  / 跳云起图页面
    if (name === '四神云气图') history.push('/yun')
    else setOpenInd(index)

    // 移动端点击 高亮
    setHotInd(index)
  }, [])

  useEffect(() => {
    if (hotInd === -1) return
    else {
      // 左侧滚动到中间
      if (sroolDomRef.current) {
        // sroolDomRef.current.scrollTop = 40 * hotInd - 120
        sroolDomRef.current.scrollTo({ top: 40 * hotInd - 120, behavior: 'smooth' })
      }
    }
  }, [hotInd])

  const hotName = useMemo(() => {
    let name = ''
    if (opnInd > -1 && data1.hot[opnInd]) name = data1.hot[opnInd].name

    return name
  }, [opnInd])

  return (
    <div
      hidden={hidden}
      className={styles.S2mien}
      style={{ backgroundImage: `url(${baseURL + data1.bg})`, zIndex: opnInd > -1 ? 50 : 1 }}
    >
      {/* 左侧 */}
      <div
        className='S2left'
        style={{ backgroundImage: `url(${baseURL}more/s1Zhe.png)`, opacity: opnInd > -1 ? 0 : 1 }}
      >
        {/* 物----------- */}
        <div ref={sroolDomRef} className='S2leftMain'>
          {data1.hot.map((item, index) => (
            <div
              onClick={() => clickSon(index)}
              className={classNames('S2leftRow', hotInd === index ? 'S2leftRowAc' : '')}
              // onMouseUp={() => setHotInd(index)}
              key={index}
            >
              {item.name}
            </div>
          ))}
        </div>
      </div>

      {/* 物-----------右侧 */}
      <div className='S2right'>
        {/* 热点图标 */}
        {data1.hot.map((item, index) => (
          <HotIcon
            isModel={item.isModel ? true : false}
            key={index}
            index={index}
            clickSon={val => clickSon(val)}
            hoverSrc={item.hoverSrc}
            style={{
              top: item.loc.top,
              left: item.loc.left
            }}
            zIndex={item.zIndex}
            // 这个模块特有的参数
            hoverFu={val => setHotInd(val)}
            isHoverAc={hotInd === index}
            // isZhan={true}
            isXiao={0.6}
            // isXiao={isPc ? 0.6 : 0}
          />
        ))}
      </div>

      {/* 打开热点页面 */}
      {opnInd > -1 ? (
        hotName === '周礼九拜' ? (
          <ZHot0 closeFu={() => setOpenInd(-1)} />
        ) : (
          <Hot2 data={data1.hot[opnInd].data} closeFu={() => setOpenInd(-1)} name={hotName} />
        )
      ) : null}
    </div>
  )
}

const MemoS2mien = React.memo(S2mien)

export default MemoS2mien