import cls from "./index.module.css";
import GradientText from "../../../Common/GradientText";
import { useSelector } from "react-redux";
import eIcon1 from "../../../../assets/Icon/oilstation.png";

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

export default SmokeHandle;