import { observer } from "mobx-react";
import "./home.less";
import MapContainer from "@/components/map/MapComponent";
import HomeLeft from "@/pages/home/homeLeft/home_left";
import HomeRight from "@/pages/home/homeRigrt/home_right";
import HomeBottom from "@/pages/home/homeBottom/home_bottom";
import image2 from "@/static/title_line@1x.png";
import { SettingOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router";
import Weather from "./homeLeft/weather";
import Timer from "./homeLeft/timer";
import HomeVideo from "./home_video";

const Home = observer(() => {
  const navigate = useNavigate();
  return (
    <div className="contents_center">
      <div className="map_container_t">
        <div className="map_container_t_l">
          <Timer />
        </div>
        <div className="map_container_t_c">
          <img className="twp on_to" src={image2} alt="" />
          <span>黄水镇微网实格应急处突综合指挥服务平台</span>
          <img className="twp" src={image2} alt="" />
        </div>
        <div className="map_container_t_r">
          <Weather />
          <SettingOutlined
            onClick={() => {
              navigate("admin/user");
            }}
            style={{ fontSize: "20px", color: "#f9f9f9", cursor: "pointer" }}
          />
        </div>
      </div>
      <div className="scr">
        <div className="scrolling-text">
          <span>
            仓库3，2号货架,单兵装备，即将临期，
            仓库4，1号货架,单兵装备，即将临期，
            仓库2，3号货架,单兵装备，即将临期
          </span>
        </div>
      </div>
      <div className="map_container_l">
        <HomeLeft />
      </div>
      <MapContainer />
      <div className="map_video_container">
        <HomeVideo />
      </div>
      <div className="map_container_r">
        <HomeRight />
      </div>
      <div className="map_container_b">
        <HomeBottom />
      </div>
    </div>
  );
});

export default Home;