import employeeIcon from "~/assets/images/map_bi/content/img1ico1.png";
import vehicleIcon from "~/assets/images/map_bi/content/img1ico2.png";
import internalIcon from "~/assets/images/map_bi/content/img1ico3.png";
import contractorIcon from "~/assets/images/map_bi/content/img1ico4.png";
import temporaryIcon from "~/assets/images/map_bi/content/img1ico5.png";
import iconBackground from "~/assets/images/map_bi/content/img2.png";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const statistics = [
  { title: "在线员工", image: employeeIcon, count: "-" },
  { title: "在线车辆", image: vehicleIcon, count: "-" },
  { title: "内部人员", image: internalIcon, count: "-" },
  { title: "外协人员", image: contractorIcon, count: "-" },
  { title: "临时人员", image: temporaryIcon, count: "-" },
];

/** 展示人员定位相关的基础统计信息。 */
function LocationInfoPanel() {
  return (
    <Panel title="定位基础信息" className="port-personnel__location-info">
      <div className="port-location-info__options">
        {statistics.map(item => (
          <div key={item.title} className="port-location-info__option">
            <div
              className="port-location-info__icon"
              style={{ backgroundImage: `url(${iconBackground})` }}
            >
              <img src={item.image} alt="" />
            </div>
            <div className="port-location-info__info">
              <div className="port-location-info__label">{item.title}</div>
              <div className="port-location-info__count">{item.count}</div>
            </div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

export default LocationInfoPanel;
