<template>
  <div class="map-index">
    <div class="map-index-left">
      <div class="map-index-left-wrap">
        <map-item-container title="评估数据统计">
          <div class="content-assess-tab">
            <div class="active">评估</div>
            <div>巡查</div>
          </div>
          <div
            v-for="item in 3"
            :key="item"
            style="width: 30%; display: inline-block"
            class="content-assess-item"
          >
            <div class="content-assess-title">评估项目</div>
            <div :id="'leftTop' + item" style="height: 100%"></div>
            <div class="content-assess-num">
              <div class="content-assess-num-txt">100<span>栋</span></div>
            </div>
          </div>
        </map-item-container>
        <map-item-container title="项目风险排名">
          <mapTable :tableList="tableList" />
        </map-item-container>
        <map-item-container title="项目风险排名">
          <div ref="bar" style="width: 100%; height: 100%"></div>
        </map-item-container>
      </div>
    </div>
    <div ref="myEchart" class="echart-instance"></div>
    <div class="map-index-right">
      <div class="map-index-right-wrap">
        <map-item-container title="风险级别统计">
          <echartMap />
        </map-item-container>
        <map-item-container title="事故类型统计">
          <div style="columns: 4" class="echarts-accident">
            <div
              v-for="(item, index) in accidentList"
              :key="item"
              :style="randomCircle(item, index)"
              class="map-circle-item"
            >
              <div>{{ item.name }}</div>
              <div>{{ item.value }}</div>
            </div>
          </div>
        </map-item-container>
        <map-item-container title="项目风险排名">
          <div ref="bar1" style="width: 100%; height: 100%"></div>
        </map-item-container>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
