import {useEffect, useState} from "react";
import {Tabs, Loading} from '@nutui/nutui-react-taro'
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import ArticleList from "./ArticleList";

const ArticleTabs = (props: any) => {
  const [loading, setLoading] = useState<boolean>(true)
  const [tab1value, setTab1value] = useState<string | number>('0')
  const [list, setList] = useState<CmsArticle[]>([])

  const reload = async (value) => {
    const {data} = props
    pageCmsArticle({categoryId: data[value].navigationId, page: 1, limit: 10}).then((res) => {
      res && setList(res?.list || [])
    })
      .catch(err => {
        console.log(err)
      })
      .finally(() => {
        setTab1value(value)
        setLoading(false)
      })
  }

  useEffect(() => {
    reload(0).then()
  }, []);

  if (loading) {
    return (
      <Loading className={'px-2'}>加载中</Loading>
    )
  }

  return (
    <>
      <Tabs
        value={tab1value}
        onChange={(value) => {
          reload(value).then()
        }}
      >
        {props.data?.map((item, index) => {
          return (
            <Tabs.TabPane title={item.categoryName} key={index}/>
          )
        })}
      </Tabs>
      <ArticleList data={list}/>
    </>
  )
}
export default ArticleTabs