import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Swiper } from 'antd-mobile'
import { A1listType, myInfo } from '@/utils/history'
import classNames from 'classnames'
import { EyeOutlined } from '@ant-design/icons'
import CountUp from 'react-countup'
import { A1_APIgetNumList } from '@/store/action/A1list'
import logoImg from '../../assets/img/logo.png'
import flooImg from '../../assets/img/flooImg.jpg'

type NumListRowType = {
  num: string
  showVisit: number
}

function A1home() {
  const [list, setList] = useState<A1listType[]>([])

  const listRef = useRef<A1listType[]>([])
  useEffect(() => {
    listRef.current = list
  }, [list])

  // 获取全部访问量
  const getNumListFu = useCallback(async (base?: boolean) => {
    // 参数 base =》第一次进页面

    const res = await A1_APIgetNumList()
    if (res.code === 0) {
      const arr: NumListRowType[] = res.data

      const listTemp = [...myInfo.swArr]

      arr.forEach(v1 => {
        listTemp.forEach(v2 => {
          if (v2.code === v1.num) {
            if (!base) {
              const listRefNum = listRef.current.find(c => c.code === v1.num)!.newNum
              v2.oldNum = listRefNum
              if (listRefNum !== v1.showVisit) v2.changeSta = true
            }
            v2.newNum = v1.showVisit
          }
        })
      })

      setList(listTemp)
    }
  }, [])

  useEffect(() => {
    getNumListFu(true)
  }, [getNumListFu])

  // 定时发送
  const timeRef = useRef(-1)

  useEffect(() => {
    clearInterval(timeRef.current)
    timeRef.current = window.setInterval(() => {
      getNumListFu()
    }, 120000)
    return () => {
      clearInterval(timeRef.current)
    }
  }, [getNumListFu])

  // 动画是否在进行中
  const moveStaFu = useCallback(
    (code: string) => {
      const arr = [...list]
      list.forEach(v => {
        if (v.changeSta && v.code === code) v.changeSta = false
      })
      setList(arr)
    },
    [list]
  )

  // 新窗口打开页面
  const openPage = useCallback((url: string) => {
    window.open(url, '_blank')
  }, [])

  // 跳甲方链接
  const toNewUrl = useCallback(() => {
    window.open(
      'https://m.cctvnews.cctv.com/collect/index.html?actNumber=15091951045133564423',
      '_blank'
    )
  }, [])

  return (
    <div className={styles.A1home}>
      <div className='A1main'>
        <div className='A1top'>
          <Swiper loop autoplay>
            {myInfo.swArr
              .filter(v => v.isSW)
              .map(item => (
                <Swiper.Item key={item.id}>
                  <div
                    //  onClick={() => history.push(`/scene/${item.id}`)}
                    onClick={() => openPage(item.link)}
                  >
                    <img
                      src={`${myInfo.serverUrl}/bwCN/myData/img/${item.id}h.jpg`}
                      alt=''
                    />
                  </div>
                </Swiper.Item>
              ))}
          </Swiper>
        </div>

        <div className='A1box1'>
          <div className='A1tit'>展览精选</div>
          <div className='A1_1list'>
            {list
              .filter(v => v.loc === 1)
              .map(item => (
                <div className='A1_1row' key={item.id}>
                  <img
                    src={`${myInfo.serverUrl}/bwCN/myData/img/${item.id}s.jpg`}
                    alt=''
                    // onClick={() => history.push(`/scene/${item.id}`)}
                    onClick={() => openPage(item.link)}
                  />
                  <div className='A1_1row1'>{item.name}</div>
                  <div className='A1_1row2'>{item.partOf}</div>
                  <div
                    className={classNames('A1_1row3', item.changeSta ? 'A1_1row3Ac' : '')}
                  >
                    <EyeOutlined rev={undefined} />
                    &nbsp;
                    <CountUp
                      onEnd={() => moveStaFu(item.code)}
                      start={item.oldNum}
                      end={item.newNum}
                    />
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div className='FlooImg' onClick={toNewUrl}>
          <img src={flooImg} alt='' />
        </div>

        {/* <div onClick={() => getNumListFu()}>15456465</div> */}
        <div className='A1BottomTxt'>持续上新，敬请期待</div>

        {/* 公司logo */}
        <div className='A1logo'>
          <img src={logoImg} alt='' />
        </div>
      </div>
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
