import cls from "./index.module.css";
import GradientText from "../../../Common/GradientText";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import eIcon1 from "../../../../assets/Icon/dontknowwhatitis.png";
import eIcon2 from "../../../../assets/Icon/lightnen.png";

function Energy(props) {
  const [isPage1] = useState(props.page === 1);
  const energyInfo = useSelector((state) => state.energy?.info);

  // useEffect(() => {
  //   const timer = setInterval(() => {
  //     setIsPage1((pre) => !pre);
  //   }, 10000);

  //   return () => {
  //     clearInterval(timer);
  //   }
  // }, []);

  return (
    <div className={" " + cls.layout} style={{ color: "#fff" }}>
      <span
        className={`${cls.shadowBorder} ${cls.border}`}
        style={{
          gridRow: "1 / 3",
          userSelect: "none",
          textAlign: "center",
          paddingTop: "96px",
        }}
      >
        {isPage1 ? (
          <img src={eIcon1} width={32} alt="eicon1" />
        ) : (
          <img src={eIcon2} width={32} alt="eicon2" />
        )}
        <GradientText text={"\u2002\u2002能源"} />
      </span>
      {!isPage1 && (
        <div
          style={{
            gridRow: "1 / 3",
            gridColumn: "2 / 5",
            display: "grid",
            gridTemplateRows: "1fr 1fr",
            gridTemplateColumns: "1fr 1fr",
            gap: "6px",
          }}
        >
          <div className={cls.shadowBorder + " " + cls.infoText}>
            <span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(昨日)/kWh</span>
            <span
              style={{
                lineHeight: 1.5,
                width: "180px",
                wordWrap: "break-word",
              }}
            >
              {(+energyInfo?.elecQty6)?.toFixed(2) || 0}
            </span>
          </div>
          <div className={cls.shadowBorder + " " + cls.infoText}>
            <span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(昨日)/kWh</span>
            <span
              style={{
                lineHeight: 1.5,
                width: "180px",
                wordWrap: "break-word",
              }}
            >
              {(+energyInfo?.elecQty7)?.toFixed(2) || 0}
            </span>
          </div>
          <div
            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
          >
            <span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(总量)/kWh</span>
            <span
              style={{
                lineHeight: 1.5,
                width: "180px",
                wordWrap: "break-word",
              }}
            >
              {(+energyInfo?.elecQty4)?.toFixed(2) || 0}
            </span>
          </div>
          <div
            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
          >
            <span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(总量)/kWh</span>
            <span
              style={{
                lineHeight: 1.5,
                width: "180px",
                wordWrap: "break-word",
              }}
            >
              {(+energyInfo?.elecQty5)?.toFixed(2) || 0}
            </span>
          </div>
        </div>
      )}
      {isPage1 && (
        <>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "6px",
              gridRow: "1 / 3",
            }}
          >
            <div
              style={{ flex: 1 }}
              className={cls.shadowBorder + " " + cls.infoText}
            >
              <span style={{ lineHeight: 1.5 }}>余热发电(实时)/kWh</span>
              <span
                style={{
                  lineHeight: 1.5,
                  width: "180px",
                  wordWrap: "break-word",
                }}
              >
                {(+energyInfo?.elecQty1)?.toFixed(2) || 0}
              </span>
            </div>
            <div
              style={{ flex: 1 }}
              className={
                cls.shadowBorder + " " + cls.infoText + " " + cls.border
              }
            >
              <span style={{ lineHeight: 1.5 }}>余热发电(总量)/kWh</span>
              <span
                style={{
                  lineHeight: 1.5,
                  width: "180px",
                  wordWrap: "break-word",
                }}
              >
                {(+energyInfo?.elecQty3)?.toFixed(2) || 0}
              </span>
            </div>
          </div>
          <span className={cls.shadowBorder + " " + cls.infoText}>
            <span style={{ lineHeight: 1.5 }}>水耗量/Km³</span>
            <span style={{ lineHeight: 1.5 }}>
              {(+energyInfo?.waterQty)?.toFixed(2) || 0}
            </span>
          </span>
          <span className={cls.shadowBorder + " " + cls.infoText}>
            <span style={{ lineHeight: 1.5 }}>天然气I/Nm³</span>
            <span style={{ lineHeight: 1.5 }}>
              {energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"}
            </span>
          </span>
          <span
            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
          >
            <span style={{ lineHeight: 1.5 }}>电耗量/kWh</span>
            <span style={{ lineHeight: 1.5 }}>
              {(+energyInfo?.elecQty2)?.toFixed(2) || 0}
            </span>
          </span>
          <span
            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
          >
            <span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span>
            <span style={{ lineHeight: 1.5 }}>
              {energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"}
            </span>
          </span>
        </>
      )}
    </div>
  );
}

export default Energy;