<template lang="html">
  <div class="container-map" style="text-align: right">
    <div class="search-box">
      <input
        v-model="searchKey"
        type="search"
        placeholder="输入关键字进行搜索"
        id="search">
      <div class="tip-box" id="searchTip"></div>
    </div>
    <el-amap
      vid="'amap-vue'"
      :zoom="zoom"
      :center="center"
      :amapManager="amapManager"
      :events="events"
      :plugin="plugin"

    >
      <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
<!--      <el-button style="margin-top: 10px" @click="changeView(false)">取消</el-button>-->
      <el-button type="primary" style="margin-top: 10px" @click="changeView(true)">确定</el-button>
    </el-amap>
  </div>
</template>

<script src="//webapi.amap.com/ui/1.1/main-async.js"></script>
<script>
import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
import {mapGetters, mapActions} from 'vuex';

let amapManager = new AMapManager()
export default {
  name:"mapPoint",
  // props: ["pCenter","path"],
  props: {
    longitude: {
      type: Number,
      default: 0
    },
    latitude: {
      type: Number,
      default: 0
    }
  },
  data() {
    let vm = this;
    return {
      markers: [[120.6668, 31.302732]],
      searchKey: '',
      center: [120.6668, 31.302732],
      zoom: 17,
      toSearch: false,
      amapManager,
      lat: 0,
      lng: 0,
      events: {

        init(o){
          vm.map=o;
          lazyAMapApiLoaderInstance.load().then(() => {
            vm.initSearch();
          })
        },
        // 点击获取地址的数据
        click(o) {
          vm.markers = []
          let {lng, lat} = o.lnglat
          vm.center = [lng, lat]
          console.log(vm.center);
          vm.markers.push([lng, lat])

          vm.lng = lng
          vm.lat = lat
        }
      },
      // 一些工具插件
      plugin: [
        {
          pName: 'Geolocation',
          events: {
            init(o) {
            }
          }
        },
        {
          // 工具栏
          pName: 'ToolBar',
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 鹰眼
          pName: 'OverView',
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 地图类型
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 搜索
          pName: 'PlaceSearch',
          events: {
            init(instance) {
              // console.log(instance)
            }
          }
        }
      ]
    }
  },

  watch: {
    longitude: function() {
      this.initPoint()
    }
  },
  created(){

    if (this.longitude&&this.latitude&&this.longitude != 0 && this.latitude != 0) {
      this.lng = this.longitude;
      this.lat = this.latitude;
    } else {
      this.lng = 120.6668;
      this.lat = 31.302732;
    }
    this.markers = []
    this.center = [this.lng, this.lat]

    console.log(this.center);
    this.markers.push([this.lng, this.lat])
  },
  activated: function(){

  },
  methods: {
    initPoint() {
      if (this.longitude != 0 && this.latitude != 0) {
        this.lng = this.longitude;
        this.lat = this.latitude;
      } else {
        this.lng = 120.6668;
        this.lat = 31.302732;
      }
      this.markers = []
      this.center = [this.lng, this.lat]

      console.log(this.center);
      this.markers.push([this.lng, this.lat])
    },
    initSearch() {
      let vm = this
      let map = this.amapManager.getMap()
      console.log(AMapUI)
      AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
        var poiPicker = new PoiPicker({
          input: 'search',
          placeSearchOptions: {
            map: map,
            current: 10
          },
          suggestContainer: 'searchTip',
          searchResultsContainer: 'searchTip'
        })
        vm.poiPicker = poiPicker
        // 监听poi选中信息
        poiPicker.on('poiPicked', function (poiResult) {
          // console.log(poiResult)
          let source = poiResult.source
          let poi = poiResult.item
          if (source !== 'search') {
            poiPicker.searchByKeyword(poi.name)
          } else {
            poiPicker.clearSearchResults()
            vm.markers = []
            let lng = poi.location.lng
            let lat = poi.location.lat
            let address = poi.cityname + poi.adname + poi.name
            vm.center = [lng, lat]
            vm.markers.push([lng, lat])
            vm.address = address
            vm.searchKey = address

          }
        })
      })
    },
    changeView(res){
      // console.log(JSON.parse(JSON.stringify(path)));
      var arg = {
        flag:res,
        lng:this.markers[0],
        lat:this.markers[1],
       /* add:this.address*/
      }
      this.$emit("changeView",arg)
    },

  }
}
</script>

<style lang="scss" scoped>
.container-map {
  width: 100%;
  height: 600px;
  position: relative;
  /*left: 50%;*/
  /*top: 50%;*/
  /*transform: translate3d(-50%, -50%, 0);*/
  border: 1px solid red;
}

.search-box {
  position: absolute;
  z-index: 5;
  width: 60%;
  left: 12%;
  top: 20px;
  height: 30px;
}


.search-box button {
  float: left;
  width: 20%;
  height: 100%;
  background: #30ccc1;
  border: 1px solid #333333;
  color: #fff;
  outline: none;
}
.amap-demo {
  height: 300px;
}

.el-vue-search-box-container{
  position: absolute !important;
  left:80px;
}
.search-box input{
  float: left;
  width: 100%;
  height: 100%;
  border: 1px solid #666666;
  border-radius: 5px;
  box-shadow:0px 0px 5px #666;
  padding: 0 8px;
  outline: none;
}
.searchT{
  float: left;
  width: 20%;
  height: 100%;
  background: #38f;
  border: 1px solid #38f;
  color: #fff;
  text-align: center;
}

.tip-box {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}
</style>