import { mapTable, mapItemContainer, echartMap } from "./components/index";
export default {
  name: "echarts",
  components: {
    echartMap,
    mapTable,
    mapItemContainer,
  },
  data() {
    return {
      accidentList: [
        {
          name: "物体打击",
          value: 1455,
          width: 100,
          top: 17,
          left: 100,
        },
        {
          name: "物体打击",
          value: 1455,
          width: 60,
          top: 118,
          left: 150,
        },
        {
          name: "物体打击",
          value: 1455,
          width: 60,
          top: 40,
          left: 22,
        },
        // {
        //   name: "物体打击",
        //   value: 1455,
        //   width: 60,
        //   top: 162,
        //   left: 96,
        // },
        {
          name: "物体打击",
          value: 1455,
          width: 60,
          top: 110,
          left: 38,
        },
        {
          name: "物体",
          value: 1455,
          width: 50,
          top: 140,
          left: 100,
        },
        {
          name: "物体打击",
          value: 1455,
          width: 60,
          top: 60,
          left: 230,
        },
        {
          name: "其他",
          value: 1455,
          width: 40,
          top: 140,
          left: 220,
        },
      ],
      name: 100000,
      myMap: null,
      mapData: [],
      myTopLeft: [],
      tableList: [],
      level: "",
      circlePos: [],
    };
  },
  mounted() {
    this.circlePos = this.generateRandomPointsInCircle(10);
    console.log(this.circlePos);
    this.myMap = echarts.init(this.$refs.myEchart);
    this.initMap();
    this.initListeners();
    this.initEcharts();
    this.getTableList();
  },
  methods: {
    getTableList() {
      for (let i = 0; i < 30; i++) {
        this.tableList.push({
          colunm1: {
            name: i % 2 == 0 ? "高德大厦" : "碧桂园大厦",
            color: "#fff",
            width: "30%",
          },
          colunm2: {
            name: "北京地区",
            color: "rgb(0, 255, 186)",
          },
          colunm3: {
            name: "天津市",
            color: "rgb(255, 234, 0)",
          },
          colunm4: {
            name: "22",
            color: "red",
          },
        });
      }
    },
    generateRandomPointsInCircle(numPoints) {
      var points = [];
      const center = [100, 80];
      const radius = 65;

      // var angleIncrement = (2 * Math.PI) / numPoints;

      for (var i = 0; i < numPoints; i++) {
        var angle = Math.random() * 2 * Math.PI;
        var x = center[0] + radius * Math.cos(angle);
        var y = center[1] + radius * Math.sin(angle);
        points.push([x, y]);
      }
      return points;
    },

    randomCircle(item, index) {
      const w = parseInt(Math.random() * 40 + 50);
      // let r = Math.floor(Math.random() * 256); //0-255.999999
      // let g = Math.floor(Math.random() * 256);
      // let b = Math.floor(Math.random() * 256);
      var brightness = 100; // 设置亮度
      var r = Math.floor(Math.random() * (256 - brightness) + brightness);
      var g = Math.floor(Math.random() * (256 - brightness) + brightness);
      var b = Math.floor(Math.random() * (256 - brightness) + brightness);
      console.log(this.circlePos[index]);
      if (this.circlePos.length) {
        return {
          width: item.width + "px",
          height: item.width + "px",
          backgroundColor: `rgba(${r},${g},${b},0.4)`,
          color: `rgb(${r},${g},${b})`,
          position: "absolute",
          left: item.left + "px",
          top: item.top + "px",
        };
      }
    },
    object2Geojson(data) {
      var featureCollection = { type: "FeatureCollection" };
      var features = new Array();

      for (let i = 0; i < data.length; i++) {
        var feature = { type: "Feature" };
        feature.properties = data[i];
        var geometry = { type: "Point" };
        geometry.coordinates = [data[i].LON, data[i].LAT];
        feature.geometry = geometry;
        features.push(feature);
      }

      featureCollection.features = features;
      return featureCollection;
    },
    initMap(code = 100000) {
      if (code != this.name) {
        this.myMap.clear();
      }
      this.name = code == 100000 ? "china" : code + "";
      // `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
      axios.get(`/mapJson/${this.name}.json`, { dataType: "json" }).then((geoJson) => {
        console.log(geoJson);
        if (!geoJson.data) {
          return;
        }
        echarts.registerMap(this.name, { geoJSON: geoJson.data });
        this.mapData = geoJson.data.features;
        console.log(this.mapData);
        this.level = this.mapData[0].properties.level;
        var regions = [];
        this.mapData.forEach(function (feature) {
          if (feature.properties.center && feature.properties.center.length) {
            regions.push({
              name: feature.properties.name,
              value: [...feature.properties.center, Math.random() * 10],
            });
          }
        });
        this.myMap.setOption(
          {
            geo3D: {
              map: this.name,
              show: false,
              boxWidth: 85,
              regionHeight: 4,
              viewControl: {
                alpha: 60,
              },
            },
            xAxis3D: {
              name: "protein",
            },
            yAxis3D: {
              name: "fiber",
            },
            zAxis3D: {
              name: "sodium",
            },
            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)",
                  shadowColor: "rgba(0, 0, 0, 1)",
                  shadowBlur: 1,
                },
                data: regions,
              },
              // {
              //   type: "scatter3D",
              //   coordinateSystem: "geo3D",
              //   symbolSize: 20,
              //   data: regions,
              //   zlevel: 1,
              // },
            ],
          },
          {
            notMerge: true,
          }
        );
      });
    },
    initListeners() {
      const _this = this;
      this.myMap.on("click", "series.map3D", function (params) {
        if (_this.level == 4) {
          _this.$router.push("/map/detail");
        }

        const selectData = _this.mapData.find(
          (x) => x.properties.name == params.name
        );
        if (selectData) {
          _this.initMap(selectData.properties.id);
        }
      });
    },
    initEcharts() {
      // 评估数据统计
      for (let i = 1; i <= 3; i++) {
        const echart = echarts.init(document.getElementById("leftTop" + i));
        echart.setOption({
          series: [
            {
              name: "Pressure",
              type: "gauge",
              detail: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              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: "100%",
                offsetCenter: [0, "8%"],
                itemStyle: {
                  color: "rgba(255, 252, 57,0.6)",
                },
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 8,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "rgba(255, 252, 57,0.6)",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  opacity: 0.1,
                },
              },
              progress: {
                show: true,
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(164, 190, 203,0.6)", // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: "rgba(1,179,227,0.6)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(67,243,203,0.6)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              data: [
                {
                  value: i * 30,
                },
              ],
            },
          ],
        });
        this.myTopLeft.push(echart);
      }
      // 风险类型统计
      const bar = echarts.init(this.$refs.bar);
      const bar1 = echarts.init(this.$refs.bar1);
      var hours = [
        "12a",
        "1a",
        "2a",
        "3a",
        "4a",
        "5a",
        "6a",
        "7a",
        "8a",
        "9a",
        "10a",
        "11a",
        "12p",
        "1p",
        "2p",
        "3p",
        "4p",
        "5p",
        "6p",
        "7p",
        "8p",
        "9p",
        "10p",
        "11p",
      ];
      const data = [
        [1, 0, 5],
        [0.1, 17, 4],
        [0.1, 16, 7],
        [0.1, 1, 3],
        [0.1, 13, 4],
        [0.1, 8, 11],
        [0.1, 20, 3],
        [0.1, 16, 14],
        [0.1, 10, 2],
        [0.1, 6, 0],
        [0.1, 3, 12],
        [0.1, 20, 16],
      ];
      const option = {
        visualMap: {
          show: false,
          max: 20,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {
          type: "category",
          data: hours,
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
        },
        yAxis3D: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
        },
        zAxis3D: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
        },
        grid3D: {
          boxWidth: 230,
          boxHeight: 120,
          boxDepth: 90,
          viewControl: {
            alpha: 0,
            beta: 0,
          },
          axisLine: {
            lineStyle: { color: "rgba(255,255,255,0.1)" },
          },
          light: {
            main: {
              shadow: true,
              quality: "ultra",
              intensity: 1.5,
            },
          },
        },
        series: [
          {
            type: "bar3D",
            data: data.map(function (item) {
              return {
                value: [item[1], item[0], item[2]],
              };
            }),
            shading: "color",
            label: {
              show: false,
              fontSize: 16,
              borderWidth: 1,
            },
            itemStyle: {
              opacity: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
                color: "#900",
              },
              itemStyle: {
                color: "#900",
              },
            },
          },
        ],
      };
      bar.setOption(option);
      bar1.setOption(option);
    },
    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-index {
  width: 100%;
  height: 100%;
  &-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;
  //   }
  &-left-wrap {
    margin-left: 20px;
    height: 100%;
  }
  &-right-wrap {
    margin-right: 40px;
    height: 100%;
  }
}

