import cls from "./index.module.css";
import GradientText from "../../../Common/GradientText";
import { useSelector } from "react-redux";

function SmokeHandle(props) {
  const smokeInfo = useSelector((state) => state.smoke?.info);
  return (
    <div className={" " + cls.smoke} style={{ color: "#fff" }}>
      <span
        className={cls.shadowBorder}
        style={{
          gridRow: "1 / 3",
          paddingTop: "96px",
          paddingLeft: "32px",
          userSelect: "none",
        }}
      >
        <GradientText text="烟气处理" />
      </span>
      <span
        className={cls.shadowBorder + " " + cls.infoText}
        style={{ letterSpacing: "12px" }}
      >
        <span style={{ lineHeight: 1.5 }}>氧 气 含 量</span>{" "}
        <span style={{ lineHeight: 1.5 }}>{smokeInfo?.O2_float || 0}%</span>
      </span>
      <span className={cls.shadowBorder + " " + cls.infoText}>
        <span style={{ lineHeight: 1.5 }}>氮 氧 化 物 浓 度</span>{" "}
        <span style={{ lineHeight: 1.5 }}>
          {smokeInfo?.NOX_float || 0}mg/m³
        </span>
      </span>
      <span className={cls.shadowBorder + " " + cls.infoText}>
        <span style={{ lineHeight: 1.5 }}>二 氧 化 硫 浓 度</span>{" "}
        <span style={{ lineHeight: 1.5 }}>
          {smokeInfo?.SO2_float || 0}mg/m³
        </span>
      </span>
      <span className={cls.shadowBorder + " " + cls.infoText}>
        <span style={{ lineHeight: 1.5 }}>颗 粒 物 浓 度:</span>{" "}
        <span style={{ lineHeight: 1.5 }}>
          {smokeInfo?.dust_float || 0}mg/m³
        </span>
      </span>
    </div>
  );
}

export default SmokeHandle;