import cls from "./index.module.css";
import { useEffect, useState } from "react";

function getData(type) {
  let data = [];
  switch (type) {
    case "gas-i":
      data = [
        { id: 1, name: "1#天然气I", value: "0m³/h" },
        { id: 2, name: "2#天然气I", value: "0m³/h" },
        { id: 3, name: "3#天然气I", value: "0m³/h" },
        { id: 4, name: "4#天然气I", value: "0m³/h" },
        { id: 5, name: "5#天然气I", value: "0m³/h" },
        { id: 6, name: "6#天然气I", value: "0m³/h" },
        { id: 7, name: "7#天然气I", value: "0m³/h" },
        { id: 8, name: "8#天然气I", value: "0m³/h" },
      ];
      break;
    case "gas-ii":
      data = [
        { id: 11, name: "1#天然气II", value: "0m³/h" },
        { id: 12, name: "2#天然气II", value: "0m³/h" },
        { id: 13, name: "3#天然气II", value: "0m³/h" },
        { id: 14, name: "4#天然气II", value: "0m³/h" },
        // { id: 15, name: '5#天然气II', value: '0m³/h' },
      ];
      break;
  }
  return data;
}

function GridList(props) {
  // const { runState } = useContext(SocketContext);
  const runState = null;

  const key = props.dataSource == "gas-i" ? "gasFlowArr" : "furnaceGasFlowArr";

  let dataList = getData(props.dataSource);
  dataList = runState?.[key]
    ? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? "/" }))
    : dataList;

  return (
    <div className={cls.gridList}>
      {dataList.map((item) => (
        <div key={item.id} className={cls.listItem}>
          {item.name}: {item.value}
        </div>
      ))}
    </div>
  );
}

export default GridList;