import {useEffect, useState} from 'react'
import {Grid} from '@nutui/nutui-react-taro'
import {Avatar, Divider} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components'
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
import navTo from "@/utils/common";

const MyGrid = () => {
  const [list, setList] = useState<CmsNavigation[]>([])
  const reload = async () => {
    // 读取首页菜单
    const home = await listCmsNavigation({model: 'index'});
    const homeId = home[0].navigationId;
    if(homeId){
      const menu = await listCmsNavigation({home: 0, parentId: homeId, hide: 0})
      setList(menu)
    }
  }

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

  if (list.length == 0) {
    return <></>
  }

  // @ts-ignore
  return (
    <>
      <View className={'p-4'}>
        <View className={' bg-white rounded-2xl py-4'}>
          <View className={'title font-medium px-4'}>功能菜单</View>
          <Divider />
          <Grid columns={3} square style={{
            // @ts-ignore
            '--nutui-grid-border-color': 'transparent',
          }}>
            {
              list.map((item) => (
                <Grid.Item key={item.navigationId} onClick={() => navTo(`${item.path}`,true)}>
                  <Avatar src={item.icon} className={'mb-2'} shape="square" style={{
                    backgroundColor: 'transparent',
                  }}/>
                  <Text className={'text-gray-600'} style={{
                    fontSize: '16px'
                  }}>{item.title}</Text>
                </Grid.Item>
              ))
            }
          </Grid>
        </View>
      </View>
    </>
  )
}
export default MyGrid
