import Taro from '@tarojs/taro'
import {useEffect, useState} from 'react'
import {Image} from '@nutui/nutui-react-taro'
import {Loading} from '@nutui/nutui-react-taro'
import {listCmsNavigation} from "@/api/cms/cmsNavigation"
import {CmsNavigation} from "@/api/cms/cmsNavigation/model"

const Page = () => {

  const [loading, setLoading] = useState<boolean>(true)
  const [navItems, setNavItems] = useState<CmsNavigation[]>([])

  const reload = async () => {
    // 读取栏目
    const menus = await listCmsNavigation({model: 'links', hide: 0});
    setNavItems(menus || [])
  };

  const onNav = (row: CmsNavigation) => {
    console.log(row, 'eee')
    Taro.navigateTo({url: `${row.path}`})
  }


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

  return (
    loading ? (<Loading>加载中</Loading>) :
      <div className={'p-3'}>
        <div className={'rounded-2xl'}>
          <div className={'flex justify-between pb-2 px-1'}>
            {
              navItems.map((item, index) => (
                <div key={index} className={'text-center'} onClick={() => onNav(item)}>
                  <div className={'flex flex-col justify-center items-center'}>
                    <Image src={item.icon} height={36} width={36}/>
                    <div className={'mt-2 text-gray-600'} style={{fontSize: '14px'}}>{item?.title}</div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
  )
}
export default Page
