// 地图组件

<template>
  <div class="my-map">
    <el-dialog title="仓库地址" :visible.sync="visible">
      <el-amap 
        ref="map" 
        vid="amapDemo" 
        :amap-manager="amapManager" 
        :center="center" 
        :zoom="zoom" 
        :plugin="plugin" 
        :events="events" 
        class="amap-demo"
      >
        <el-amap-search-box :on-search-result="onSearchResult" :events='searchEvents'/>
        <el-amap-marker :position="marker.position" :vid='1' v-if='marker.position'>
          <div class='map-marker'>
            <img src="../assets/images/ego_box_img_normal.png" alt="">
            <p>
              <el-tag type='danger'>{{mapData.address}}</el-tag>
            </p>
          </div>
        </el-amap-marker>
      </el-amap>
      <div slot="footer" class="dialog-footer">
        <el-button size='mini' @click="$emit('input', false)">取 消</el-button>
        <el-button size='mini' type="primary" @click="choose">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();

export default {
  props: {
    value: {
      type: Boolean,
    },
    originData: {
      type: Object,
      default: () => {}
    },
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set() {
        this.$emit('input', false);
      }
    }
  },
  methods: {
    setMarker(lng, lat, address) {
      if(!lng && !lat) return;
      const size = (address || '').length * 5;
      this.marker = {
        position: [lng, lat], 
      };
      this.mapData = {
        lng,
        lat,
        address,
      };
    },
    // 处理搜索结果，定位到中心点
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if(!pois.length) return;
      pois.forEach(poi => {
        let {lng, lat} = poi;
        lngSum += lng;
        latSum += lat;
      });
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length
      };
      this.setMarker(center.lng, center.lat, pois[0].name);
      this.center = [center.lng, center.lat];
    },
    choose() {
      this.$emit('input', false);
      this.$emit('choose', JSON.parse(JSON.stringify(this.mapData)));
    },
  },
  data() {
    return {
      searchEvents: {
        init: e=>{}
      },
      mapData: {},
      geocoder: null,
      amapManager,
      zoom: 12,
      center: [104.007767, 30.568308],
      marker: {},
      events: {
        init: e => {
          this.geocoder = new AMap.Geocoder();
          const {lng, lat, address} = this.originData;
          this.setMarker(lng, lat, address);
          if(lng) {
            this.center = [lng, lat]
          }
        },
        click: e => {
          const {lat, lng} = e.lnglat;
          this.geocoder.getAddress([lng, lat], (status, result)=>{
            if (status === 'complete' && result.info === 'OK') {
              const address = result.regeocode.formattedAddress;
              this.setMarker(lng, lat, address);
              this.center = [lng, lat];
            }
          });
        }
      },
      plugin: [],
    }
  }
}
</script>

<style lang="less">
.my-map{
  .amap-demo{
    position: relative;
    width: 100%;
    height: 400px;
    .map-marker{
      position: relative;
      width: 30px;
      height: 30px;
      img{
        position: absolute;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
      }
      .el-tag{
        position: absolute;
        color: #fff;
        top: 30px;
        transform: translateX(-50%);
        background: #f56c6c;
      }
    }
    .el-vue-search-box-container{
      position: absolute;
      top: -28px;
      width: 100%;
      box-shadow: 0 0 3px #ccc;
      .search-tips{
        width: 100%;
        max-height: 300px;   
      }
    }
  }
}
</style>



