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 temperatureIcon from "~/assets/images/public/bigScreen/w_ico1.png";
import windIcon from "~/assets/images/public/bigScreen/w_ico2.png";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import { getWeatherIcon } from "~/utils/weather";
import Panel from "../../Panel";
import "./index.less";

/** 负责加载并展示天气预警与应急报警信息。 */
function WeatherPanel(props) {
  const [weather, setWeather] = useState({});
  const [emergencyList, setEmergencyList] = useState([]);

  useEffect(() => {
    const loadData = async () => {
      const { result = {} } = await props.getWeather();
      setWeather({
        ...result.now,
        alertTitle: result.alerts?.[0]?.title || "当前暂无气象预警",
      });

      const { data = [] } = await props.getEventReportListUnfinished();
      setEmergencyList(data);
    };
    loadData();
  }, []);

  return (
    <Panel title="天气预报情况" className="index-info-left-panel__weather">
      <Spin spinning={props.biStatistics.getWeatherLoading}>
        <div className="index-info-weather__summary">
          <div className="index-info-weather__condition">
            <img src={getWeatherIcon(weather.text)} alt="" />
            {weather.text || "暂无"}
          </div>
          <div className="index-info-weather__metric">
            <img src={temperatureIcon} alt="" />
            <div className="index-info-weather__metric-content">
              <div>温度：</div>
              <span>{weather.temp ? `${weather.temp}℃` : "--"}</span>
            </div>
          </div>
          <div className="index-info-weather__metric">
            <img src={windIcon} alt="" />
            <div className="index-info-weather__metric-content">
              <div>风速：</div>
              <span>{weather.wind_class || "--"}</span>
            </div>
          </div>
        </div>
        <div className="index-info-weather__alert">
          {weather.alertTitle || "天气数据加载失败"}
        </div>
      </Spin>
      <Spin spinning={props.biStatistics.getEventReportListUnfinishedLoading}>
        <div className="index-info-weather__table">
          <div
            className="index-info-weather__table-header"
            style={{ backgroundImage: `url(${tableHeaderBackground})` }}
          >
            <div>公司名称</div>
            <div>报警处置状态</div>
            <div>应急报警信息</div>
          </div>
          <div className="index-info-weather__table-body">
            <SeamlessScroll list={emergencyList} step={0.5}>
              {emergencyList.map((item, index) => (
                <div
                  className="index-info-weather__table-row"
                  style={{ backgroundImage: `url(${tableRowBackground})` }}
                  key={index}
                >
                  <div>{item.executorCorpName}</div>
                  <div>
                    {
                      { 1: "未执行", 2: "已执行", 3: "进行中", 4: "已完成" }[
                        item.isRescueExecuted
                      ]
                    }
                  </div>
                  <div>{item.eventTitle}</div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </Spin>
    </Panel>
  );
}

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