import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router';
import autofit from 'autofit.js'
import Zmjk from "./zmjk"
import './index.less'

const MenuTitleCard = ({key,title}) => {
  return (
    <div className='menuItem_style' key={key} title={title}>
      {title}
    </div>
  )
}
export default function Home() {
  const title = [
    {
      title: '首页',
      key: '/home',
    },
    {
      title: '监测数据',
      key: '/mgr/jcsj/jcsj',
    }, {
      title: '安全监测',
      key: '/mgr/aqjc',
    },
    {
      title: '系统管理',
      key: '/mgr/xtgl/yhxx',
    },
    {
      title: '工程运行',
      key: '/mgr/gcyx/xxcx/jbqk',
    },
    {
      title: '设备维护',
      key: '/mgr/sbwh/wxyhgl/wxfabz',
    }, 
    
  ]
  const navigate = useNavigate();
  const jumpMenu = (item) => {
    navigate(item.key)
  }

  useEffect(() => {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el:'#daping-body',
      resize: true
  })
  }, [])
  
  return (
    <div className='daping-body' id='daping-body'>
      <div className='topMenu'>
        <div className='title'></div>
        <div className='title_name'></div>
        {title.map((item, i) => (
          <div key={item.key} className={'styles'+i} onClick={()=>jumpMenu(item)} style={{cursor:'pointer'}}>
            <MenuTitleCard title={item.title} />
          </div>
        ))}
      </div>
      <div className='content-box'>
        <Zmjk />
      </div>
    </div>
  )
}