import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { useMount } from "ahooks";
import { useEffect, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
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 { initEcharts1 } from "./echarts";
import "./index.less";

function IndexLeft(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([
    { levelName: "重大风险", riskCount: 21, notRiskCount: 3 },
    { levelName: "较大风险", riskCount: 21, notRiskCount: 3 },
    { levelName: "一般风险", riskCount: 21, notRiskCount: 3 },
    { levelName: "低风险", riskCount: 21, notRiskCount: 3 },
  ]);
  const [block4List, setBlock4List] = useState([
    { relatedPartyCategory: "承包商", firstLevelUnits: 15, firstLevelPersonnel: 120, secondLevelUnits: 25, secondLevelPersonnel: 320 },
    { relatedPartyCategory: "供应商", firstLevelUnits: 8, firstLevelPersonnel: 85, secondLevelUnits: 18, secondLevelPersonnel: 210 },
    { relatedPartyCategory: "分包商", firstLevelUnits: 12, firstLevelPersonnel: 95, secondLevelUnits: 30, secondLevelPersonnel: 450 },
    { relatedPartyCategory: "监理单位", firstLevelUnits: 5, firstLevelPersonnel: 40, secondLevelUnits: 10, secondLevelPersonnel: 80 },
    { relatedPartyCategory: "设计单位", firstLevelUnits: 6, firstLevelPersonnel: 55, secondLevelUnits: 12, secondLevelPersonnel: 120 },
    { relatedPartyCategory: "施工单位", firstLevelUnits: 18, firstLevelPersonnel: 200, secondLevelUnits: 40, secondLevelPersonnel: 680 },
    { relatedPartyCategory: "检测机构", firstLevelUnits: 3, firstLevelPersonnel: 25, secondLevelUnits: 8, secondLevelPersonnel: 65 },
    { relatedPartyCategory: "咨询公司", firstLevelUnits: 7, firstLevelPersonnel: 60, secondLevelUnits: 15, secondLevelPersonnel: 180 },
    { relatedPartyCategory: "运维单位", firstLevelUnits: 9, firstLevelPersonnel: 75, secondLevelUnits: 22, secondLevelPersonnel: 320 },
    { relatedPartyCategory: "其他单位", firstLevelUnits: 4, firstLevelPersonnel: 35, secondLevelUnits: 14, secondLevelPersonnel: 150 },
  ]);

  const chartInstance = useRef(null);
  const main1Ref = useRef(null);

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

  const getLevelColor = (level) => {
    return { 重大风险: "#FF0000", 较大风险: "#FF3C00", 一般风险: "#E5E72F", 低风险: "#0E7DFA" }[level];
  };

  useMount(() => {
    initEcharts1(main1Ref, chartInstance, [
      { departmentName: "技术部", riskCoverageRate: 95, hiddenInvestigationRate: 92, hiddenRectificationRate: 90, checkTaskCompletionRate: 94 },
      { departmentName: "销售部", riskCoverageRate: 88, hiddenInvestigationRate: 85, hiddenRectificationRate: 87, checkTaskCompletionRate: 89 },
      { departmentName: "市场部", riskCoverageRate: 92, hiddenInvestigationRate: 90, hiddenRectificationRate: 88, checkTaskCompletionRate: 91 },
      { departmentName: "运营部", riskCoverageRate: 96, hiddenInvestigationRate: 94, hiddenRectificationRate: 95, checkTaskCompletionRate: 93 },
      { departmentName: "客服部", riskCoverageRate: 85, hiddenInvestigationRate: 83, hiddenRectificationRate: 86, checkTaskCompletionRate: 84 },
      { departmentName: "财务部", riskCoverageRate: 98, hiddenInvestigationRate: 96, hiddenRectificationRate: 97, checkTaskCompletionRate: 97 },
      { departmentName: "人事部", riskCoverageRate: 87, hiddenInvestigationRate: 84, hiddenRectificationRate: 85, checkTaskCompletionRate: 86 },
      { departmentName: "研发部", riskCoverageRate: 94, hiddenInvestigationRate: 91, hiddenRectificationRate: 93, checkTaskCompletionRate: 92 },
      { departmentName: "质量部", riskCoverageRate: 90, hiddenInvestigationRate: 88, hiddenRectificationRate: 89, checkTaskCompletionRate: 88 },
      { departmentName: "采购部", riskCoverageRate: 86, hiddenInvestigationRate: 84, hiddenRectificationRate: 83, checkTaskCompletionRate: 85 },
    ]);

    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
        chartInstance.current = null;
      }
    };
  });

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

  return (
    <div className="branch_office_index_left">
      <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>
          </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="items">
            {block2List.map((item, index) => (
              <div className="item" key={index}>
                <div className="decoration" style={{ backgroundColor: getLevelColor(item.levelName) }} />
                <div className="title" style={{ color: getLevelColor(item.levelName), borderColor: getLevelColor(item.levelName) }}>
                  {item.levelName}
                </div>
                <div className="info">
                  <div>
                    <span>风险点数：</span>
                    <span>{item.riskCount}</span>
                  </div>
                  <div className="bottom">
                    <div>
                      <span>检查覆盖率：</span>
                      <span>{`${(item.riskCount / item.riskCount * 100).toFixed(0)}%`}</span>
                    </div>
                    <div>
                      <span>未覆盖风险点数：</span>
                      <span>{item.notRiskCount}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="block3">
        <Title title="部门职责落实情况" />
        <div className="options">
          <div ref={main1Ref} style={{ width: "100%", height: "200px" }} />
        </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 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.relatedPartyCategory}</div>
                    <div className="td">{item.firstLevelUnits}</div>
                    <div className="td">{item.firstLevelPersonnel}</div>
                    <div className="td">{item.secondLevelUnits}</div>
                    <div className="td">{item.secondLevelPersonnel}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

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