<template>
  <div id="HouseMapContainer">
    <div class="icon-tooltip">
      <p><img src="@/assets/images/focus.png"/>重点关注对象</p>
      <!-- <p><img src="@/assets/images/rent.png"/>出租房</p> -->
      <p><img src="@/assets/images/old.png"/>独居高龄老人</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HouseMap',
  data() {
    return {
      mapConfig: {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        showLabel: true,
        zoom: 17.5,
        pitch: 40,
        rotation: 45,
        viewMode: '3D', // 开启3D视图,默认为关闭
        buildingAnimation:true, // 楼块出现是否带动画
        expandZoomRange:true,
        zooms: [10,20],
        center: [121.510659, 31.195735], // 临沂二村
        showIndoorMap: false,
        mapStyle:'amap://styles/light',
        features: ['bg','road', 'building'],
      },
      curPolygon: null,
    }
  },
  mounted() {
    this.$nextTick(this.initMap)
  },
  methods: {
    initMap(area) {
      this.map = new AMap.Map('HouseMapContainer', this.mapConfig)
      this.addController()
      this.highlightArea()
      this.addPoints()
    },
    addController() { // 添加地图控制器
      this.map.addControl(new AMap.ControlBar({
        showZoomBar: false,
        showControlButton: true,
        position: {
          right: '10px',
          top: '10px',
        }
      }))
    },
    highlightArea(area) { // 高亮区域
      const path = [
        ['121.510899', '31.196536'],
        ['121.510817', '31.19635'],
        ['121.510783', '31.196269'],
        ['121.510764', '31.196208'],
        ['121.510758', '31.196133'],
        ['121.510817', '31.196033'],
        ['121.5114', '31.1963'],
        ['121.51184', '31.195641'],
        ['121.511222', '31.195362'],
        ['121.511755', '31.194543'],
        ['121.511158', '31.194246'],
        ['121.510662', '31.195048'],
        ['121.509983', '31.194731'],
        ['121.509945', '31.194815'],
        ['121.509653', '31.195489'],
        ['121.509447', '31.19599'],
        ['121.509439', '31.196088'],
        ['121.509482', '31.196188'],
        ['121.509824', '31.196632'],
        ['121.51008', '31.196474'],
        ['121.510275', '31.196489'],
        ['121.510407', '31.196535'],
        ['121.511175', '31.197527'],
        ['121.511229', '31.197524'],
        ['121.511518', '31.197214'],
        ['121.511295', '31.197034'],
        ['121.511176', '31.196933'],
        ['121.511056', '31.196831'],
        ['121.510899', '31.196536'],
      ]
      const polygon = new AMap.Polygon({
        zIndex: 1,
        strokeWeight: 3,
        strokeStyle: 'dashed',
        path: path,
        fillOpacity: 0.2,
        fillColor: '#80d8ff',
        strokeColor: '#0091ea'
      })
      this.curPolygon = polygon
      this.map.add([polygon])
    },
    addPoints() { // 初始化添加楼栋图标，返回图标集合
      const markerCollection = []
      const mock = [
        {lon: 121.509987, lat: 31.195844, address: '南码头路451弄9号202室', icon: 'focus.png'},
        {lon: 121.510955, lat: 31.195374, address: '南码头路451弄23号302室', icon: 'focus.png'},
        {lon: 121.511426, lat: 31.196219, address: '浦三路12弄24号102室', icon: 'old.png'},
        {lon: 121.510068, lat: 31.195045, address: '南码头路451弄13号201室', icon: 'old.png'},
      ]
      const configMarker = item => {
        const marker = new AMap.Marker({
          position: [item.lon, item.lat],
          icon: new AMap.Icon({
            size: [30, 45],
            image: require(`@/assets/images/${item.icon}`),
          }),
          extData: {
            community: '临沂二村',
            address: item.address,
            lon: item.lon,
            lat: item.lat,
          },
        }).on('click', e => {
          this.showInfoTips(e, [e.lnglat.getLng(), e.lnglat.getLat()], marker.getExtData())
        })
        markerCollection.push(marker)
      }
      mock.forEach(configMarker)
      this.map.add(markerCollection)
    },
    showInfoTips(e, location, data) { // 地图显示浮窗信息
      let infoWindow = new AMap.InfoWindow({
        content: `
          <div>
            <b>${data.community}</b>
            <p>${data.address}</p>
          </div>
        `
      })
      infoWindow.open(this.map, location)
    },
  },
}
</script>

<style lang="stylus" scoped>
#HouseMapContainer
  width 100%
  height 100%
  resize both
  position relative
  .icon-tooltip
    position absolute
    bottom 2rem
    left 2rem
    z-index 100
    p
      display flex
      align-items center
      color #000
      font-weight bold
      margin-bottom 1rem
      font-size 1.4rem
      img
        width 2rem
        margin-right 1rem
</style>
<style lang="stylus">
.amap-logo
.amap-copyright
  display none !important
.amap-icon
  img
    width 100%
    height 100%
</style>
