import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { useEffect, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon3 from "~/assets/images/public/bigScreen/ico21.png";
import icon1 from "~/assets/images/public/bigScreen/img10.png";
import icon2 from "~/assets/images/public/bigScreen/img11.png";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { getAlertColor, getWeatherIcon } from "~/utils/weather";
import "./index.less";

function QiXiang(props) {
  const [weatherData, setWeatherData] = useState({});
  const [alert, setAlert] = useState([]);
  const [block1List, setBlock1List] = useState([
    { department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
    { department: "销售部", requiredDevices: 80, anchoredDevices: 76 },
    { department: "市场部", requiredDevices: 60, anchoredDevices: 58 },
    { department: "运营部", requiredDevices: 120, anchoredDevices: 115 },
    { department: "客服部", requiredDevices: 90, anchoredDevices: 88 },
    { department: "财务部", requiredDevices: 30, anchoredDevices: 29 },
    { department: "人事部", requiredDevices: 25, anchoredDevices: 24 },
    { department: "研发部", requiredDevices: 200, anchoredDevices: 195 },
    { department: "质量部", requiredDevices: 45, anchoredDevices: 42 },
    { department: "采购部", requiredDevices: 35, anchoredDevices: 33 },
  ]);
  const [block2List, setBlock2List] = useState([
    { source: "国家气象局", level: "蓝色", area: "北京市朝阳区" },
    { source: "地方气象台", level: "黄色", area: "上海市浦东新区" },
    { source: "中央气象台", level: "橙色", area: "广州市天河区" },
    { source: "区域气象中心", level: "红色", area: "深圳市南山区" },
    { source: "国家气象局", level: "蓝色", area: "杭州市西湖区" },
    { source: "地方气象台", level: "黄色", area: "成都市锦江区" },
    { source: "中央气象台", level: "橙色", area: "武汉市江汉区" },
    { source: "区域气象中心", level: "红色", area: "西安市雁塔区" },
    { source: "国家气象局", level: "蓝色", area: "南京市鼓楼区" },
    { source: "地方气象台", level: "黄色", area: "重庆市渝中区" },
  ]);

  const getWeatherData = async () => {
    const { result = {} } = await props.getWeather();
    setWeatherData(result.now);
    setAlert(Array.isArray(result.alerts) ? result.alerts : []);
  };

  useEffect(() => {
    getWeatherData();
  }, []);

  return (
    <div className="branch_office_qixiang">
      <div className="block1">
        <Title title="天气预防情况" />
        <div className="options">
          <div className="weather">
            <div className="icon">
              <div className="img">
                <img src={getWeatherIcon(weatherData.text)} alt="" />
              </div>
              <div className="text">{weatherData.text || "暂无"}</div>
            </div>
            <div className="items">
              <div className="item">
                <div className="img">
                  <img src={icon1} alt="" />
                </div>
                <div className="info">
                  <div className="label">温度：</div>
                  <div className="value">{weatherData.temp ? `${weatherData.temp}℃` : "--"}</div>
                </div>
              </div>
              <div className="item">
                <div className="img">
                  <img src={icon2} alt="" />
                </div>
                <div className="info">
                  <div className="label">风速：</div>
                  <div className="value">{weatherData.wind_class || "--"}</div>
                </div>
              </div>
              <div className="item">
                <div className="img">
                  <img src={icon3} alt="" />
                </div>
                <div className="info">
                  <div className="label">降水量：</div>
                  <div className="value">{weatherData.prec_1h ? `${weatherData.prec_1h}毫米` : "--"}</div>
                </div>
              </div>
            </div>
          </div>
          <div className="alert">
            <div className="scroll">
              <SeamlessScroll list={alert} step={0.5} limitScrollNum={2} singleHeight={22}>
                {
                  alert.map((item, index) => (
                    <div className="item" key={index}>
                      <div className="title" style={{ color: getAlertColor(item.level) }}>{item.title}</div>
                    </div>
                  ))
                }
              </SeamlessScroll>
            </div>
          </div>
          <div className="table">
            <div className="tr">
              <div className="td">部门名称</div>
              <div className="td">需锚定设备数</div>
              <div className="td">已锚定设备数</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block1List} step={0.5}>
                {block1List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.department}</div>
                    <div className="td">{item.requiredDevices}</div>
                    <div className="td">{item.anchoredDevices}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div className="block2">
        <Title title="气象告警信息" />
        <div className="options">
          <div className="table">
            <div className="tr">
              <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.source}</div>
                    <div className="td">{item.level}</div>
                    <div className="td">{item.area}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

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