<template>
  <div class="map-layout">
    <div class="map-header">
      <div class="map-header-center">
        <div class="map-header-center-title">融通地产危险源辨识系统</div>
        <div class="map-header-center-tip">
          Rongtong Real Estate Hazard Identification System
        </div>
      </div>
    </div>
    <div class="map-content">
      <div class="map-content-left">
        <map-item-container title="评估数据统计">
          <div ref="leftTop" style="width: 100%; height: 100%"></div>
        </map-item-container>
        <map-item-container title="评估数据统计">
          <mapTable />
        </map-item-container>
        <map-item-container title="评估数据统计">
          <echartMap />
        </map-item-container>
      </div>
      <div ref="myEchart" class="echart-instance"></div>
      <div class="map-content-right">
        <map-item-container title="事故类型统计">
          <div
            v-for="item in 10"
            :key="item"
            :style="randomCircle()"
            class="map-circle-item"
          ></div>
        </map-item-container>
      </div>
    </div>

    <div class="map-footer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
import echartMap from "./pie.vue";
import echartMap2 from "./pie2.vue";
import { mapTable, mapItemContainer } from "@/views/map/index.js";
export default {
  name: "echarts",
  components: {
    echartMap,
    echartMap2,
    mapTable,
    mapItemContainer,
  },
  data() {
    return {
      name: 100000,
      myMap: null,
      mapData: [],
    };
  },
  mounted() {
    this.myMap = echarts.init(this.$refs.myEchart);
    this.initMap();
    this.initListeners();
    this.initEcharts();
  },
  methods: {
    randomCircle() {
      const w = parseInt(Math.random() * 160 - 100);
      let r = Math.floor(Math.random() * 256); //0-255.999999
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      return {
        width: w + "px",
        height: w + "px",
        backgroundColor: `rgba(${r},${g},${b},0.4)`,
      };
    },
    initMap(code = 100000) {
      if (code != this.name) {
        this.myMap.clear();
      }
      this.name = code == 100000 ? "china" : code + "";
      axios
        .get(
          `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
        )
        .then((geoJson) => {
          if (!geoJson.data) {
            return;
          }
          echarts.registerMap(this.name, { geoJSON: geoJson.data });
          this.mapData = geoJson.data.features;
          this.myMap.setOption(
            {
              series: [
                {
                  type: "map3D",
                  boxWidth: 85,
                  map: this.name,
                  regionHeight: 4,
                  itemStyle: {},
                  viewControl: {
                    alpha: 60,
                  },
                  label: {
                    show: true,
                    formatter: (params) => {
                      return params.name + " ";
                    },
                    textStyle: {
                      color: "#2cb0e2",
                      fontSize: 10,
                    },
                  },
                  itemStyle: {
                    borderWidth: 2,
                    borderColor: "#2cb0e2",
                    color: "rgba(0, 0, 0, 0.3)",
                    // opacity: 0.6,
                    shadowColor: "rgba(0, 0, 0, 1)",
                    shadowBlur: 1,
                  },
                },
              ],
            },
            {
              notMerge: true,
            }
          );
        });
    },
    initListeners() {
      const _this = this;
      this.myMap.on("click", "series.map3D", function (params) {
        const selectData = _this.mapData.find(
          (x) => x.properties.name == params.name
        );
        if (selectData) {
          _this.initMap(selectData.properties.adcode);
        }
      });
    },
    initEcharts() {
      this.myLeft = echarts.init(this.$refs.leftTop);
      this.myLeft.setOption({
        series: [
          {
            name: "Pressure",
            type: "gauge",
            progress: {
              show: true,
            },
            detail: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 1,
              length: "80%",
              offsetCenter: [0, "8%"],
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 8,
              color: "green",
              itemStyle: {
                borderWidth: 2,
              },
            },
            data: [
              {
                value: 50,
              },
            ],
          },
        ],
      });
    },
    resetEcharts() {},
    map2d() {
      this.myMap.setOption({
        geo: {
          map: "china",
          label: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: "#2cb0e2",
            color: "#1f7fad",
            color: "rgba(0, 0, 0, 0.3)",
            opacity: 0.6,
            shadowColor: "rgba(0, 0, 0, 1)",
            shadowBlur: 1,
          },
          emphasis: {
            label: {
              show: true,
              distance: 10,
              formatter: "{a}",
              color: "#fff",
              fontSize: 10,
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#5ad8ff",
              color: "rgb(51 203 254)",
              opacity: 0.8,
            },
          },
          postEffect: {
            enable: true,
            bloom: {
              enable: false,
            },
          },
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-layout {
  width: 100%;
  height: 100%;
  background: #000;
  background: url("../assets/map/bg.png") no-repeat;
  background-size: 100% 100%;

  .map-header {
    height: 83px;
    z-index: 10;
    color: #fff;
    padding: 5px 16px;
    background: url("../assets/map/top.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: border-box;
    &-center {
      text-align: center;
      &-title {
        text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
        font-weight: 700;
        font-size: 24px;
      }
      &-tip {
        font-family: "微软雅黑", sans-serif;
        font-size: 16px;
        color: rgba(215, 215, 215, 0.4);
      }
    }
  }
  .map-footer {
    background: url("../assets/map/bottom.png") no-repeat;
    background-size: 100% 100%;
    height: 44px;
  }
  .map-content {
    width: 100%;
    height: calc(100% - 128px);
    &-left,
    &-right {
      width: 25%;
      height: 100%;
      float: left;
      position: relative;
    }
    &-left::after,
    &-right::after {
      content: "";
      width: 44px;
      height: 84%;
      background: url("../assets/map/hud-left.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 50%;
      z-index: 10;
      transform: translateY(-52%);
    }
    &-right::after {
      background-image: url("../assets/map/hud-right.png");
      position: absolute;
      right: 0;
      left: auto;
    }
  }

  .echart-instance {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    float: left;
  }
  .map-circle-item {
    border-radius: 50%;
  }
}

::-webkit-scrollbar {
  display: none;
}
</style>
