import cls from "./index.module.scss";
import { useSelector } from "react-redux";

const EnergyCostRealtime = () => {
  const energyInfo = useSelector((state) => state.energy?.info);

  return (
    <div className={`${cls.cost__info} flex`}>
      <div
        className={`${cls.info__item} flex flex-col justify-center items-center`}
        style={{ width: "112px", padding: 0 }}
      >
        <span
          style={{
            fontSize: "20px",
            letterSpacing: "2px",
            lineHeight: 1.5,
          }}
        >
          余热发电
        </span>
        <span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}>
          {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
        </span>
      </div>
      <div className={cls.info__item_groups}>
        <div className={cls.info__item}>
          <i
            style={{
              fontSize: "18px",
              fontStyle: "normal",
              paddingRight: "6px",
            }}
          >
            水耗量
          </i>
          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
            {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
          </span>
        </div>
        <div className={cls.info__item}>
          <i
            style={{
              fontSize: "18px",
              fontStyle: "normal",
              paddingRight: "6px",
            }}
          >
            天然气I
          </i>
          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
            {energyInfo?.ngQty1 || "0Nm³"}
          </span>
        </div>
        <div className={cls.info__item}>
          <i
            style={{
              fontSize: "18px",
              fontStyle: "normal",
              paddingRight: "6px",
            }}
          >
            电耗量
          </i>
          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
            {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
          </span>
        </div>
        <div className={cls.info__item}>
          <i
            style={{
              fontSize: "18px",
              fontStyle: "normal",
              paddingRight: "6px",
            }}
          >
            天然气II
          </i>
          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
            {energyInfo?.ngQty2 || "0Nm³"}
          </span>
        </div>
      </div>
    </div>
  );
};

export default EnergyCostRealtime;