import {Grid} from '@nutui/nutui-react-taro'
import {Avatar} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components'
import navTo from "@/utils/common";

interface MenuItem {
  id: number;
  title: string;
  icon: string;
  path: string;
}

// 硬编码首页菜单数据
const menuList: MenuItem[] = [
  {
    id: 1,
    title: '推荐客户',
    icon: 'https://oss.wsdns.cn/20260330/5f54527123864193b0a2078f812b117f.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
    path: '/dealer/customer/add'
  },
  {
    id: 2,
    title: '客户列表',
    icon: 'https://oss.wsdns.cn/20260330/24485bb4684d4ae2a64cc7dd49ec4d3d.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
    path: '/dealer/customer/index'
  },
  {
    id: 3,
    title: '邀请好友',
    icon: 'https://oss.wsdns.cn/20260330/64cac0d5cbe645af8a574a257cd00302.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
    path: '/dealer/team/index'
  },
  {
    id: 4,
    title: '个人中心',
    icon: 'https://oss.wsdns.cn/20260330/6b198116f2d94b1e942c55ebe2f73728.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
    path: '/pages/user/user'
  }
];

const MyGrid = () => {
  return (
    <>
      <View className={'p-0'}>
        <View className={' bg-white py-1'}>
          <Grid columns={4} square style={{
            // @ts-ignore
            '--nutui-grid-border-color': 'transparent',
          }}>
            {
              menuList.map((item) => (
                <Grid.Item key={item.id} onClick={() => navTo(`${item.path}`,true)}>
                  <Avatar src={item.icon} className={'mb-1'} shape="square" style={{
                    backgroundColor: 'transparent',
                  }}/>
                  <Text className={'text-gray-600'} style={{
                    fontSize: '14px'
                  }}>{item.title}</Text>
                </Grid.Item>
              ))
            }
          </Grid>
        </View>
      </View>
    </>
  )
}
export default MyGrid
