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 = [
  {
    USERNAME: "张三",
    TIME: "2023-12-01 08:30:15",
    STATE: "0",
    EQUIPMENTNAME: "东门人行闸机",
  },
  {
    USERNAME: "李四",
    TIME: "2023-12-01 09:15:22",
    STATE: "1",
    EQUIPMENTNAME: "西门人行闸机",
  },
  {
    USERNAME: "王五",
    TIME: "2023-12-01 10:45:30",
    STATE: "0",
    EQUIPMENTNAME: "南门人行闸机",
  },
  {
    USERNAME: "赵六",
    TIME: "2023-12-01 11:20:18",
    STATE: "1",
    EQUIPMENTNAME: "北门人行闸机",
  },
  {
    USERNAME: "陈七",
    TIME: "2023-12-01 13:30:45",
    STATE: "0",
    EQUIPMENTNAME: "东门人行闸机",
  },
  {
    USERNAME: "刘八",
    TIME: "2023-12-01 14:15:20",
    STATE: "0",
    EQUIPMENTNAME: "西门人行闸机",
  },
  {
    USERNAME: "孙九",
    TIME: "2023-12-01 15:45:10",
    STATE: "1",
    EQUIPMENTNAME: "南门人行闸机",
  },
  {
    USERNAME: "周十",
    TIME: "2023-12-01 16:30:25",
    STATE: "0",
    EQUIPMENTNAME: "北门人行闸机",
  },
  {
    USERNAME: "吴十一",
    TIME: "2023-12-02 08:15:30",
    STATE: "0",
    EQUIPMENTNAME: "东门人行闸机",
  },
  {
    USERNAME: "郑十二",
    TIME: "2023-12-02 09:30:40",
    STATE: "1",
    EQUIPMENTNAME: "西门人行闸机",
  },
  {
    USERNAME: "王十三",
    TIME: "2023-12-02 10:20:15",
    STATE: "0",
    EQUIPMENTNAME: "南门人行闸机",
  },
  {
    USERNAME: "冯十四",
    TIME: "2023-12-02 11:45:25",
    STATE: "1",
    EQUIPMENTNAME: "北门人行闸机",
  },
  {
    USERNAME: "蒋十五",
    TIME: "2023-12-02 13:10:35",
    STATE: "0",
    EQUIPMENTNAME: "东门人行闸机",
  },
  {
    USERNAME: "韩十六",
    TIME: "2023-12-02 14:50:20",
    STATE: "0",
    EQUIPMENTNAME: "西门人行闸机",
  },
  {
    USERNAME: "杨十七",
    TIME: "2023-12-02 15:30:45",
    STATE: "1",
    EQUIPMENTNAME: "南门人行闸机",
  },
  {
    USERNAME: "朱十八",
    TIME: "2023-12-02 16:20:10",
    STATE: "0",
    EQUIPMENTNAME: "北门人行闸机",
  },
  {
    USERNAME: "秦十九",
    TIME: "2023-12-03 08:45:30",
    STATE: "0",
    EQUIPMENTNAME: "东门人行闸机",
  },
  {
    USERNAME: "何二十",
    TIME: "2023-12-03 09:20:15",
    STATE: "1",
    EQUIPMENTNAME: "西门人行闸机",
  },
  {
    USERNAME: "吕二十一",
    TIME: "2023-12-03 10:30:20",
    STATE: "0",
    EQUIPMENTNAME: "南门人行闸机",
  },
  {
    USERNAME: "施二十二",
    TIME: "2023-12-03 11:15:40",
    STATE: "1",
    EQUIPMENTNAME: "北门人行闸机",
  },
];

/** 展示口门进出记录，并在切换闸机类型时清空当前列表。 */
function GateRecordPanel() {
  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-gate__record">
      <div className="port-gate-record__content">
        <div className="port-gate-record__tabs">
          {tabs.map((item, index) => (
            <div
              key={item}
              className="port-gate-record__tab"
              style={{
                backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
              }}
              onClick={() => handleTabClick(index)}
            >
              {item}
            </div>
          ))}
        </div>
        <div className="port-gate-record__table">
          <div className="port-gate-record__row">
            <div className="port-gate-record__cell">
              {activeTab === 0 ? "人员" : "车牌"}
            </div>
            <div className="port-gate-record__cell">时间</div>
            <div className="port-gate-record__cell">状态</div>
            <div className="port-gate-record__cell">闸机名称</div>
          </div>
          <div className="port-gate-record__table-body">
            <SeamlessScroll list={records} step={0.5}>
              {records.map((item, index) => (
                <div key={index} className="port-gate-record__row">
                  <div className="port-gate-record__cell">
                    {activeTab === 0 ? item.USERNAME : item.LICENSE_PLATE}
                  </div>
                  <div className="port-gate-record__cell">{item.TIME}</div>
                  <div
                    className={`port-gate-record__cell ${activeTab === 0 && item.STATE === "0" ? "port-gate-record__cell--green" : ""}`}
                  >
                    {activeTab === 0
                      ? item.STATE === "0"
                        ? "进入"
                        : "出港"
                      : item.STATE === "0"
                        ? "进场"
                        : "出场"}
                  </div>
                  <div
                    className={`port-gate-record__cell ${activeTab === 0 && item.STATE === "0" ? "port-gate-record__cell--yellow" : ""}`}
                  >
                    {activeTab === 0 ? item.EQUIPMENTNAME : item.COMING_REASON}
                  </div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </div>
    </Panel>
  );
}

export default GateRecordPanel;
