<template>
  <div class="map-layout">
    <div :style="style" id="container"></div>
    <div id="panel" class="panel"></div>
  </div>
</template>

<script>
import mapData from '@/tools/data/map.js'

export default {
  props: {
    theme: {
      default: 'darkblue'
    },
    currentMarker: { },
    width: {
      default: '100%'
    },
    height: {
      default: '100%'
    },
    center: {
      default: [114.068539, 22.551583]
    },
    lngLatArr: {
      default: [
        {
          'ID': 27,
          'address': '草堂路口南侧巨泽工业园壹号厂房',
          'latitude': 22.101621,
          'longitude': 113.301045,
          'name': '珠海贝格斯科技有限公司',
          'town': '三灶镇',
          'type': '传统优势'
        }
      ]
    },
    mapData
  },
  data () {
    return {
      type: 'darkblue',
      activeMarker: null,
      iconTag: 1,
      markerArr: []
      // center: [114.068539,22.551583]
    }
  },
  computed: {
    style () {
      return {
        width: this.width,
        height: this.height,
        map: ''

      }
    },
    icon () {
      let temp = new global.AMap.Icon({
        size: new global.AMap.Size(32, 32), // 图标尺寸
        image: require(`@/assets/images/${this.iconTag}.png`), // Icon的图像
        imageSize: new global.AMap.Size(32, 32) // 根据所设置的大小拉伸或压缩图片
      })
      return temp
    }
  },
  methods: {
    addMarker () {
      if (this.lngLatArr instanceof Array) {
        this.lngLatArr.forEach((item, idx) => {
          this.iconTag = this.switchTag(item.type)
          this.addWindowMarker(item, idx, this.icon)
        })
      }
    },
    switchTag (tag) {
      if (tag === '航空产业') {
        return 1
      } else if (tag === '生物医药') {
        return 2
      } else if (tag === '新能源') {
        return 3
      } else if (tag === '传统优势') {
        return 4
      } else {

      }
    },
    addWindowMarker (item, idx, icon) {
      this.markerArr = []
      global.AMapUI.loadUI(['overlay/SimpleInfoWindow'], SimpleInfoWindow => {
        var marker = new global.AMap.Marker({
          position: new global.AMap.LngLat(item.longitude, item.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: item.name,
          icon: icon,
          zIndex: 10,
          map: this.map
        })
        marker.seftadditional = {
          removeSeft: () => this.map.remove(marker),
          play: () => {
            marker.setAnimation('AMAP_ANIMATION_BOUNCE')
          },
          pause: () => marker.setAnimation(null)
        }

        // var infoWindow = new SimpleInfoWindow({
        //   infoTitle: '<strong>' + item.name + '</strong>',
        //   // 基点指向marker的头部位置
        //   offset: new global.AMap.Pixel(6, -31),
        //   infoBody: `<div>
        //   <p>法人：某某</p>
        //   </div>`
        // })

        var openInfoWin = () => {
          marker.seftadditional.play()

          // infoWindow.open(this.map, marker.getPosition())
        }

        // marker 点击时打开
        global.AMap.event.addListener(marker, 'click', () => {
          this.$emit('markerid', idx)
          openInfoWin()
          this.activeMarker = marker
        })
        this.markerArr.push(marker)
        // this.map.add(marker)
      })
    },
    init () {
      var map = new global.AMap.Map('container', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        center: [113.282738, 22.021087],
        mapStyle: 'amap://styles/' + this.theme,
        zoom: 12
      })
      this.map = map

      this.addMarker()

      // this.automobile()
    },
    addAllMarker () {
      var arr = []
      Object.keys(mapData).forEach(key => {
        mapData[key].forEach((item, idx) => {
          arr.push(item)
        })
      })
      arr.forEach((item, idx) => {
        // this.switchTag(item.type)
        let temp = new global.AMap.Icon({
          size: new global.AMap.Size(32, 32), // 图标尺寸
          image: require(`@/assets/images/${this.switchTag(item.type)}.png`), // Icon的图像
          imageSize: new global.AMap.Size(32, 32) // 根据所设置的大小拉伸或压缩图片
        })
        this.addWindowMarker(item, idx, temp)
      })
    }
  },
  mounted () {
    this.init()
    // this.addAllMarker()
  },
  watch: {
    activeMarker: function (newVal, oldVal) {
      oldVal && oldVal.seftadditional.pause()
      newVal && newVal.seftadditional.play()
    },
    theme () {
      this.init()
      // this.addAllMarker()
    },
    currentMarker (newVal, oldVal) {
      oldVal && this.markerArr[oldVal].seftadditional.pause()
      newVal && this.markerArr[newVal].seftadditional.play()
    },

    lngLatArr (val) {
      if (val !== 'ignore') {
        this.init()
      }
    }
  }
}
</script>

<style scoped>
.map-layout {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.panel {
  position: absolute;
  right: 0;
  width: 30%;
  top: 0;
  height: 100%;
  z-index: -3;
}
</style>
