// 库容监控
import React, { useState, useEffect, useMemo } from "react";

export default ({ data }) => {
  console.log(data);
  const statusArr1 = useMemo(() => {
    let allArr = data?.[0]?.thirdList;
    let newArr = [];
    allArr?.forEach((item) => {
      item?.fourthList?.forEach((it) => {
        newArr.push(it?.status);
      });
    });
    console.log("arr1", newArr);

    return newArr;
  }, [data]);
  const statusArr2 = useMemo(() => {
    let allArr = data?.[1]?.thirdList;
    let newArr = [];
    allArr?.forEach((item) => {
      console.log(item);
      item?.fourthList?.forEach((it) => {
        newArr.push(it?.status);
      });
    });
    console.log("arr2", newArr);

    return newArr;
  }, [data]);
  const statusArr3 = useMemo(() => {
    let allArr = data?.[2]?.thirdList;
    let newArr = [];
    allArr?.forEach((item) => {
      console.log(item);
      item?.fourthList?.forEach((it) => {
        newArr.push(it?.status);
      });
    });
    console.log("arr3", newArr);
    return newArr;
  }, [data]);

  const rgbChange = function (status) {
    if (status == "0") {
      return "#9E9E9E";
    } else if (status == "1") {
      return "#7FBB24";
    } else if (status == "2") {
      return "#489AFF";
    }
  };
  return (
    <>
      <div className="data-content" style={{ position: "relative" }}>
        <div className="content-header"> 库容监控</div>
        <div className="jk-content">
          <div className="jk-content-unit" style={{ position: "relative" }}>
            <div
              className="jk-status numStatus"
              style={{ position: "relative" }}
            >
              <div className="numberStatus">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
                <span>10</span>
              </div>
              <div className="statusLine bgline1"></div>
              <span
                style={{
                  position: "absolute",
                  bottom: "-20px",
                  left: "15px",
                  color: "white",
                }}
              >
                高
              </span>
            </div>
            <div className="jk-statusContent">
              {statusArr1?.map((it) => {
                return (
                  <div
                    className="statusDiv"
                    style={{
                      backgroundColor: rgbChange(it),
                    }}
                  ></div>
                );
              })}

              <div className="jk-statusBottom">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
              </div>
            </div>
          </div>
          <div className="jk-content-unit">
            <div className="jk-status" style={{ position: "relative" }}>
              <div className="statusLine bgline2"></div>
              <span
                style={{
                  position: "absolute",
                  bottom: "-20px",
                  left: "0",
                  color: "white",
                }}
              >
                中
              </span>
            </div>
            <div className="jk-statusContent">
              {statusArr2?.map((it) => {
                return (
                  <div
                    className="statusDiv"
                    style={{
                      backgroundColor: rgbChange(it),
                    }}
                  ></div>
                );
              })}

              <div className="jk-statusBottom">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
              </div>
            </div>
          </div>
          <div className="jk-content-unit">
            <div className="jk-status" style={{ position: "relative" }}>
              <div className="statusLine bgline3"></div>
              <span
                style={{
                  position: "absolute",
                  bottom: "-20px",
                  left: "0",
                  color: "white",
                }}
              >
                低
              </span>
            </div>
            <div className="jk-statusContent">
              {statusArr3?.map((it) => {
                return (
                  <div
                    className="statusDiv"
                    style={{
                      backgroundColor: rgbChange(it),
                    }}
                  ></div>
                );
              })}

              <div className="jk-statusBottom">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
              </div>
            </div>
          </div>
        </div>
        <div
          style={{
            position: "absolute",
            display: "flex",
            top: 3,
            right: 10,
          }}
          className="statuslogo"
        >
          <div>
            <div
              style={{ backgroundColor: "rgb(127, 187, 36)" }}
              className="statustitle"
            ></div>
            空闲
          </div>
          <div>
            <div
              style={{ backgroundColor: "#489AFF" }}
              className="statustitle"
            ></div>
            占用
          </div>
          <div>
            <div
              style={{ backgroundColor: "#9E9E9E" }}
              className="statustitle"
            ></div>
            停用
          </div>
        </div>
      </div>
    </>
  );
};
