import CountUp from "react-countup";
import yardIcon from "~/assets/images/map_bi/content/icon29.png";
import dockIcon from "~/assets/images/map_bi/content/icon30.png";
import controlIcon from "~/assets/images/map_bi/content/icon31.png";
import cornerIcon from "~/assets/images/map_bi/content/icon32.png";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const statistics = [
  { image: yardIcon, name: "堆场区", peopleCount: 123, vehicleCount: 45 },
  { image: dockIcon, name: "码头区", peopleCount: 141, vehicleCount: 43 },
  { image: controlIcon, name: "翻控区", peopleCount: 114, vehicleCount: 54 },
];

/** 展示各封闭区域的人员与车辆数量。 */
function ClosedAreaStatsPanel() {
  return (
    <Panel title="封闭区域统计" className="port-closed-area__statistics">
      <div className="port-closed-area-stats__list">
        {statistics.map(item => (
          <div className="port-closed-area-stats__item" key={item.name}>
            <img
              className="port-closed-area-stats__image"
              src={item.image}
              alt=""
            />
            <div className="port-closed-area-stats__info">
              <div className="port-closed-area-stats__name">{item.name}</div>
              <div className="port-closed-area-stats__counts">
                <div>
                  <div>人数</div>
                  <div>
                    <CountUp end={item.peopleCount} />
                  </div>
                </div>
                <div>
                  <div>车辆数</div>
                  <div>
                    <CountUp end={item.vehicleCount} />
                  </div>
                </div>
              </div>
            </div>
            <img
              className="port-closed-area-stats__corner port-closed-area-stats__corner--top-left"
              src={cornerIcon}
              alt=""
            />
            <img
              className="port-closed-area-stats__corner port-closed-area-stats__corner--top-right"
              src={cornerIcon}
              alt=""
            />
            <img
              className="port-closed-area-stats__corner port-closed-area-stats__corner--bottom-left"
              src={cornerIcon}
              alt=""
            />
            <img
              className="port-closed-area-stats__corner port-closed-area-stats__corner--bottom-right"
              src={cornerIcon}
              alt=""
            />
          </div>
        ))}
      </div>
    </Panel>
  );
}

export default ClosedAreaStatsPanel;
