import {Image} from '@nutui/nutui-react-taro'
import {Loading} from '@nutui/nutui-react-taro'
import {goTo} from "@/utils/navigation"
import {useShopInfo} from "@/hooks/useShopInfo"

const Page = () => {
  // 使用 useShopInfo hooks 获取导航数据
  const {
    loading: shopLoading,
    error,
    getNavigation
  } = useShopInfo()

  // 获取顶部导航菜单
  const navigation = getNavigation()
  const home = navigation.topNavs.find(item => item.model == 'index')
  const navItems = navigation.topNavs.filter(item => item.parentId == home?.navigationId) || []

  const onNav = (item: any) => {
    if (item.path) {
      return goTo(`${item.path}`)
    }
  }

  // 处理错误状态
  if (error) {
    return (
      <div className={'p-2 text-center text-red-500'}>
        加载导航菜单失败
      </div>
    )
  }

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