import detailBackground from "~/assets/images/public/bigScreen/bg9.png";
import summaryBackground from "~/assets/images/public/bigScreen/bg10.png";
import warningIcon from "~/assets/images/public/bigScreen/ico3.png";
import Panel from "../../Panel";
import "./index.less";

/** 展示当前重大危险源及报警处置的固定大屏信息。 */
function HazardSourcePanel() {
  return (
    <Panel
      title="重大危险源运行情况"
      className="index-info-left-panel__hazard-source"
    >
      <div className="index-info-hazard-source__warning">
        <img src={warningIcon} alt="" />
        北区二号罐液位过低
      </div>
      <div className="index-info-hazard-source__group">
        <HazardSummary
          background={summaryBackground}
          title="二级重大危险源（1个）"
          count="3"
          disabled="2"
        />
        <HazardSummary
          background={summaryBackground}
          title="三级重大危险源（2个）"
          count="10"
          disabled="0"
        />
      </div>
      <div className="index-info-hazard-source__group">
        <div
          className="index-info-hazard-source__detail-card"
          style={{ backgroundImage: `url(${detailBackground})` }}
        >
          <div>
            东罐区二号罐
            <span>正常</span>
          </div>
          <div>
            东罐区二号罐
            <b>液位低</b>
          </div>
          <div>
            东罐区二号罐
            <span>正常</span>
          </div>
        </div>
        <div
          className="index-info-hazard-source__detail-card"
          style={{ backgroundImage: `url(${detailBackground})` }}
        >
          <strong>报警处置情况</strong>
          <p>温度待处置数/报警个数：0/0</p>
          <p>压力待处置数/报警个数：0/0</p>
          <p>液位待处置数/报警个数：1/1</p>
        </div>
      </div>
    </Panel>
  );
}

function HazardSummary({ background, title, count, disabled }) {
  return (
    <div
      className="index-info-hazard-source__summary-card"
      style={{ backgroundImage: `url(${background})` }}
    >
      <strong>{title}</strong>
      <div className="index-info-hazard-source__statistics">
        <span>
          储罐数：
          {count}
        </span>
        <span>
          再用数：
          {count}
        </span>
        <span>
          停用数：
          <b>{disabled}</b>
        </span>
      </div>
    </div>
  );
}

export default HazardSourcePanel;
