import React, { useMemo, useState } from 'react'
import styles from './index.module.scss'
import Hot1 from './Hot1'
import Hot2 from './Hot2'
import { myData } from '@/utils/http'
import HotIcon from '@/components/HotIcon'
function PanoVideo() {
  // 0为 第一种模式的热点 其他为第二种
  const [ind, setInd] = useState(-1)

  const data = useMemo(() => {
    if (ind !== -1) return myData.visit.hot[ind].data
    else return []
  }, [ind])

  return (
    <div className={styles.PanoVideo}>
      {/* 待完善 */}
      全景视频页面-----
      {myData.visit.hot.map((item, index) => (
        // 热点图标
        <HotIcon key={index} index={index} clickSon={val => setInd(val)} hoverSrc={item.hoverSrc} />
      ))}
      {ind === -1 ? null : ind === 0 ? (
        <Hot1 data={data} closeFu={() => setInd(-1)} />
      ) : (
        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.visit.hot[ind].name} />
      )}
    </div>
  )
}

const MemoPanoVideo = React.memo(PanoVideo)

export default MemoPanoVideo