import { useContext, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img1ico1 from "~/assets/images/map_bi/content/img1ico1.png";
import img1ico2 from "~/assets/images/map_bi/content/img1ico2.png";
import img1ico3 from "~/assets/images/map_bi/content/img1ico3.png";
import img1ico4 from "~/assets/images/map_bi/content/img1ico4.png";
import img1ico5 from "~/assets/images/map_bi/content/img1ico5.png";
import img2 from "~/assets/images/map_bi/content/img2.png";
import Title from "~/pages/Container/Map/components/Content/port/Title";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";

const RenYuan = () => {
  const { currentBranchOffice } = useContext(Context);
  const [block1OptionsList, setBlock1OptionsList] = useState([
    { title: "在线员工", img: img1ico1, count: "-" },
    { title: "在线车辆", img: img1ico2, count: "-" },
    { title: "内部人员", img: img1ico3, count: "-" },
    { title: "外协人员", img: img1ico4, count: "-" },
    { title: "临时人员", img: img1ico5, count: "-" },
  ]);
  const [block2List, setBlock2List] = useState([
    { 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: "作业通道" },
  ]);

  return (
    <div className="port_renyuan">
      <div className="block1">
        <Title title="定位基础信息" />
        <div className="options">
          {block1OptionsList.map((item, index) => (
            <div key={index} className="option">
              <div className="imger" style={{ backgroundImage: `url(${img2})` }}>
                <img src={item.img} alt="" />
              </div>
              <div className="info">
                <div className="label">{item.title}</div>
                <div className="text">{item.count}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="block2">
        <Title title="报警列表" />
        <div className="content">
          <div className="table">
            <div className="tr">
              <div className="td">报警类型</div>
              <div className="td">报警时间</div>
              <div className="td">触发人</div>
              <div className="td">报警地点</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block2List} step={0.5}>
                {block2List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.alarmName}</div>
                    <div className="td">{item.alarmTime}</div>
                    <div className="td">{item.foulUserName}</div>
                    <div className="td">{item.place}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RenYuan;
