import closedBackground from "~/assets/images/public/bigScreen/bg11.png";
import gateBackground from "~/assets/images/public/bigScreen/bg12.png";
import Panel from "../../Panel";
import "./index.less";

/** 展示当前口门与封闭区的固定统计信息。 */
function GatePanel() {
  const items = [
    ["一级口门进出统计", gateBackground],
    ["进入申请待审批", gateBackground],
    ["封闭区域人员情况", closedBackground],
    ["封闭区域作业情况", closedBackground],
  ];
  return (
    <Panel
      title="当前口门、封闭区情况"
      className="index-info-right-panel__gate"
    >
      <div className="index-info-gate__list">
        {items.map(([title, background]) => (
          <div
            className="index-info-gate__item"
            style={{ backgroundImage: `url(${background})` }}
            key={title}
          >
            <strong>{title}</strong>
            <div>
              <span>人数：2100</span>
              <span>车数：1125</span>
            </div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

export default GatePanel;
