import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon1 from "~/assets/images/map_bi/content/ico19.png";
import icon2 from "~/assets/images/map_bi/content/ico20.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import "./index.less";

const block2OptionsNavList = ["消防水罐", "消防泵", "消防管线"];
function XiaoFang() {
  const [block1List, setBlock1List] = useState([
    { title: "火灾监测装置", count1: 34, count2: 12, count3: 15, icon: icon1 },
    { title: "消防设备", count1: 34, count2: 12, count3: 15, icon: icon2 },
  ]);
  const [block2Index, setBlock2Index] = useState(0);
  const [block2List, setBlock2List] = useState([
    { pumpRoomName: "一号消防泵房", liquidLevel: 2.5, waterPressure: 0.45, status: 1 },
    { pumpRoomName: "二号消防泵房", liquidLevel: 1.8, waterPressure: 0.38, status: 1 },
    { pumpRoomName: "三号消防泵房", liquidLevel: 3.2, waterPressure: 0.52, status: 1 },
    { pumpRoomName: "四号消防泵房", liquidLevel: 0.5, waterPressure: 0.25, status: 2 },
    { pumpRoomName: "五号消防泵房", liquidLevel: 2.8, waterPressure: 0.48, status: 1 },
    { pumpRoomName: "六号消防泵房", liquidLevel: 1.2, waterPressure: 0.32, status: 3 },
    { pumpRoomName: "七号消防泵房", liquidLevel: 3.5, waterPressure: 0.55, status: 1 },
    { pumpRoomName: "八号消防泵房", liquidLevel: 2.1, waterPressure: 0.42, status: 1 },
    { pumpRoomName: "九号消防泵房", liquidLevel: 0.8, waterPressure: 0.28, status: 2 },
    { pumpRoomName: "十号消防泵房", liquidLevel: 2.9, waterPressure: 0.50, status: 1 },
  ]);
  const [block3List, setBlock3List] = useState([
    { alarmDevice: "火灾探测器", alarmTime: "2024-01-01 10:00:00", alarmArea: "A区", status: 1, disposalStatus: 1 },
    { alarmDevice: "烟雾传感器", alarmTime: "2024-01-01 10:05:00", alarmArea: "B区", status: 2, disposalStatus: 2 },
    { alarmDevice: "温度传感器", alarmTime: "2024-01-01 10:10:00", alarmArea: "C区", status: 1, disposalStatus: 1 },
    { alarmDevice: "火焰探测器", alarmTime: "2024-01-01 10:15:00", alarmArea: "D区", status: 2, disposalStatus: 3 },
    { alarmDevice: "手动报警按钮", alarmTime: "2024-01-01 10:20:00", alarmArea: "E区", status: 1, disposalStatus: 2 },
    { alarmDevice: "可燃气体探测器", alarmTime: "2024-01-01 10:25:00", alarmArea: "F区", status: 2, disposalStatus: 1 },
    { alarmDevice: "红外火焰探测器", alarmTime: "2024-01-01 10:30:00", alarmArea: "G区", status: 1, disposalStatus: 3 },
    { alarmDevice: "光电感烟探测器", alarmTime: "2024-01-01 10:35:00", alarmArea: "H区", status: 2, disposalStatus: 2 },
    { alarmDevice: "差定温火灾探测器", alarmTime: "2024-01-01 10:40:00", alarmArea: "I区", status: 1, disposalStatus: 1 },
    { alarmDevice: "缆式线型感温探测器", alarmTime: "2024-01-01 10:45:00", alarmArea: "J区", status: 2, disposalStatus: 3 },
  ]);
  const [block4List, setBlock4List] = useState([
    { teamName: "第一志愿消防队", age: 43, leader: "张队长", phone: "13800138001" },
    { teamName: "第二志愿消防队", age: 55, leader: "李队长", phone: "13800138002" },
    { teamName: "第三志愿消防队", age: 23, leader: "王队长", phone: "13800138003" },
    { teamName: "第四志愿消防队", age: 54, leader: "赵队长", phone: "13800138004" },
    { teamName: "第五志愿消防队", age: 65, leader: "刘队长", phone: "13800138005" },
    { teamName: "第六志愿消防队", age: 34, leader: "陈队长", phone: "13800138006" },
    { teamName: "第七志愿消防队", age: 24, leader: "杨队长", phone: "13800138007" },
    { teamName: "第八志愿消防队", age: 52, leader: "黄队长", phone: "13800138008" },
    { teamName: "第九志愿消防队", age: 23, leader: "周队长", phone: "13800138009" },
    { teamName: "第十志愿消防队", age: 35, leader: "吴队长", phone: "13800138010" },
  ]);

  const block2OptionsClick = (index) => {
    if (index === block2Index)
      return;
    setBlock2Index(index);
  };

  return (
    <div className="branch_office_xiaofang">
      <div className="block1">
        <Title title="消防设备状态" />
        <div className="options">
          <div className="items">
            {block1List.map((item, index) => (
              <div className="item" key={index}>
                <div className="title">{item.title}</div>
                <div className="img">
                  <img src={item.icon} alt="" />
                </div>
                <div className="info">
                  <div>
                    <span>设备总数：</span>
                    <span>{item.count1}</span>
                  </div>
                  <div>
                    <span>设备在线数：</span>
                    <span>{item.count2}</span>
                  </div>
                  <div>
                    <span>设备离线数：</span>
                    <span>{item.count3}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="block2">
        <Title
          title="消防泵房状态"
          extra={(
            <div className="tabs">
              {block2OptionsNavList.map((item, index) => (
                <div
                  key={index}
                  className={`tab ${index === block2Index ? "active" : ""}`}
                  onClick={() => block2OptionsClick(index)}
                >
                  {item}
                </div>
              ))}
            </div>
          )}
        />
        <div className="options">
          <div className="table">
            <div className="tr">
              <div className="td">泵房名称</div>
              <div className="td">液位(米)</div>
              <div className="td">水压(mpa)</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.pumpRoomName}</div>
                    <div className="td">{item.liquidLevel}</div>
                    <div className="td">{`${item.waterPressure}MPa`}</div>
                    <div className="td" style={{ color: item.status === 1 ? "#60b321" : item.status === 2 ? "#f18308" : "#fff" }}>
                      {item.status === 1 ? "正常" : item.status === 2 ? "异常" : "维护中"}
                    </div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div className="block3">
        <Title title="消防报警记录" />
        <div className="options">
          <div className="table">
            <div className="tr">
              <div className="td">报警设备</div>
              <div className="td">报警时间</div>
              <div className="td">报警区域</div>
              <div className="td">状态</div>
              <div className="td">处置状态</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block3List} step={0.5}>
                {block3List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.alarmDevice}</div>
                    <div className="td">{item.alarmTime}</div>
                    <div className="td">{item.alarmArea}</div>
                    <div className="td" style={{ color: item.status === 1 ? "#FF8A00" : "#fff" }}>{item.status ? "在线" : "离线"}</div>
                    <div className="td" style={{ color: item.disposalStatus === 1 ? "#009CFF" : item.disposalStatus === 2 ? "#FFBE0F" : "#46A418" }}>
                      {item.disposalStatus === 1 ? "待确认" : item.disposalStatus === 2 ? "误报" : "已消除"}
                    </div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div className="block4">
        <Title title="企业志愿消防队伍" />
        <div className="options">
          <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={block4List} step={0.5}>
                {block4List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.leader}</div>
                    <div className="td">{item.age}</div>
                    <div className="td">{item.teamName}</div>
                    <div className="td">{item.phone}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default XiaoFang;
