import {FC, useEffect, useState} from "react";
import {View} from "@tarojs/components";
import {HomeApi} from "@/api";
import {useReachBottom} from "@tarojs/taro";
import styles from './health.module.scss'
import Empty from "@/components/empty/empty";
import Spin from "@/components/spinner";
import VideoList from "@/components/videoList/videoList";

const Health: FC = () => {
  const [page, setPage] = useState(1)
  const [data, setData] = useState<VideList[]>([])
  const [total, setTotal] = useState(0)
  const [enable, setEnable] = useState(true)

  async function getData(page: number) {
    try {
      const res = await HomeApi.health(page, 10)
      setData([
        ...data,
        ...res.data,
      ])
      setTotal(res.total)
    } catch (e) {
    }
    setEnable(false)
  }

  useReachBottom(() => {
    data.length < total && setPage(page + 1)
  })

  useEffect(() => {
    getData(page)
  }, [page])


  return (
    <>
      <Spin enable={enable} overlay/>
      <View>
        {
          data.length > 0 ? <>
              <View className={styles.container}>
                {data.map(d => <VideoList data={d} errorType='health'/>)}
              </View>
              <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
            </>
            : <Empty name='暂无数据'/>
        }
      </View>
    </>
  )
}

export default Health
