<template>
  <div>
    <svg-icon
      v-show="isfanhui"
      class="back"
      icon-class="back"
      @click="fanhui"
    />
  </div>
</template>

<script>
import { getEventSeverity } from "@/api/sagSeverity.js";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  data() {
    return {
      isfirst: false,
      statisticalType: {},
      classificationData: [],
      sera: 0,
      isfanhui: false,
      device: null,
      zoom: "", //图表焦点校验
      h: null,
      isLoading1: false,
      myChart: null,
      data: null,
    };
  },
  created() {
    this.search();
  },
  mounted() {
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
      this.myChartes.resize();
    });
    this.getclassificationData();
    let itic = document.getElementById("china");

    (itic.style.width =
      document.getElementById("app-main-in").offsetWidth / 2 - 50 + "px"),
      (itic.style.height =
        window.sessionStorage.getItem("appheight") - 130 + "px");

    let Name = this.$store.getters.projectUnit.name;
    if (Name == "中国") {
      Name = "全国";
    }
    // this.$nextTick(() => {
    this.search();
    // });
  },
  computed: {
    test2() {
      // console.log(this.sera, "this.sera");
      this.sera = this.$store.getters.search;
      return this.sera;
    },
  },
  watch: {
    test2: {
      immediate: true,
      handler: function (newval) {
        if (this.sera == 0) {
        } else {
          this.search();
        }
      },
    },
  },
  methods: {
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.statisticalType = this.classificationData[0];
    },
    search() {
      let Name = this.$store.getters.projectUnit.name;
      // console.log(Name, "nameeeee");
      if (Name == "中国") {
        Name = "全国";
        this.isfanhui = false;
      } else {
        this.isfanhui = true;
      }
      setTimeout(() => {
        this.echarts(Name);
      }, 500);
    },
    fanhui() {
      this.isfanhui = false;

      //  this.$store.commit("sagServerity/SET_PROJECTUNIT", {id:JSON.parse(sessionStorage.getItem('Info')).deptId,name:JSON.parse(sessionStorage.getItem('Info')).deptName})
      this.echarts("中国");
    },
    async echarts(val) {
      let _this = this;

      // //各份的地图json文件
      // var provinces = {
      //   上海市: "./static/mapjson/上海市.json",
      //   河北省: "./static/mapjson/河北省.json",
      //   山西省: "./static/mapjson/山西省.json",
      //   内蒙古自治区: "./static/mapjson/内蒙古自治区.json",
      //   辽宁省: "./static/mapjson/辽宁省.json",
      //   吉林省: "./static/mapjson/吉林省.json",
      //   黑龙江省: "./static/mapjson/黑龙江省.json",
      //   江苏省: "./static/mapjson/江苏省.json",
      //   浙江省: "./static/mapjson/浙江省.json",
      //   安徽省: "./static/mapjson/安徽省.json",
      //   福建省: "./static/mapjson/福建省.json",
      //   江西省: "./static/mapjson/江西省.json",
      //   山东省: "./static/mapjson/山东省.json",
      //   河南省: "./static/mapjson/河南省.json",
      //   湖北省: "./static/mapjson/湖北省.json",
      //   湖南省: "./static/mapjson/湖南省.json",
      //   广东省: "./static/mapjson/广东省.json",
      //   广西壮族自治区: "./static/mapjson/广西壮族自治区.json",
      //   海南省: "./static/mapjson/海南省.json",
      //   四川省: "./static/mapjson/四川省.json",
      //   贵州省: "./static/mapjson/贵州省.json",
      //   云南省: "./static/mapjson/云南省.json",
      //   西藏自治区: "./static/mapjson/西藏自治区.json",
      //   陕西省: "./static/mapjson/陕西省.json",
      //   甘肃省: "./static/mapjson/甘肃省.json",
      //   青海省: "./static/mapjson/青海省.json",
      //   宁夏回族自治区: "./static/mapjson/宁夏回族自治区.json",
      //   新疆维吾尔自治区: "./static/mapjson/新疆维吾尔自治区.json",
      //   北京市: "./static/mapjson/北京市.json",
      //   天津市: "./static/mapjson/天津市.json",
      //   重庆市: "./static/mapjson/重庆市.json",
      //   香港特别行政区: "./static/mapjson/香港特别行政区.json",
      //   澳门特别行政区: "./static/mapjson/澳门特别行政区.json",
      // };
      let params = {
        deptIndex: "",
        lineGrade: "",
        loadType: null,
        manufacturer: null,
        monitorFlag: 0,
        powerFlag: 0,
        reportFlag: "",
        scale: null,
        searchBeginTime: "",
        searchEndTime: "",
        serverName: "",
        statFlag: true,
        statisticalType: null,
        timeFlag: 0,
      };

      let allData = [];

      await getEventSeverity(params).then((res) => {
        let arry = [];
        let max;
        let min;
        res.data.eventSeverityValue.forEach((i) => {
          let arry1 = {
            name: i.areaName,
            lineNum: i.lineNum,
            value: i.eventNum,
          };
          // console.log(arry1.name, "arry1.name");
          let num = i.eventNum;

          if (max) {
            if (max > num) {
              max = num;
            }
          } else {
            max = num;
          }
          if (min) {
            if (min < num) {
              min = num;
            }
          } else {
            min = num;
          }
          // console.log(max, min, "maxmin");
          arry.push(arry1);
        });
        allData = arry;

        if (val) {
          let mapname = val;

          if (mapname == "中国") {
            mapname = "全国";
          }
          if (mapname == "全国") {
            loadMap("./static/mapjson/全国.json", "china", min, max);
          } else {
            loadMap("./static/mapjson/" + mapname + ".json", mapname, min, max);
          }
        } else {
          loadMap("./static/mapjson/全国.json", "china", min, max);
        }
      });

      function loadMap(mapCode, name, min, max) {
        _this.$axios.get(mapCode).then((data) => {
          // console.log(mapCode, data, "mapdata,data+!!!!!");
          allData;
          if (data.data) {
            if (_this.myChart != null) {
              _this.myChart.dispose();
            }
            let echarts = require("echarts");
            let domID1 = document.getElementById("china");
            _this.myChart = echarts.init(domID1);
            echarts.registerMap(name, data.data);
            var white = "#000";
            // console.log(allData, "alldata");
            var option = {
              animation: true,
              animationThreshold: 2000,
              animationDuration: 1000,
              animationEasing: "cubicOut",
              animationDelay: 0,
              animationDurationUpdate: 300,
              animationEasingUpdate: "cubicOut",
              animationDelayUpdate: 0,
              color: [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597",
              ],

              series: [
                {
                  geoIndex: 0,
                  type: "map",
                  name: "MAP",
                  label: {
                    show: true,
                    position: "top",
                    color: "#00f",
                    margin: 8,
                    formatter: "{b}:{c}",
                  },
                  mapType: name,
                  data: allData,
                  roam: true,
                  zoom: 1,
                  showLegendSymbol: true,
                  emphasis: {},
                  rippleEffect: {
                    show: true,
                    brushType: "stroke",
                    scale: 2.5,
                    period: 4,
                  },
                },
              ],
              geo: {
                map: name,
                roam: true,
                // scaleLimit: {
                //     min: 1,
                //     max: 2
                // },
                zoom: 1.5,
                top: 150,
                label: {
                  normal: {
                    show: true,
                    fontSize: "14",
                    color: "rgba(0,0,0,0.7)",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "rgba(51, 69, 129, .8)", //地图背景色
                    borderColor: "#999999",
                    borderWidth: 1,
                    areaColor: {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.8,
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
                        },
                      ],
                      globalCoord: false, // 缺省为 false
                    },
                    shadowColor: "rgba(128, 217, 248, 1)",
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10,
                  },
                  emphasis: {
                    areaColor: "#ccc",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    borderWidth: 0,
                  },
                },
              },

              legend: [
                {
                  data: ["高校数量"],
                  selected: {
                    高校数量: true,
                  },
                  show: true,
                },
              ],
              tooltip: {
                trigger: "item",
                formatter: function (params) {
                  //console.log(params)
                  var tips = "";
                  if (params.value == 0) {
                    tips =
                      "<font style='color:" + white + "'>暂无数据</font><br/>";
                  } else {
                    tips +=
                      "<font style='color:" +
                      white +
                      "'>" +
                      params.name +
                      "</font><br/>暂降严重度" +
                      "<font style='color:" +
                      white +
                      "'>:" +
                      params.value +
                      "</font><br/>";
                  }
                  return tips;
                },
              },

              title: {
                text: "暂降严重度",
                left: "center",
                top: "5%",
              },

              visualMap: {
                show: true,
                type: "continuous",

                inRange: {
                  color: ["#50a3ba", "#eac763", "#d94e5d"],
                },
                calculable: true,

                orient: "vertical",

                // type: 'continuous',
                text: ["", "暂降严重度"],
                showLabel: true,
                left: "50",
                min: 0,
                max: min,
                // lable:'暂降严重度',
                splitNumber: 0,
              },
            };

            _this.myChart.setOption(option)
window.echartsArr.push(_this.myChart);

            var timeFn = null;
            //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
            _this.myChart.on("click", function (params) {
              // console.log(111);
              clearTimeout(timeFn);
              //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
              timeFn = setTimeout(function () {
                var name = params.name; //地区name
              var mapCode = './static/mapjson/'+name+'.json'; //地区的json数据
                if (!mapCode) {
                  // alert("无此区域地图显示");
                  return;
                }
                let deptree = _this.$store.getters.deptree;
                // console.log(deptree, "deptree");
                deptree.data[0].children.forEach((i) => {
                  // console.log(i, "iiii");

                  if (i.name == name) {
                    _this.$store.commit("sagServerity/SET_PROJECTUNIT", {
                      id: i.id,
                      name: i.name,
                    });
                  }
                });
                // console.log(mapCode, name, "mapcode");
                if (name !== "中国") {
                  _this.isfanhui = true;
                }

                _this.echarts(name);
              }, 250);
            });
            // 绑定双击事件，返回全国地图
            _this.myChart.on("dblclick", function (params) {
              //当双击事件发生时，清除单击事件，仅响应双击事件
              clearTimeout(timeFn);

              //返回全国地图
              loadMap("/api8/tiles/全国.json", "");
            });
          } else {
            alert("无法加载该地图");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.back {
  position: absolute;
  z-index: 999999999;
  margin-right: 10px;
  margin-left: auto;
  font-size: 29px;
  line-height: 32px;
  color: $themeColor;
  cursor: pointer;
  &:hover {
    color: $themeColor;
    opacity: 0.9;
  }
}
</style>
