import CountUp from "react-countup";
import deviceBackground from "~/assets/images/map_bi/content/img2.png";
import stationIcon from "~/assets/images/map_bi/content/img2icon1.png";
import alarmIcon from "~/assets/images/map_bi/content/img2icon2.png";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const defaultStatistics = [
  {
    title: "监测站数",
    image: stationIcon,
    onlineCount: "0",
    offlineCount: "0",
  },
  { title: "报警数", image: alarmIcon, onlineCount: 0, offlineCount: 0 },
];

/** 展示气象监测站及报警设备的在线状态。 */
function DeviceStatusPanel() {
  return (
    <Panel title="监测设备状态" className="port-weather__device-status">
      <div className="port-weather-device-status__options">
        {defaultStatistics.map(item => (
          <div key={item.title} className="port-weather-device-status__option">
            <div className="port-weather-device-status__title">
              {item.title}
            </div>
            <div className="port-weather-device-status__info">
              <div
                className="port-weather-device-status__icon"
                style={{ backgroundImage: `url(${deviceBackground})` }}
              >
                <img src={item.image} alt="" />
              </div>
              {item.title === "监测站数"
                ? (
                    <div className="port-weather-device-status__count">
                      <div>
                        在线数：
                        <CountUp end={+item.onlineCount} />
                      </div>
                      <div>
                        离线数：
                        <CountUp end={+item.offlineCount} />
                      </div>
                    </div>
                  )
                : (
                    <div className="port-weather-device-status__count">
                      <div>在线数：-</div>
                      <div>离线数：-</div>
                    </div>
                  )}
            </div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

export default DeviceStatusPanel;
