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

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

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

const MemoPanoImg = React.memo(PanoImg)

export default MemoPanoImg