import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import activeTabBackground from "~/assets/images/map_bi/content/title.png";
import tabBackground from "~/assets/images/map_bi/content/title_on.png";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const tabs = ["传感器数据列表", "报警信息列表"];
const defaultRecords = [
  {
    EQUIPMENTTYPE_NAME: "风速站",
    NAME: "151新港湾集装箱码头装船机测试",
    isshow: "1",
  },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "137", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-S10", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "155-六公司R2取料机", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "二公司A1Z", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "二公司B2D", isshow: "1" },
  {
    EQUIPMENTTYPE_NAME: "风速站",
    NAME: "九公司风速站-SS2#变楼顶",
    isshow: "1",
  },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "101-六公司3号装船机", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "133-七公司R5-2", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-R112", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "106-六公司ST2堆料机", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-中控楼顶", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "110-六公司4号取料机", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "122", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "181-七公司PR4", isshow: "1" },
  {
    EQUIPMENTTYPE_NAME: "气象站",
    NAME: "九公司气象站-除尘部办公楼顶",
    isshow: "1",
  },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "118-七公司S7", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "119-杂货804门机", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-SL12", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-T8", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "135-杂货一队422门机", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "二公司A6Q", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "二公司B3D", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "147-杂货517门机", isshow: "1" },
  { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-S11", isshow: "1" },
];

/** 展示气象设备详情，并在切换至报警列表时清空当前记录。 */
function DeviceDetailPanel() {
  const [activeTab, setActiveTab] = useState(0);
  const [records, setRecords] = useState(defaultRecords);
  const handleTabClick = (index) => {
    if (index === activeTab)
      return;
    setActiveTab(index);
    setRecords([]);
  };

  return (
    <Panel title="设备监测详情" className="port-weather__detail">
      <div className="port-weather-detail__content">
        <div className="port-weather-detail__tabs">
          {tabs.map((item, index) => (
            <div
              key={item}
              className="port-weather-detail__tab"
              style={{
                backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
              }}
              onClick={() => handleTabClick(index)}
            >
              {item}
            </div>
          ))}
        </div>
        <div className="port-weather-detail__table">
          <div className="port-weather-detail__row">
            <div className="port-weather-detail__cell">气象设备类型</div>
            <div className="port-weather-detail__cell">气象设备名称</div>
            <div className="port-weather-detail__cell">状态</div>
          </div>
          <div className="port-weather-detail__table-body">
            <SeamlessScroll list={records} step={0.5}>
              {records.map((item, index) => (
                <div key={index} className="port-weather-detail__row">
                  <div className="port-weather-detail__cell">
                    {item.EQUIPMENTTYPE_NAME}
                  </div>
                  <div className="port-weather-detail__cell">{item.NAME}</div>
                  <div
                    className={`port-weather-detail__cell ${item.isshow === "1" ? "port-weather-detail__cell--green" : ""} ${item.isshow === "2" ? "port-weather-detail__cell--red" : ""}`}
                  >
                    {item.isshow === "2" ? "离线" : "在线"}
                  </div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </div>
    </Panel>
  );
}

export default DeviceDetailPanel;
