import {useEffect, useState} from "react";
import Taro from '@tarojs/taro';
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {NavBar, Cell} from '@nutui/nutui-react-taro';
import {Text} from '@tarojs/components';
import {ArrowRight, ImageRectangle, Coupon, Follow} from '@nutui/icons-react-taro'
import './find.scss'
import navTo from "@/utils/common";

/**
 * 文章终极列表
 * @constructor
 */
const Find = () => {
  const [statusBarHeight, setStatusBarHeight] = useState<number>()
  const [loading, setLoading] = useState<boolean>(false)
  const [list, setList] = useState<CmsArticle[]>()

  const reload = async () => {
    setLoading(true)
    const article = await pageCmsArticle({categoryId: 4289, status: 0})
    if (article) {
      setList(article?.list)
      setLoading(false)
    }
  }

  useEffect(() => {
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight)
      },
    })
    reload().then(() => {
      console.log('初始化完成')
    })
  }, [])

  return (
    <>
      {loading && (<div>暂无数据</div>)}
      <NavBar
        fixed={false}
        style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
        onBackClick={() => {
        }}
      >
        <span>发现</span>
      </NavBar>
      {list && (
        <>
          <Cell title={
            <div style={{display: 'inline-flex', alignItems: 'center'}}>
              <ImageRectangle size={18}/>
              <Text className={'pl-3'} style={{fontSize: '16px'}}>好物推荐</Text>
            </div>
          } extra={<ArrowRight color="#cccccc" size={18}/>}/>
          <Cell
            title={
              <div style={{display: 'inline-flex', alignItems: 'center'}}>
                <Coupon size={18}/>
                <span className={'pl-3'} style={{fontSize: '16px'}}>权益中心</span>
              </div>
            }
            extra={<ArrowRight color="#cccccc" size={18}/>}
            onClick={() => {
              navTo('/shop/shopArticle/index', true)
            }}
          />
          <Cell title={
            <div style={{display: 'inline-flex', alignItems: 'center'}}>
              <Follow size={18}/>
              <span className={'pl-3'} style={{fontSize: '16px'}}>我的收藏</span>
            </div>
          } extra={<ArrowRight color="#cccccc" size={18}/>}/>
        </>
      )}
    </>
  )
}
export default Find