import GraphBase from "../../Common/GraphBase";
import "./index.module.scss";
import { useSelector } from "react-redux";
import { ScrollBoard } from "@jiaminghi/data-view-react";

function attachStyle(data) {
  return data.map((arr) => {
    return arr.map((item, index) => {
      if (index == arr.length - 1) {
        return `<div style="display: flex; align-items: center">
							<span style="box-shadow: 0 0 4px 4px ${
                item == 1 ? "#2760ff55" : item == 0 ? "#a81b2655" : "#E6A23C55"
              }; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
        }"></span><span style="color: ${
          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
        }">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
      }
      return `<span style='color: #fffa'>${item}</span>`;
    });
  });
}

function FanInfo(props) {
  const rowNum = props.rows || 8;
  // 默认使用风机信息，可以使用 source 来调整该组件使用 annealFanInfo 的数据
  const fanInfo = useSelector((state) => state[props.source ?? "fanInfo"].data);

  const data = Object.keys(fanInfo).map((key, index) => {
    return [
      index + 1,
      key,
      fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
    ];
  });
  const dataRight = [...data.slice(rowNum), ...data.slice(0, rowNum)];

  let config = {
    headerBGC: "rgba(4, 44, 76, 0.3)",
    header: [
      '<span style="color:#fff">序号<span/>',
      '<span style="color:#fff">风机名称<span/>',
      '<span style="color:#fff">故障情况<span/>',
    ],
    oddRowBGC: "#042444",
    evenRowBGC: "#042c4c",
    // columnWidth: data.length > 12 ? [50, 136] : [88, 256],
    columnWidth: [50, 136],
    rowNum,
    hoverPause: true,
    data: attachStyle(data),
  };

  return (
    <GraphBase
      icon="kiln"
      title="风机信息"
      size={props.longBg ? ["middle", "full"] : ["middle", "short"]}
    >
      <div
        className="flex"
        style={{
          display: "flex",
          flex: 1,
          gap: "20px",
          // gap: data.length > 12 ? "20px" : 0,
          height: "100%",
          position: "relative",
        }}
      >
        <div className="flex-1" style={{ flex: 1 }}>
          <ScrollBoard
            config={config}
            style={{
              width: "280px",
              // width: data.length > 12 ? "280px" : "100%",
              height: "100%",
            }}
          />
        </div>
        {/* {data.length > 12 && (
          <> */}
        <div
          className="verticalLine"
          style={{
            position: "absolute",
            top: "10%",
            left: "50%",
            height: "80%",
            width: "2px",
            background:
              "linear-gradient(transparent, #15E8F563, #15E8F599, #15E8F563, transparent)",
          }}
        ></div>
        <div className="flex-1" style={{ flex: 1 }}>
          <ScrollBoard
            config={{ ...config, data: attachStyle(dataRight) }}
            style={{ width: "280px", height: "100%" }}
          />
        </div>
        {/* </>
        )} */}
      </div>
    </GraphBase>
  );
}

export default FanInfo;