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

const Page = () => {

    const [navItems, setNavItems] = useState<CmsNavigation[]>([])

    const reload = () => {
        getSiteInfo().then(res => {
            setNavItems(res.topNavs || []);
        })
    };

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

    return (
        <>
            <div className={'py-2 my-3 mx-2'}>
                <div className={'bg-white grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-2'}>
                    {
                        navItems?.map((item, index) => (
                            <div
                                key={item.navigationId || index}
                                className={'flex flex-col justify-start items-center'}
                                onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}
                            >
                                <Image
                                    className={'shadow-xl rounded-lg'}
                                    style={{
                                        borderRadius: '8px',
                                        width: '90px',
                                        height: '90px',
                                        objectFit: 'cover'
                                    }}
                                    src={item.icon}
                                    mode="aspectFill"
                                />
                                <div className={'mt-2 text-gray-700'} style={{fontSize: '14px'}}>
                                    {item?.title}
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
        </>
    )
}
export default Page