import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'

import xiaImg from '@/assets/img/jiantou_w.png'
import classNames from 'classnames'
import { MyList1Type, MyObjRowType } from './data'
import { urlParameter } from '@/utils/history'
import { kankanImgUrl, panoSomeData } from '@/utils/urlRes'

type Props = {
  setTopObj: (val: MyObjRowType) => void
  pageKey: '首页' | '室内' | '室外'
}

function Bottom({ setTopObj, pageKey }: Props) {
  const srollRef = useRef<HTMLDivElement>(null)
  const srollRef2 = useRef<HTMLDivElement>(null)
  const mousemoveFu = useCallback((ev: any, dom: HTMLDivElement | null) => {
    if (dom) {
      const nowMove = dom.scrollLeft
      // 滚轮
      let num = 200
      if (ev.deltaY < 0) num = -num
      dom.scrollLeft = nowMove + num
    }
  }, [])

  // 获取数据
  const [myObj, setMyObj] = useState({} as { any: MyObjRowType[] })

  const [myList1, setMyList1] = useState([] as MyList1Type[])

  useEffect(() => {
    if (myList1[0] && myList1[0].children && myList1[0].children[0]) {
      const urlObj = urlParameter(window.location.href)
      if (urlObj.type) {
        // 有参数
        const acObj = myList1.find(v => v.id + '' === urlObj.type)
        acObj && setAc1(acObj.children[0])
      } else setAc1(myList1[0].children[0])
    }
  }, [myList1])

  const getInfoFu = useCallback((data: any) => {
    // 待完善，里面的所有数据待本地化之后 替换字符串

    const myList1Temp = data.catalogRoot

    const myObjTemp: any = {}
    data.scenes.forEach((v: any) => {
      myList1Temp.forEach((c: any) => {
        if (c.children[0] === v.category) {
          if (myObjTemp[c.children[0]]) myObjTemp[c.children[0]].push(v)
          else myObjTemp[c.children[0]] = [v]
        }
      })
    })

    for (const key in myObjTemp) {
      myObjTemp[key] = myObjTemp[key].sort(
        (a: any, b: any) => Number(a.sceneTitle.split('-')[1]) - Number(b.sceneTitle.split('-')[1])
      )
    }

    setMyList1([...KKlist1Temp, ...myList1Temp])
    setMyObj({ ...KKobjTemp, ...myObjTemp })
  }, [])

  useEffect(() => {
    if (pageKey === '室外') {
      fetch(panoSomeData)
        .then(res => {
          return res.json()
        })
        .then(data => {
          getInfoFu(data)
        })
    } else if (pageKey === '室内') {
      setMyList1(KKlist1Temp2)
      setMyObj(KKobjTemp2)
    }
  }, [getInfoFu, pageKey])

  const [isShow, setIsShow] = useState(true)

  // 一级别目录选中
  const [ac1, setAc1] = useState('')

  // 二级别code码

  const [codeArr, setCodeArr] = useState<MyObjRowType[]>([])

  const [code, setCode] = useState('')

  useEffect(() => {
    console.log('code:', code)
  }, [code])

  // 第一级目录变化的时候
  useEffect(() => {
    if (ac1) {
      const arr: MyObjRowType[] = Reflect.get(myObj, ac1) || []
      setCode(arr[0].sceneCode)
      setCodeArr(arr)
      setTopObj(arr[0])
      setTimeout(() => {
        if (srollRef.current) srollRef.current.scrollLeft = 0
      }, 500)
    }
  }, [ac1, myObj, setTopObj])

  // 点击二级目录
  const setAcObj = useCallback(
    (info: MyObjRowType) => {
      setTopObj(info)
      setCode(info.sceneCode)
    },
    [setTopObj]
  )

  return (
    <div
      hidden={pageKey === '首页'}
      className={classNames(styles.Bottom, isShow ? '' : styles.BottomHide)}
    >
      <div className='B1box'>
        <div
          className='B1box_1 mySorrl'
          ref={srollRef}
          onWheel={e => mousemoveFu(e, srollRef.current)}
        >
          {codeArr.map(item => (
            <div
              onClick={() => setAcObj(item)}
              key={item.id}
              className={classNames(code === item.sceneCode ? 'activeTxt' : '')}
            >
              {/* 图片路径 */}
              <img src={item.type === 'kk' ? kankanImgUrl(item.sceneCode) : item.icon} alt='' />

              {/* 用图片懒加载，点击向下按钮之后 会有图片直接不加载的问题 */}
              {/* <LazyImg
                src={
                  item.type === 'kk'
                    ? kankanImgUrl(item.sceneCode)
                    : item.icon
                }
              /> */}
              <p>
                {code === item.sceneCode ? (
                  <span className='sorrlSpan'>
                    {item.sceneTitle}&emsp;&emsp;{item.sceneTitle}&emsp;&emsp;{item.sceneTitle}
                  </span>
                ) : (
                  <span>{item.sceneTitle}</span>
                )}
              </p>
            </div>
          ))}
        </div>
      </div>

      <div className='B1box2'>
        <div
          className='B1box2_1 mySorrl'
          ref={srollRef2}
          onWheel={e => mousemoveFu(e, srollRef2.current)}
        >
          {myList1.map(item => (
            <div
              className={classNames(ac1 === item.children[0] ? 'active' : '')}
              onClick={() => setAc1(item.children[0])}
              key={item.children[0]}
            >
              {item.name}
            </div>
          ))}
        </div>
      </div>

      <div className='B3box' onClick={() => setIsShow(!isShow)}>
        <img src={xiaImg} alt='' />
      </div>
    </div>
  )
}

const MemoBottom = React.memo(Bottom)

export default MemoBottom
