import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
import classNmaes from 'classnames'
import A1info from './A1info'

function A1home() {
  const domRef = useRef<HTMLDivElement>(null)

  const [moveId, setMoveId] = useState(0)

  // apng动画展示
  const [apng, setApng] = useState(false)

  useEffect(() => {
    const urlAll = window.location.href
    if (urlAll.includes('?m=')) {
      const idArr = urlAll.split('?m=')
      if (idArr && idArr[1]) {
        const id = Number(idArr[1])
        const index = myData.homeData.findIndex(v => v.id === id)
        if (index > -1 && domRef.current) {
          setMoveId(id)

          setTimeout(() => {
            // setMoveId(0)
            setApng(true)
            // console.log('xxxx')
          }, 1500)

          domRef.current.scrollTo({
            top: (index - 1) * 190,
            behavior: 'smooth'
          })
        }
      }
    }
  }, [])

  // 打开详情
  const [open, setOpen] = useState({} as HomeDataRow)

  // 终止动画
  const stopMoveFu = useCallback(() => {
    // setMoveId(0)
    // setApng(false)
  }, [])

  return (
    <div
      className={styles.A1home}
      style={{ backgroundImage: `url(${myUrl + myData.homeBg})` }}
      onTouchEnd={() => {
        stopMoveFu()
      }}
    >
      <div className='homeTitleImg'>
        <img src={myUrl + myData.homeTitleImg} alt='' />
      </div>

      <div className='A1main' ref={domRef}>
        {myData.homeData.map(v => (
          <div
            onClick={() => {
              history.replace(`/info/${v.id}`)
              // setOpen(v)
              stopMoveFu()
            }}
            className={classNmaes('A1row', moveId === v.id ? 'A1rowAcMove' : '')}
            key={v.id}
          >
            <div className='A1Rimg'>
              <img className='A1Rimg_1' src={myUrl + v.cover} alt='' />
              <img
                className={classNmaes(
                  'A1Rimg_2',
                  moveId === v.id && apng ? 'A1Rimg_2Ac' : ''
                )}
                src={myUrl + 'img/200.png'}
                alt=''
              />
            </div>
            <div className='A1Rtxt'>
              <div
                className={classNmaes('A1Rtxt1')}
                style={{ backgroundImage: `url(${myUrl + myData.nameImg})` }}
              >
                {v.name}
              </div>

              <div className='A1Rtxt2'>
                <div>{v.txt}</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 打开详情 */}
      {open.id ? <A1info info={open} closeFu={() => setOpen({} as HomeDataRow)} /> : null}
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
