<template>
  <div class="amap-page-container" style="height: calc(100vh - 84px);">
    <el-amap
      ref="map"
      vid="amapDemo"
      :amap-manager="amapManager"
      :zoom="zoom"
      :center="center"
      :events="events"
      class="amap-demo"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="marker.id"
        :position="marker.position"
        :visible="markerVisible"
        :content="marker.content"
        :vid="index"
        :clickable="true"
        :events="marker.events"
      ></el-amap-marker>
      <el-amap-circle-marker
        v-for="marker in markersDevice"
        :key="marker.id"
        :visible="markersDeviceVisible"
        :center="marker.center"
        :radius="marker.radius"
        :fill-color="marker.fillColor"
        :fill-opacity="marker.fillOpacity"
        :stroke-color="'#ccc'"
        :stroke-opacity="0.9"
      ></el-amap-circle-marker>
      <div class="toolbar">
        <el-switch
          v-model="markersDeviceVisible"
          active-text="设备"
        >
        </el-switch>
        <el-switch
          v-model="markerVisible"
          active-text="用户"
        >
        </el-switch>
      </div>
    </el-amap>
  </div>
</template>

<script>
import Vue from 'vue';
import VueAMap from 'vue-amap';
import { AMapManager } from 'vue-amap';

Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: '95cc1b89d62f020ce5a21ec503daef6c',
  // 插件集合
  plugin: [
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor',
  ],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.15',
  uiVersion: '1.0.11',
});

export default {
  data(){
    const _this = this;
    return {
      map: {},
      amapManager: new AMapManager(),
      zoom: 6,
      center: [114.505208, 38.045474],
      events: {
        init: (o) => {
          o.setMapStyle('amap://styles/normal');
          console.log(o.getCenter());
          // console.log(this.$refs.map.$$getInstance());
          o.getCity(result => {
            console.log(result);
          });
        },
        'moveend': () => {
        },
        'zoomchange': () => {
          console.log('zoom:', _this.$refs.map);
          _this.zoom = this.$refs.map.$$getInstance().getZoom();
          console.log(_this.zoom);
        },
        'click': (e) => {
          alert('map clicked');
        },
      },
      plugin: ['ToolBar', {
        pName: 'MapType',
        defaultType: 0,
        events: {
          init(o) {
            console.log(o);
          },
        },
      }],
      markerContent: '<div class="mapIcon"><span class="mapIcon_title">%name</span><span class="mapIcon_num_all">%num</span><span class="mapIcon_num">%alarm</span></div>',
      markers: [],
      markerVisible: true,
      markersDevice: [],
      markersDeviceVisible: false,
    };
  },
  watch: {
  },
  mounted() {
  },
  created() {
    const that = this;
    this.markers = [
      {
        position: [114.505208, 38.045474],
        content: this.rebuildContent('赢得企图', 10, 5),
        userid: 1,
        events: {
          click() {
            // alert(1);
            that.getUserDevices([114.505208, 38.045474]);
          },
        },
      },
      {
        position: [113.505208, 38.015474],
        content: this.rebuildContent('正元化肥', 15, 0),
        userid: 2,
        events: {
          click(e) {
            // alert(2);
            that.getUserDevices([113.505208, 38.015474]);
          },
        },
      },
    ];
    this.markersDevice = [
      {
        center: [114.505208, 37.045474],
        radius: 13,
        fillColor: '#777',
        fillOpacity: 0.8,
      },
      {
        center: [112.505208, 37.045474],
        radius: 13,
        fillColor: '#750b17',
        fillOpacity: 0.8,
      },
      {
        center: [113.505208, 37.045474],
        radius: 13,
        fillColor: '#1c7a17',
        fillOpacity: 0.8,
      },
    ];
  },
  methods: {
    rebuildContent(content, deviceCount, alarmCount) {
      let mcontent = this.markerContent;
      mcontent = mcontent.replace(/%name/, content).replace(/%num/, deviceCount).replace(/%alarm/, alarmCount);
      console.log(mcontent);
      return mcontent;
    },
    getUserDevices(center) {
      // alert(userid);
      this.zoom = 13;
      this.center = center;
      this.markerVisible = false;
      this.markersDeviceVisible = true;
    },
    getDeviceInfo(deviceId) {
      alert(deviceId);
    },
  },
};
</script>

<style>
.amap-demo {
  height: 300px;
}
.mapIcon{
  vertical-align: middle;
  color: #555;
  background-color: #fffeef;
  font-size: 12px;
  white-space: nowrap;
  position: relative;
  border: 1px solid #8e8e8e;
  width: auto;
  border-radius: 5px 5px 5px 0;
  height: 23px;
  line-height: 23px;
  /* top: 25px; */
  /* left: -37px; */
}
.mapIcon_title{
  padding: 5px;
  border-radius: 5px 0 0 0;
}
.mapIcon_num{
  padding: 0 5px;
  display: inline-block;
  height: 100%;
  color: #fff;
  background-color: #dc3912;
  border-radius: 0 5px 5px 0;
}
.mapIcon_num_all{
  padding: 0 5px;
  display: inline-block;
  height: 100%;
  color: #fff;
  background-color: #23e610;
  /* border-radius: 0 5px 5px 0; */
}
.mapIcon:before, .mapIcon:after{
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: solid rgba(0,0,0,0);
  border-width: 6px;
  /* left: 40px; */
}
.mapIcon:before{
  bottom: -13px;
  border-top-color: #8e8e8e;
}
.mapIcon:after{
  bottom: -12px;
  border-top-color: #fffeef;
}
.toolbar{
  position: fixed;
  top: 120px;
  right: 40px;
}
</style>
