import { useState, useRef, useEffect } from "react";
import cls from "./index.module.css";
import Chart2 from "../../../Common/TimeFireDir";
import Chart1 from "../../../Common/ForecastTemperature";
import VideoContainer from "./VideoContainer";
function KilnCenter({ onFloorChange }) {
  const [floor, setFloor] = useState(1);  // 初始值设置为 1
  const preFloor = useRef();

  useEffect(() => {
    onFloorChange(floor); 
  }, [floor, onFloorChange]);

  function onFloorUpdate(flr) {
    preFloor.current = floor;
    setFloor(flr);
    onFloorChange(flr); 
  }

  const subMenuStyle = {
    marginLeft: floor === 4? "400px" : "0",
  };

  const colorStyle = {
    right: floor === 4? "0px" : "400px",
  };

  return (
    <div
      className="bgKilnInner"
      style={{
        width: "100%",
        position: "absolute",
        top: "12%",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* 时间火向数据 */}
      {floor === 4 && (
          <div
            className="fireAndTime"
            style={{ position: "absolute", top: "-112px", height: "400px" }}
          >
            <Chart1 />
          </div>
        )}
      {floor!== 4 && (
        <div
          className="fireAndTime"
          style={{ position: "absolute", top: "-112px", height: "212px" }}
        >
          <Chart2 />
        </div>
      )}

      {/* menu  */}
      <div
        className="subMenu"
        style={{
          display: "flex",
          marginBottom: "24px",
         ...subMenuStyle,
          justifyContent: "center"
        }}
      >
         <div
          className={
            "flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
          }
          onClick={() => onFloorUpdate(1)}
        >
          碹顶温度
        </div>
        <div
          className={
            "flr flr2 " + cls.menuItem + " " + (floor === 2? cls.active : "")
          }
          onClick={() => onFloorUpdate(2)}
        >
          池底温度
        </div>
        <div
          className={
            "flr flr2 " + cls.menuItem + " " + (floor === 3? cls.active : "")
          }
          onClick={() => onFloorUpdate(3)}
        >
          溶液速度
        </div>
          <div
          className={
            "flr flr1 " + cls.menuItem + " " + (floor === 4? cls.active : "")
          }
          onClick={() => onFloorUpdate(4)}
        >
          窑炉预测
        </div>
      </div>

      {/* 颜色指示图  */}
      <div
        style={{
          position: "absolute",
          top: "30px",
         ...colorStyle,
          width: "300px",
          height: "41px",
        }}
      >
        <img
          src={require("../../../../assets/tempIntr.png")}
          alt=""
          style={{ width: "300px", height: "41px" }}
        />
      </div>

      {/* video  */}
      <VideoContainer
        onFloorUpdate={onFloorUpdate}
        floor={floor}
        preFloor={preFloor}
      />
    </div>
  );
}

export default KilnCenter;