import React, { Component } from "react";
import Echarts from "echarts";
import "./middle-top.less";
import ningbo from "../../util/ningbo.json";
export default class middleTop extends Component {
  componentDidMount() {
    let ningboGeo = Echarts.init(document.getElementById("ningboGeo"));
    Echarts.registerMap("ningbo", ningbo);
    let geoCoordMap = {
      海曙: [121.369698, 29.804452],
      江北: [121.439282, 29.968361],
      北仑: [121.931303, 29.854452],
      杭湾: [121.253162, 30.352107],
      鄞州: [121.658436, 29.731662],
      象山: [121.877091, 29.470206],
      宁海: [121.432606, 29.299836],
      余姚: [121.206294, 30.045404],
      慈溪: [121.448052, 30.177142],
      奉化: [121.41089, 29.562348],
      镇海: [121.739282, 29.968361],
    };
    let geoCoordMap1 = {
      海曙: [121.239698, 29.804452],
      江北: [121.529282, 29.928361],
      北仑: [121.801303, 29.854452],
      杭湾: [121.103162, 30.352107],
      鄞州: [121.558436, 29.731662],
      象山: [121.777091, 29.470206],
      宁海: [121.332606, 29.299836],
      余姚: [121.056294, 30.045404],
      慈溪: [121.308052, 30.177142],
      奉化: [121.28089, 29.562348],
      镇海: [121.639282, 29.968361],
    };
    let regions = [
      {
        name: "海曙", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "江北", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "北仑", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "杭湾", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "鄞州", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "象山", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "宁海", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "余姚", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "慈溪", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "奉化", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
      {
        name: "镇海", //区块名称
        itemStyle: {
          normal: {
            areaColor: "#073978",
          },
        },
      },
    ];
    var data = [
      {
        name: "海曙",
        value: 200,
        show: false,
      },
      {
        name: "江北",
        value: 39,
        show: false,
      },
      {
        name: "镇海",
        value: 152,
        show: false,
      },
      {
        name: "北仑",
        value: 152,
        show: false,
      },
      {
        name: "杭湾",
        value: 199,
        show: false,
      },
      {
        name: "鄞州",
        value: 39,
        show: false,
      },
      {
        name: "余姚",
        value: 152,
        show: false,
      },
      {
        name: "慈溪",
        value: 152,
        show: false,
      },
      {
        name: "奉化",
        value: 39,
        show: false,
      },
      {
        name: "宁海",
        value: 152,
        show: false,
      },
      {
        name: "象山",
        value: 152,
        show: false,
      },
    ];
    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    var convertData1 = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap1[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    let option = {
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          return params.name;
        },
      },
      geo: {
        show: true,
        map: "ningbo",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        zoom: 1.2,
        roam: true,
        itemStyle: {
          normal: {
            areaColor: "#073978",
            borderColor: "#ffffff",
            borderWidth: 2,
          },
          emphasis: {
            areaColor: "#2B91B7",
          },
        },
        regions: regions,
      },
      series: [
        {
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          name: "light",
          type: "scatter",
          coordinateSystem: "geo",
          data: convertData1(data),
        },
        {
          name: "Top 5",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "pin",
          symbolSize: [50, 50],
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 9,
                fontWeight: "bolder",
              },
              formatter(value) {
                return value.data.value[2];
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#00a7d9", //标志颜色
            },
          },
          data: convertData(data),
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          zlevel: 1,
        },
        {
          name: "Top 5",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "pin",
          symbolSize: [50, 50],
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 9,
                fontWeight: "bolder",
              },
              formatter(value) {
                return value.data.value[2];
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#f6a301", //标志颜色
            },
          },
          data: convertData1(data),
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          zlevel: 1,
        },
      ],
    };
    ningboGeo.setOption(option);
    ningboGeo.on("click", function (params) {
      regions.map((item) => {
        item.itemStyle.normal.areaColor = "#073978";
        if (item.name === params.name) {
          item.itemStyle.normal.areaColor = "#3e82d5";
        }
        return true;
      });

      //逻辑控制

      ningboGeo.setOption(option, true);
    });
  }
  render() {
    return (
      <div className="middleTop">
        <div className="middleTop-title f12 flex">
          <div className="react">
            <span className="text active">历史</span>
          </div>
          <div className="react">
            <span className="text">当月</span>
          </div>
        </div>
        <div className="middleTop-sum ">
          <div>历史预警总数</div>
          <div className="blod">
            <div className="middleTop-box flex">
              <div className="middleTop-small bg-orange"></div>
              <span className="orange">1375</span>
            </div>
            <div className="middleTop-box flex">
              <div className="middleTop-small bg-blue"></div>
              <span className="blue">300</span>
            </div>
          </div>
        </div>
        <div className="middleTop-type">
          <div className="middleTop-box flex">
            <div className="middleTop-small bg-orange"></div>
            <span>供电企业预警数</span>
          </div>
          <div className="middleTop-box flex">
            <div className="middleTop-small bg-blue"></div>
            <span>产业单位预警数</span>
          </div>
        </div>
        <div
          id="ningboGeo"
          className="ningboGeo"
          style={{ height: "55vh" }}
        ></div>
      </div>
    );
  }
}

Lifelong learning lifelong benefit