import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const records = [
  {
    alarmName: "安全帽佩戴异常",
    alarmTime: "2024-12-19 10:30:25",
    foulUserName: "张三",
    place: "二号码头作业区",
  },
  {
    alarmName: "进入危险区域",
    alarmTime: "2024-12-19 09:45:12",
    foulUserName: "李四",
    place: "化学品仓库",
  },
  {
    alarmName: "高空作业未系安全带",
    alarmTime: "2024-12-19 08:20:48",
    foulUserName: "王五",
    place: "装卸平台",
  },
  {
    alarmName: "违规操作设备",
    alarmTime: "2024-12-19 07:15:33",
    foulUserName: "赵六",
    place: "维修车间",
  },
  {
    alarmName: "烟火报警",
    alarmTime: "2024-12-19 06:50:17",
    foulUserName: "钱七",
    place: "物料堆放区",
  },
  {
    alarmName: "超时作业",
    alarmTime: "2024-12-19 05:42:09",
    foulUserName: "孙八",
    place: "集装箱堆场",
  },
  {
    alarmName: "违规吸烟",
    alarmTime: "2024-12-19 04:18:34",
    foulUserName: "周九",
    place: "油料储存区",
  },
  {
    alarmName: "人员聚集超限",
    alarmTime: "2024-12-19 03:25:41",
    foulUserName: "吴十",
    place: "登船通道",
  },
  {
    alarmName: "车辆超速",
    alarmTime: "2024-12-19 02:33:16",
    foulUserName: "郑十一",
    place: "港内道路",
  },
  {
    alarmName: "未佩戴防护用品",
    alarmTime: "2024-12-19 01:45:28",
    foulUserName: "王十二",
    place: "散货码头",
  },
  {
    alarmName: "进入限制区域",
    alarmTime: "2024-12-18 23:12:55",
    foulUserName: "冯十三",
    place: "控制中心",
  },
  {
    alarmName: "违规动火作业",
    alarmTime: "2024-12-18 22:05:43",
    foulUserName: "陈十四",
    place: "维修平台",
  },
  {
    alarmName: "人员滞留超时",
    alarmTime: "2024-12-18 21:38:19",
    foulUserName: "褚十五",
    place: "危险品堆场",
  },
  {
    alarmName: "设备异常操作",
    alarmTime: "2024-12-18 20:27:06",
    foulUserName: "卫十六",
    place: "装卸设备区",
  },
  {
    alarmName: "违规携带危险品",
    alarmTime: "2024-12-18 19:44:52",
    foulUserName: "蒋十七",
    place: "安检通道",
  },
  {
    alarmName: "安全距离不足",
    alarmTime: "2024-12-18 18:15:37",
    foulUserName: "沈十八",
    place: "龙门吊作业区",
  },
  {
    alarmName: "违规使用手机",
    alarmTime: "2024-12-18 17:29:44",
    foulUserName: "韩十九",
    place: "易燃品仓库",
  },
  {
    alarmName: "人员跌倒",
    alarmTime: "2024-12-18 16:36:21",
    foulUserName: "杨二十",
    place: "栈桥区域",
  },
  {
    alarmName: "违规跨越护栏",
    alarmTime: "2024-12-18 15:51:08",
    foulUserName: "朱二十一",
    place: "码头边缘",
  },
  {
    alarmName: "未按指定路线行走",
    alarmTime: "2024-12-18 14:42:35",
    foulUserName: "秦二十二",
    place: "作业通道",
  },
];

/** 展示人员定位相关的报警列表。 */
function AlarmListPanel() {
  return (
    <Panel title="报警列表" className="port-personnel__alarm-list">
      <div className="port-personnel-alarm-list__content">
        <div className="port-personnel-alarm-list__table">
          <div className="port-personnel-alarm-list__row">
            <div className="port-personnel-alarm-list__cell">报警类型</div>
            <div className="port-personnel-alarm-list__cell">报警时间</div>
            <div className="port-personnel-alarm-list__cell">触发人</div>
            <div className="port-personnel-alarm-list__cell">报警地点</div>
          </div>
          <div className="port-personnel-alarm-list__table-body">
            <SeamlessScroll list={records} step={0.5}>
              {records.map((item, index) => (
                <div key={index} className="port-personnel-alarm-list__row">
                  <div className="port-personnel-alarm-list__cell">
                    {item.alarmName}
                  </div>
                  <div className="port-personnel-alarm-list__cell">
                    {item.alarmTime}
                  </div>
                  <div className="port-personnel-alarm-list__cell">
                    {item.foulUserName}
                  </div>
                  <div className="port-personnel-alarm-list__cell">
                    {item.place}
                  </div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </div>
    </Panel>
  );
}

export default AlarmListPanel;
