import React, { useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import BaseImg from '@/components/BaseImg'
import { baseURL, myData } from '@/utils/http'
import EndVideo from '@/components/EndVideo'
import NextPage from '@/components/NextPage'
import classNames from 'classnames'
import FloorBtn from '@/components/FloorBtn'
import HotIcon from '@/components/HotIcon'
import Hot2 from '../A2visit/PanoVideo/Hot2'
import { PlowHotType } from '@/types'
import useLoding from '@/components/ownUse/useLoding'

function A6plow() {
  // 初始显示和隐藏
  const [cutVideoShow, setCutVideoShow] = useState(false)

  // 控制视频播放的方法
  const videoPlayFu = useCallback((index: number) => {
    setTimeout(() => {
      const domAll: any = document.querySelectorAll('.A6video')
      if (domAll && domAll.length) {
        domAll.forEach((v: HTMLVideoElement, i: number) => {
          if (index === i) v.play()
          else {
            v.pause()
            v.currentTime = 0
          }
        })
      }
    }, 100)
  }, [])

  // 点击继续
  const btnStart = useCallback(() => {
    setCutVideoShow(true)
    // 播放第一个整地的视频
    videoPlayFu(0)
  }, [videoPlayFu])

  // 点击 跳下一个章节
  const [lastVideo, setLastVideo] = useState(false)

  // 左侧按钮的选中
  const [leftAc, setLeftAc] = useState(0)

  const leftAcFu = useCallback(
    (index: number) => {
      videoPlayFu(index)
      setLeftAc(index)
    },
    [videoPlayFu]
  )

  // 底部文字
  const floorTxt = useMemo(() => {
    return myData.plow.info[leftAc].txt
  }, [leftAc])

  // 打开热点
  const [hotInd, setHotInd] = useState(-1)

  const hotInfo = useMemo(() => {
    let info = {} as PlowHotType
    const temp = myData.plow.info[leftAc].hot
    if (temp && temp[hotInd]) {
      info = temp[hotInd]
    }

    return info
  }, [hotInd, leftAc])

  // 先加载背景图 序列帧等 在加载视频
  const { imgNow, imgNumFu } = useLoding(3)

  return (
    <div className={styles.A6plow}>
      {/* 初始静态图 */}
      <BaseImg
        isShow={cutVideoShow}
        iconSrc={`${baseURL}plow/mulu.png`}
        parentFu={() => btnStart()}
        bgImg={`${baseURL}${myData.plow.baseImg}`}
        imgNow={imgNow}
        imgNumFu={imgNumFu}
      />

      {/* 主要内容 */}
      {imgNow ? (
        <div className={classNames('A6main', cutVideoShow ? 'A6mainShow' : '')}>
          {/* 左侧title */}
          <div className='A6Lbtn' style={{ backgroundImage: `url(${baseURL}plow/leftBg.png)` }}>
            {myData.plow.info.map((item, index) => (
              <div
                key={index}
                className='A6LbtnRow'
                onClick={() => leftAcFu(index)}
                style={{
                  backgroundImage: `url(${baseURL}plow/left${leftAc === index ? 'Ac' : ''}.png)`,
                  color: leftAc === index ? '#BD7656' : '#DACB8B'
                }}
              >
                {item.name}
              </div>
            ))}
          </div>

          {/* 底部文字 */}
          <div
            className='A6txt'
            style={{ backgroundImage: `url(${baseURL}plow/txtBg.png)` }}
            dangerouslySetInnerHTML={{ __html: floorTxt }}
          ></div>

          {/* 视频加热点 */}
          <div className='A6videoBox'>
            {myData.plow.info.map((item, index) => (
              <div className={classNames(leftAc === index ? 'A6vShow' : '')} key={index}>
                <video
                  className='A6video'
                  playsInline
                  muted
                  webkit-playsinline='true'
                  x5-video-player-type='h5'
                  loop
                >
                  <source type='video/mp4' src={baseURL + item.videoSrc} />
                  Your browser does not support the video tag.
                </video>

                {/* 热点 */}
                {item.hot.map((v: PlowHotType, i) => (
                  <HotIcon
                    style={{
                      top: v.locPage.top,
                      left: v.locPage.left
                    }}
                    key={i}
                    index={i}
                    clickSon={val => setHotInd(val)}
                    hoverSrc={v.hoverSrc}
                  />
                ))}
              </div>
            ))}
          </div>

          {/* 跳到下一章 */}
          <NextPage clickSon={() => setLastVideo(true)} txt='结束宴饮' />
          {/* 右下角按钮 */}
          <FloorBtn />
        </div>
      ) : null}

      {hotInd >= 0 && hotInfo.name ? (
        <Hot2 data={hotInfo.data} closeFu={() => setHotInd(-1)} name={hotInfo.name} />
      ) : null}

      {/* 结尾动画 */}
      {imgNow ? (
        <EndVideo
          lastVideo={lastVideo}
          delDom='.A6main'
          src={baseURL + myData.plow.lastVideo}
          path='/end'
          noBtn={true}
        />
      ) : null}
    </div>
  )
}

const MemoA6plow = React.memo(A6plow)

export default MemoA6plow