import React, { useState, useEffect, useMemo } from 'react';
import { Card, Table, Empty, Button, Modal, message } from 'antd';
import menuStyle from './index.less';
import { connect, useNavigate } from 'umi';
import { getToken } from '@/utils/utils';
const noIcon = require('@/assets/UnityMenu/noIcon.png');
function HomePage(props) {
  let navigate = useNavigate();
  const curMenu = [
    {
      id: 1,
      name: '项目立项',
      active: true,
      click: () => {
        window.open(
          ` http://120.55.44.4:8899/#/purchase/home/approval/list?JWT-TOKEN=${getToken()}`,
        );
      },
      Icon: require('@/assets/UnityMenu/project.png'),
    },
    {
      id: 5,
      name: '工时管理',
      active: true,
      click: () => {
        window.open(
          `http://120.55.44.4:8899/#/purchase/home/work-hours?JWT-TOKEN=${getToken()}`,
        );
      },
      Icon: require('@/assets/UnityMenu/time.png'),
    },
    {
      id: 6,
      name: '供应商管理',
      active: true,
      click: () => {
        navigate('/manufacturer');
      },
      Icon: require('@/assets/UnityMenu/Manufacturer.png'),
    },
    {
      id: 2,
      name: '合同管理',
      active: true,
      click: () => {
        navigate('/contract-manager');
      },
      Icon: require('@/assets/UnityMenu/agreement.png'),
    },
    {
      id: 4,
      name: 'BOM清单',
      active: true,
      click: () => {
        window.open(
          `http://120.55.44.4:8896/#/bom/home?JWT-TOKEN=${getToken()}`,
        );
      },
      Icon: require('@/assets/UnityMenu/Bom.png'),
    },
    {
      id: 3,
      name: 'OA审批',
      active: true,
      click: () => {
        navigate('/oa');
      },
      Icon: require('@/assets/UnityMenu/OA.png'),
    },
    {
      id: 7,
      name: '文档管理',
      active: true,
      click: () => {
        navigate('/fileManagement');
      },
      Icon: require('@/assets/UnityMenu/transfer.png'),
    },
    {
      id: 8,
      name: 'PSR管理',
      active: true,
      click: () => {
        navigate('/psrManage');
      },
      Icon: require('@/assets/UnityMenu/system.png'),
    },
    {
      id: 9,
      name: '个人中心',
      active: true,
      click: () => {
        navigate('/profile');
      },
      Icon: require('@/assets/UnityMenu/userCenter.png'),
    },
  ];
  return (
    <div className={menuStyle.background}>
      <div className={menuStyle.menuContent}>
        <MenuContent list={curMenu}></MenuContent>
      </div>
    </div>
  );
}

function MenuContent({ list }) {
  const row = useMemo(() => {
    const result = [];
    for (let i = 0; i < list.length; i += 5) {
      result.push(list.slice(i, i + 5));
    }
    return result;
  }, [list]);
  return row.map((rowList) => (
    <div className={menuStyle.wrap}>
      {rowList.map((item) => (
        <MenuItem key={item.id} item={item} />
      ))}
      <div className={menuStyle.empty}></div>
      <div className={menuStyle.empty}></div>
      <div className={menuStyle.empty}></div>
    </div>
  ));
}

function MenuItem({ item }) {
  return (
    <div className={menuStyle.item}>
      <div
        onClick={() => item.click?.(item)}
        className={menuStyle.menu}
        style={item.active ? {} : { cursor: 'not-allowed' }}
      >
        <img
          className={menuStyle.pic}
          src={
            item.active ? item.Icon : require('@/assets/UnityMenu/newModel.png')
          }
          style={item.active ? {} : { cursor: 'not-allowed' }}
        />
      </div>
      <div style={{ marginTop: 22, width: 152, textAlign: 'center' }}>
        <span
          onClick={() => item.click?.(item)}
          className={menuStyle.menuFriName}
          style={item.active ? {} : { color: '#6081B2', cursor: 'not-allowed' }}
        >
          {item.name}
        </span>
      </div>
    </div>
  );
}

export default HomePage;