.echart-instance {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  float: left;
}
.map-circle-item {
  border-radius: 50%;
  animation: circleAnimation 0.5s infinite;
  margin: 10px;
  break-inside: avoid;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
}

.map-circle-item:nth-of-type(2n + 1) {
  animation: circleAnimation 1.8s infinite;
}
.map-circle-item:nth-of-type(2n) {
  animation: circleAnimation 2s infinite;
}
.map-circle-item:nth-of-type(1) {
  animation: circleAnimation 2.5s infinite;
}
.map-circle-item:last-child {
  animation: circleAnimation 1.2s infinite;
}

@keyframes circleAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

::-webkit-scrollbar {
  display: none;
}

// 评估数据
.content-assess-item {
  display: inline-block;
  width: 40%;
  text-align: center;
  .content-assess-title {
    height: 60px;
    width: 100%;
    background: url("../../assets/map/content-assess-title.png") center center;
    background-size: 100% 100%;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
  }
  .content-assess-num {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    background: url("../../assets/map/content-assess-bottom.png") center center;
    background-size: 100% 100%;
    font-size: 22px;
    color: #48aefb;
    position: relative;
    &-txt {
      display: inline-block;
      transform: translateY(-25px);
    }
  }
}
.content-assess-tab {
  font-size: 10px;
  color: #fff;
  text-align: left;
  & > div {
    display: inline-block;
    width: 45px;
    text-align: center;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
  }
  & > .active {
    border-radius: 50%;
    border-image: linear-gradient(90deg, #48aefb, #87cafc) 1 1;
  }
}
.map-index {
  width: 98%;
  margin: 0 auto;
  .map-content-item {
    height: 34%;
  }
}
.echarts-accident {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  background: url("../../assets/map/accident.png") center bottom no-repeat;
  background-size: 100%;
  position: relative;
}
</style>
