import { useState, useRef } from "react";
import cls from "./index.module.css";
import Chart2 from "../../../Common/TimeFireDir";
import VideoContainer from "./VideoContainer";

function KilnCenter() {
  const [floor, setFloor] = useState(0);
  const preFloor = useRef();
  function onFloorUpdate(flr) {
    preFloor.current = floor;
    setFloor(flr);
  }

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

      {/* menu  */}
      <div
        className="subMenu"
        style={{
          display: "flex",
          marginBottom: "24px",
          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>

      {/* 颜色指示图  */}
      <div
        style={{
          position: "absolute",
          top: "30px",
          right: "450px",
          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;