import React, { useState, useEffect } from 'react'
import request, { apis } from '@/utils/request'
import ActivityListItem from '@/components/ActivityListItem/index'
import ScrollPage from '@/components/ScrollPage/index'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function ShouYeHuoDong (props) {

  const [IsPullUp, setIsPullUp] = useState(false)
  const [IsPullDown, setIsPullDown] = useState(false)
  const [HasNextPage, setHasNextPage] = useState(true)
  const [PageNum, setPageNum] = useState(1)
  const [PageList, setPageList] = useState([])

  useEffect(() => {
    GetPageList(() => {
      setIsPullUp(false)
    })
  }, [PageNum])

  const GetPageList = (done = () => { }) => { // 获取列表
    request({ ...apis.getActivityList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
      if (PageNum === 1) {
        setPageList([...res.list])
      } else {
        setPageList(PageList.concat([...res.list]))
      }
      setHasNextPage(res.current - 0 < res.pages - 0)
      done()
    }).catch(() => {
      done()
    })
  }

  const OnRefresh = () => { // 页面下拉刷新
    setIsPullDown(true)
    setHasNextPage(true)
    setPageNum(1)
    if (PageNum === 1) {
      GetPageList(() => {
        setIsPullDown(false)
      })
    } else {
      setPageNum(1)
    }
  }

  const OnPullUp = () => {
    if (HasNextPage) {
      setIsPullUp(true)
      setPageNum(PageNum + 1)
    }
  }

  return (
    <view className='ShouYeHuoDong'>
      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
        <view className='ShouYeHuoDongContent'>
          {
            PageList.map((item, index) => (
              <view className='ListItem' key={`ActivityItem-${index}`}>
                <ActivityListItem Data={item}></ActivityListItem>
              </view>
            ))
          }
        </view>
      </ScrollPage>
    </view >
  )
}