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

const EnergyCostRealtime = () => {
  const [isPage1, setIsPage1] = useState(false);
  const energyInfo = useSelector((state) => state.energy?.info);

  // function handleClick() {
  //   setIsPage1((pre) => !pre);
  // }

  useEffect(() => {
    const timer = setInterval(() => {
      setIsPage1(pre => !pre);
    }, 10000);
    
    return () => {
      clearInterval(timer);
    }
  }, []);
  return (
    <>
      {/* <Arrow key="left" direction="left" onClick={handleClick} />
      <Arrow key="right" direction="right" onClick={handleClick} /> */}
      {isPage1 && (
        <div className={`${cls.cost__info} flex`}>
          <div className={`${cls.info__item_groups_col1}`}>
            <div className={cls.info__item}>
              <i
                style={{
                  fontSize: "18px",
                  fontStyle: "normal",
                  paddingRight: "6px",
                }}
              >
                余热发电(昨日)
              </i>
              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
              </span>
            </div>

            <div className={cls.info__item}>
              <i
                style={{
                  fontSize: "18px",
                  fontStyle: "normal",
                  paddingRight: "6px",
                }}
              >
                余热发电(总量)
              </i>
              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                {(+energyInfo?.elecQty3)?.toFixed(2) || 0}kWh
              </span>
            </div>
          </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>
      )}
      {!isPage1 && (
        <div className={cls.energy_info_new}>
          <div className="energy_info_new--item">
            <i
              style={{
                fontSize: "18px",
                fontStyle: "normal",
                paddingRight: "6px",
              }}
            >
              智慧能源光伏发电(昨日)/kwh
            </i>
            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
              {(+energyInfo?.elecQty6)?.toFixed(2) || 0}kWh
            </span>
          </div>
          <div className="energy_info_new--item">
            <i
              style={{
                fontSize: "18px",
                fontStyle: "normal",
                paddingRight: "6px",
              }}
            >
              许昌安彩光伏发电(昨日)/kwh
            </i>
            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
              {(+energyInfo?.elecQty7)?.toFixed(2) || 0}kWh
            </span>
          </div>
          <div className="energy_info_new--item">
            <i
              style={{
                fontSize: "18px",
                fontStyle: "normal",
                paddingRight: "6px",
              }}
            >
              智慧能源光伏发电(总量)/kwh
            </i>
            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
              {(+energyInfo?.elecQty4)?.toFixed(2) || 0}kWh
            </span>
          </div>
          <div className="energy_info_new--item">
            <i
              style={{
                fontSize: "18px",
                fontStyle: "normal",
                paddingRight: "6px",
              }}
            >
              许昌安彩光伏发电(总量)/kwh
            </i>
            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
              {(+energyInfo?.elecQty5)?.toFixed(2) || 0}kWh
            </span>
          </div>
        </div>
      )}
    </>
  );
};

export default EnergyCostRealtime;