import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useEffect, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import tableHeaderBackground from "~/assets/images/public/bigScreen/tablebg1.png";
import tableRowBackground from "~/assets/images/public/bigScreen/tablebg2.png";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import Panel from "../../Panel";
import "./index.less";

/** 负责查询并展示物联网设备报警记录。 */
function AlarmPanel(props) {
  const [list, setList] = useState([]);
  useEffect(() => {
    const loadList = async () => {
      const { data = [] } = await props.getAlarmRecordScreenIotDeviceAlarmPage();
      setList(data);
    };

    loadList();
  }, []);
  return (
    <Panel title="物联网设备报警情况" className="index-info-right-panel__alarm">
      <Spin spinning={props.biStatistics.getAlarmRecordScreenIotDeviceAlarmPageLoading}>
        <div className="index-info-alarm__table">
          <div
            className="index-info-alarm__header"
            style={{ backgroundImage: `url(${tableHeaderBackground})` }}
          >
            <div>设备类型</div>
            <div>所属单位</div>
            <div>报警类型</div>
            <div>处置状态</div>
          </div>
          <div className="index-info-alarm__body">
            <SeamlessScroll list={list} step={0.5}>
              {list.map((item, index) => (
                <div
                  className="index-info-alarm__row"
                  style={{ backgroundImage: `url(${tableRowBackground})` }}
                  key={index}
                >
                  <div>{item.alarmSourceName}</div>
                  <div>{item.corpName}</div>
                  <div>{item.alarmTypeName}</div>
                  <div>
                    {{ 10: "报警中", 20: "未处置", 30: "已消警" }[item.status]}
                  </div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </Spin>
    </Panel>
  );
}

export default Connect([NS_BI_STATISTICS], true)(AlarmPanel);
