<template>
  <div class="satellite-amap-wrap">
    <div id="satelliteAmapContainer" v-loading="isLoading"></div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';

export default {
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      point: [],
      f_id: '',
      equipType: [
        {
          value: '',
          label: '全部'
        }
      ],
      typeValue: '',
      addr: '',
      geocoder: null,
      loading: false,
      cluster: null,
      isLoading: false,
      styles: {
        // 基地的样式 多边形
        basePolygon: {
          fillColor: '#000000',
          strokeWeight: 3, // 轮廓宽度
          strokeColor: '#6FBD79',
          fillOpacity: '0.3',
          zIndex: 50
        },
        // 地块的样式 多边形
        landPolygon: {
          fillColor: 'red',
          strokeWeight: 3, // 轮廓宽度
          strokeColor: '#6FBD79',
          fillOpacity: '0.3',
          zIndex: 50
        },
        // 高亮显示的地块
        landPolygonAcitve: {
          fillColor: 'yellow',
          strokeWeight: 3, // 轮廓宽度
          strokeColor: 'yellow',
          fillOpacity: '0.3',
          zIndex: 52
        }
      },
      projectAreaList: [],
      currentProject: '',
      fencePointList: [],
      basePolygonList: [],
      hasCluster: false
    };
  },
  watch: {
    dataList: {
      deep: true,
      handler(val) {
        this.drawMap(val);
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    projectChange(val) {
      var coordinates = JSON.parse(val);
      this.drawMap(coordinates);
    },
    projectClear() {
      this.drawMap(this.fencePointList);
    },
    getProjectList() {
      // 获取地块信息
    },

    init() {
      lazyAMapApiLoaderInstance
        .load()
        .then(() => {
          // 初始化地图
          this.map && this.map.destroy();
          const map = new AMap.Map('satelliteAmapContainer', {
            center: this.center,
            resizeEnable: true,
            zoom: 15,
            lang: 'en',
            // mapStyle: 'amap://styles/blue',
            layers: [
              // 卫星
              new AMap.TileLayer.Satellite()
              // 路网
              // new AMap.TileLayer.RoadNet()
            ]
          });

          map.plugin(['AMap.DistrictSearch'], () => {
            this.setAdmin();
          });

          this.map = map;
          // var coordinates1 = [
          //   [
          //     [113.828098, 34.83121],
          //     [113.808191, 34.795551],
          //     [113.800048, 34.827496],
          //     [113.818748, 34.850024]
          //   ]
          // ];
          // var coordinates2 = [
          //   [
          //     [113.751045, 34.832943],
          //     [113.70731, 34.810163],
          //     [113.775778, 34.799266]
          //   ]
          // ];
          // var coordinates3 = [
          //   [
          //     [113.828098, 34.83121],
          //     [113.808191, 34.795551],
          //     [113.800048, 34.827496],
          //     [113.818748, 34.850024]
          //   ],
          //   [
          //     [113.751045, 34.832943],
          //     [113.70731, 34.810163],
          //     [113.775778, 34.799266]
          //   ]
          // ];

          // this.basePolygonList = map(
          //   concat(coordinates1, coordinates2, coordinates3),
          //   (item) => {
          //     return {
          //       path: item,
          //       ...this.styles.basePolygon
          //     };
          //   }
          // );
          // this.drawMap(coordinates1);
          // setTimeout(() => {
          //   this.drawMap(coordinates2);
          // }, 5000);
          // setTimeout(() => {
          //   this.drawMap(coordinates3);
          // }, 10000);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    drawMap(coordinates) {
      if (this.basePolygonList.length) {
        this.basePolygonList.forEach((item) => {
          this.map.remove(item);
        });
        this.basePolygonList = [];
      }
      if (Array.isArray(coordinates)) {
        coordinates.forEach((item) => {
          var basePolygonitem = new AMap.Polygon({
            extData: {
              id: item.id
            },
            path: item.paths,
            ...this.styles.basePolygon,
            ...{
              fillColor: item.color,
              strokeColor: item.color
            }
          });

          basePolygonitem.on('click', (ev) => {
            this.$emit('blockClick', ev.target.getExtData());
          });

          this.basePolygonList.push(basePolygonitem);
          this.map.add(basePolygonitem);
        });
      } else {
        var basePolygon = new AMap.Polygon({
          extData: {
            id: coordinates.id
          },
          path: coordinates.paths,
          ...this.styles.basePolygon,
          ...{
            fillColor: coordinates.color,
            strokeColor: coordinates.color
          }
        });
        this.basePolygonList.push(basePolygon);
        this.map.add(basePolygon);
      }
      this.map.setFitView(this.basePolygonList[0]);
    },
    setAdmin() {},
    // 增加标点
    addmasker() {
      var gridSize = 60;
      // 数据中需包含经纬度信息字段 lnglat
      var points = this.point;
      var count = points.length;
      var _renderClusterMarker = function (context) {
        // //console.log(context);
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 5px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div);
      };

      AMap.plugin(['AMap.MarkerClusterer'], () => {
        this.cluster = new AMap.MarkerCluster(this.map, points, {
          gridSize: gridSize, // 设置网格像素大小
          renderClusterMarker: _renderClusterMarker // 自定义聚合点样式
        });
        this.hasCluster = true;
      });
      this.isLoading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
#satelliteAmapContainer {
  height: 100%;
  width: 100%;

  ::v-deep .amap-logo {
    display: none !important;
  }

  ::v-deep .amap-copyright {
    display: none !important;
  }

  ::v-deep .amap-info-content {
    background: transparent;
    padding: 0;
    border-radius: 10px;
  }
}

.mask {
  border-style: solid;
  white-space: nowrap;
  z-index: 9999999;
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s,
    top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  background-color: rgba(50, 50, 50, 0.7);
  border-width: 0px;
  border-color: rgb(51, 51, 51);
  border-radius: 4px;
  color: rgb(255, 255, 255);
  font: 14px / 21px 'SimSun';
}
.satellite-amap-wrap {
  height: 100%;
  width: 100%;
  position: relative;
  ::v-deep .selectbox {
    position: absolute;
    top: 30px;
    left: 30px;
    .el-input__inner {
      width: 180px;
      background: #14253b;
      border: none;
      border-radius: initial;
      padding-left: 40px;
      color: white;
    }
  }
}
</style>
<style>
.el-select-dropdown.projectselect {
  background: linear-gradient(
    0deg,
    rgba(20, 37, 59, 0.35),
    rgba(7, 70, 135, 0.35)
  );
  border: none;
}
.el-select-dropdown.projectselect .el-select-dropdown__item {
  color: white;
  text-align: center;
  padding: 0;
}
.el-select-dropdown.projectselect .el-select-dropdown__list {
  padding: 0;
}
.el-select-dropdown.projectselect .el-select-dropdown__item {
  height: initial;
  line-height: initial;
}
.el-select-dropdown.projectselect .el-select-dropdown__item span {
  display: inline-block;
  width: 90%;
  line-height: 38px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}
.el-select-dropdown.projectselect .el-select-dropdown__item.hover {
  background: transparent;
}
.el-select-dropdown.projectselect .el-select-dropdown__item.hover > span {
  background: linear-gradient(
    0deg,
    rgba(3, 204, 194, 0),
    rgba(54, 165, 235, 0.95),
    rgba(10, 197, 187, 0)
  );
}
.el-select-dropdown.projectselect .popper__arrow {
  display: none;
}
.el-select-dropdown.projectselect .el-select-dropdown__item:last-child span {
  border-bottom: none;
}
.el-select-dropdown.projectselect.el-popper {
  margin: 0;
}

.satelliteAmapwrap .bottom-center .amap-info-sharp {
  border-top: 8px solid rgba(24, 23, 91, 0.6);
}
</style>
