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

import bg2Img from '../../assets/img/bg2.png'
import { Swiper } from 'antd-mobile'
import { A1_APIgetList, A1_APIgetTinfo } from '@/store/action/A1list'
import { A1listType } from './data'
import dayjs from 'dayjs'
import A1Mo from './A1Mo'
import { baseURL } from '@/utils/http'

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

  useEffect(() => {
    if (imgBoxRef.current) {
      // 1.获取屏幕的宽度
      const pageWidth = window.innerWidth >= 500 ? 500 : window.innerWidth

      // 顶部 图片的 宽高比为 1：0.92

      // 计算出图片的高度为
      const imgHeight = Math.round(pageWidth * 0.92)

      imgBoxRef.current.style.height = imgHeight + 'px'
    }
  }, [])

  // 跳到预约系统
  const toUrl = useCallback((url: string) => {
    window.location.href = url
  }, [])

  // 获取通知消息

  const getTinfoFu = useCallback(async () => {
    const res = await A1_APIgetTinfo()
    if (res.code === 0) {
      const info: A1listType = res.data

      if (info && info.id) {
        // 设置的显示通知
        if (info.display === 1) {
          // 设置的长期生效
          if (info.deadline === 1) {
            setOpenInfo(info)
          } else {
            // 设置的定期生效
            const staNum = dayjs(info.dateStart).valueOf()
            const endNum = dayjs(info.dateEnd).valueOf()
            const nowNum = dayjs().valueOf()
            if (nowNum >= staNum && nowNum <= endNum) {
              setOpenInfo(info)
            }
          }
        }
      }
    }
  }, [])

  // 获取轮播图列表

  const [imgList, setImgList] = useState({ list: [] as A1listType[], loding: false })

  const getListFu = useCallback(async () => {
    const res = await A1_APIgetList()
    if (res.code === 0) {
      setImgList({ list: res.data || [], loding: true })
    }
  }, [])

  useEffect(() => {
    getTinfoFu()
    getListFu()
  }, [getListFu, getTinfoFu])

  // 详情页的数据
  const [openInfo, setOpenInfo] = useState({} as A1listType)

  // 点击轮播图
  const lookInfoFu = useCallback((info: A1listType) => {
    if (info.type === 1) setOpenInfo(info)
  }, [])

  return (
    <div className={styles.A1home}>
      <div className='A1top' ref={imgBoxRef}>
        {imgList.loding ? (
          <Swiper loop autoplay={openInfo.id ? false : true} autoplayInterval={5000}>
            {imgList.list.length === 0 ? (
              <Swiper.Item>
                <img className='A1topImg' src={bg2Img} alt='' />
              </Swiper.Item>
            ) : (
              imgList.list.map(item => (
                <Swiper.Item key={item.id} onClick={() => lookInfoFu(item)}>
                  <img className='A1topImg' src={baseURL + item.thumb} alt='' />
                </Swiper.Item>
              ))
            )}
          </Swiper>
        ) : null}
      </div>

      <div className='tit'>请选择预约项目</div>

      <div className='txt' id='url1' onClick={() => toUrl('/web/#/exhi')}>
        <p>琴澳儿童健康生活</p>
        <p>展厅预约</p>
      </div>
      <div className='txt txt2' id='url2' onClick={() => toUrl('/web/#/')}>
        <p>琴澳儿童健康生活教育</p>
        <p>课堂预约</p>
      </div>
      <div className='txt txt3' id='url3' onClick={() => toUrl('/web/#/map')}>
        <p>交通指南</p>
      </div>
      <br />
      <br />
      <A1Mo closeFu={() => setOpenInfo({} as A1listType)} info={openInfo} />
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
