// 库容监控
import React, { useState, useEffect, useMemo } from "react";
import { Carousel } from "antd";
export default ({ data }) => {
  console.log(data);
  // 巷道1左边
  const statusArr1Left = useMemo(() => {
    let allArr = data?.[0]?.secondList?.[1]?.thirdList;
    let newArr = [];
    allArr?.forEach((item) => {
      item?.fourthList?.reverse()?.forEach((it) => {
        newArr.push(it?.status);
      });
    });
    return newArr;
  }, [data]);
  // 巷道1右边
  const statusArr1Right = useMemo(() => {
    let allArr = data?.[0]?.secondList?.[0]?.thirdList;
    let newArr = [];
    allArr?.forEach((item) => {
      console.log(item);
      item?.fourthList?.reverse()?.forEach((it) => {
        newArr.push(it?.status);
      });
    });
    console.log("arr2", newArr);

    return newArr;
  }, [data]);
  // 巷道2左边
  const statusArr2Left = useMemo(() => {
    let allArr = data?.[1]?.secondList?.[1]?.thirdList;
    let newArr = [];
    allArr?.forEach((item) => {
      console.log(item);
      item?.fourthList?.reverse()?.forEach((it) => {
        newArr.push(it?.status);
      });
    });
    console.log("arr3", newArr);
    return newArr;
  }, [data]);

  // 巷道2右边
  const statusArr2Right = useMemo(() => {
    let allArr = data?.[1]?.secondList?.[0]?.thirdList;
    let newArr = [];
    allArr?.forEach((item) => {
      console.log(item);
      item?.fourthList?.reverse()?.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 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>
          <Carousel className="jk-content-carousel" afterChange={() => {
            
          }}>
            <div className="jk-content-unit">
              <div className="jk-statusContent">
                {statusArr1Left?.map((it) => {
                  return (
                    <div
                      className="statusDiv"
                      style={{
                        backgroundColor: rgbChange(it),
                      }}
                    ></div>
                  );
                })}

                <div className="jk-statusBottom">
                  <span>10</span>
                  <span>9</span>
                  <span>8</span>
                  <span>7</span>
                  <span>6</span>
                  <span>5</span>
                  <span>4</span>
                  <span>3</span>
                  <span>2</span>
                  <span>1</span>
                </div>
              </div>
              <div className="jk-status " style={{ position: "relative" }}>
                <div className="statusLine bgline1"></div>
                <span
                  style={{
                    position: "absolute",
                    left: "-18px",
                    bottom: "-8px",
                    color: "white",
                  }}
                >
                  巷道1
                </span>
              </div>
            </div>
            <div className="jk-content-unit">
              <div className="jk-statusContent">
                {statusArr1Right?.map((it) => {
                  return (
                    <div
                      className="statusDiv"
                      style={{
                        backgroundColor: rgbChange(it),
                      }}
                    ></div>
                  );
                })}

                <div className="jk-statusBottom">
                  <span>10</span>
                  <span>9</span>
                  <span>8</span>
                  <span>7</span>
                  <span>6</span>
                  <span>5</span>
                  <span>4</span>
                  <span>3</span>
                  <span>2</span>
                  <span>1</span>
                </div>
              </div>
            </div>
            <div className="jk-content-unit">
              <div className="jk-statusContent">
                {statusArr2Left?.map((it) => {
                  return (
                    <div
                      className="statusDiv"
                      style={{
                        backgroundColor: rgbChange(it),
                      }}
                    ></div>
                  );
                })}

                <div className="jk-statusBottom">
                  <span>10</span>
                  <span>9</span>
                  <span>8</span>
                  <span>7</span>
                  <span>6</span>
                  <span>5</span>
                  <span>4</span>
                  <span>3</span>
                  <span>2</span>
                  <span>1</span>
                </div>
              </div>
              <div className="jk-status" style={{ position: "relative" }}>
                <div className="statusLine bgline3"></div>
                <span
                  style={{
                    position: "absolute",
                    left: "-18px",
                    bottom: "-8px",
                    color: "white",
                  }}
                >
                  巷道2
                </span>
              </div>
            </div>
            <div className="jk-content-unit">
              <div className="jk-statusContent">
                {statusArr2Right?.map((it) => {
                  return (
                    <div
                      className="statusDiv"
                      style={{
                        backgroundColor: rgbChange(it),
                      }}
                    ></div>
                  );
                })}

                <div className="jk-statusBottom">
                  <span>10</span>
                  <span>9</span>
                  <span>8</span>
                  <span>7</span>
                  <span>6</span>
                  <span>5</span>
                  <span>4</span>
                  <span>3</span>
                  <span>2</span>
                  <span>1</span>
                </div>
              </div>
            </div>
          </Carousel>
        </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>
    </>
  );
};
