import {useEffect, useState} from "react";
import {ArrowRight} from '@nutui/icons-react-taro'
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'

/**
 * 文章终极列表
 * @constructor
 */
const Article = () => {
  const {params} = useRouter();
  const [categoryId, setCategoryId] = useState<number>(3494)
  const [list, setList] = useState<CmsArticle[]>([])

  const reload = () => {
    if (params.id) {
      setCategoryId(Number(params.id))
    }
    pageCmsArticle({categoryId}).then(res => {
      if (res?.list) {
        setList(res?.list)
      }
    })
  }

  useEffect(() => {
    reload()
  }, [])

  return (
    <div className={'px-3 mb-10'}>
      <div className={'flex flex-col justify-between items-center bg-white rounded-lg p-4'}>
        <div className={'bg-white min-h-36 w-full'}>
          {
            list.map((item, index) => {
              return (
                <div key={index} className={'flex justify-between items-center py-2'} onClick={() => Taro.navigateTo({url: `/cms/help?id=${item.articleId}`}) }>
                  <div className={'text-sm'}>{item.title}</div>
                  <ArrowRight color={'#cccccc'} size={18} />
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
export default Article
