<template>
  <div class="content">
    <div style="display: flex;align-items: center;margin-bottom: 20px;">
      <div>{{$t('mendian.SearchAddress')}}：</div>
      <input
          type="text"
          v-model="ssneir"
          :placeholder="$t('mendian.Pleasekeywords')"
          @keyup.enter="selectPoint"
      />
      <button style="margin-left: 10px;" @click="selectPoint">{{$t('mendian.SearchAddress')}}</button>
      <div style="margin-left: 20px;">{{$t('mendian.currentlocation')}}:{{address}}</div>
    </div>
    <!-- 添加地址选择提示 -->
    <div v-if="!address" style="background-color: #fef0f0; color: #f56c6c; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center;">
      <i class="el-icon-warning" style="margin-right: 8px;"></i>
      {{$t('mendian.Selectmapobtainaddress')}}
    </div>
    <div :style="googleMapStyle" class="googleMap" :id="mapID"></div>
  </div>
</template>

<script>
import {getfenlei,storelistlist,getAddr} from '@/api/store';
import { Loader } from '@googlemaps/js-api-loader' //引入
export default {
  name:'googmap',
  props: {
    //selectPoint时是地图选点
    //POLYGON是绘制地图多边形区域

    //地图id
    mapID: {
      type: String,
      default: () => {
        return 'googleMap'
      },
    },
    //谷歌地图样式
    googleMapStyle: {
      type: Object,
      default: () => {
        return {
          wdith: '100%',
          height: '500px',
        }
      },
    },
    //谷歌地图配置
    mapOptions: {
      type: Object,
      default: () => {
        return {
          //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
          disableDefaultUI: false,
          // 启用缩放和平移
          gestureHandling: 'greedy',
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          //关闭街景
          streetViewControl: false,
        }
      },
    },
    //谷歌地图中心点
    googleMapCenter: {
      type: Object,
      default: () => {
        return {
          lat: 25.037798,
          lng: 121.565170
        }
      },
    },
    //谷歌地图缩放级别
    zoom: {
      type: Number,
      default() {
        return 11
      },
    },
    //谷歌地图图形path
    mapPath: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      //地图选点回显值
      longlat: 25.037798 + ',' + 121.565170,
      //标记点
      marker: [],
      //图形实例
      graphicalExample: null,
      //图形路径经纬度
      graphicalPath: [],
      apiKey: 'AIzaSyBt-bYNprVqfpY3fPgoOj0RKbnC_g7ii1k', //旧的AIzaSyAnz_I0VUlPvt73NIocb_7tomJOW4CdwHk
      googleMap: null,
      address: '',
      ssneir: ''
    }
  },
  created() {
    this.$nextTick(() => {
      const loader = new Loader({
        apiKey: this.apiKey, //之前的key
        version: 'weekly', //版本
        libraries: ['places', 'drawing'], //插件库places为基础库 drawing为绘制工具库
        region: 'Canada',
        language: this.$t('loding.language'),
      })
      const mapOptions = {
        center: {lat: this.googleMapCenter.lat * 1, lng: this.googleMapCenter.lng * 1}, //中心点
        zoom: this.zoom, //缩放级别
        mapId: this.mapID,
        ...this.mapOptions, //其他配置
      }
      loader.load().then(async (google) => {
        this.googMap = await google.maps.importLibrary("maps");
        this.googMarker = await google.maps.importLibrary("marker");
        const map = new this.googMap.Map(document.getElementById(this.mapID), mapOptions);
        this.googleMap = map;
        this.googleApi = google;
        this.googleMap.addListener('click', (e) => {
          this.clickGmap(e)
        })
      }).catch((e) => {
        // do something
        // console.log(e)
      })
    })
  },
  methods: {
    // 逆向地址
    getdizhi(lat) {
      var user = JSON.parse(localStorage.getItem('user'));

      var params = {
        latlng: lat,
        id: user.id
      }
      getAddr(params).then(res => {
        console.log('地址', res)
        this.address = res.data.address
        this.$emit('golat', {lat: lat, address: res.data.address})
      })
    },
    //搜索地点方法
    selectPoint() {
      if (!this.ssneir) return;
      if (!this.googleApi || !this.googleMap) return;
      const service = new this.googleApi.maps.places.PlacesService(this.googleMap);
      service.textSearch({query: this.ssneir}, (results, status) => {
        if (status === this.googleApi.maps.places.PlacesServiceStatus.OK && results.length > 0) {
          const loc = results[0].geometry.location;
          const lat = loc.lat();
          const lng = loc.lng();
          this.googleMap.setCenter({lat, lng});
          this.googleMap.setZoom(15);
          if (this.marker) this.marker.map = null;
          this.marker = new this.googMarker.AdvancedMarkerElement({
            map: this.googleMap,
            position: {lat, lng},
          });
          this.getdizhi(lat + ',' + lng);
        }
      });
    },
    //点击地图回调
    clickGmap(e) {
      console.log('点击回调', e)
      this.longlat = e.latLng.lat() + ',' + e.latLng.lng();
      this.marker.map = null;
      this.marker = new this.googMarker.AdvancedMarkerElement({
        map: this.googleMap,
        position: {lat: e.latLng.lat(), lng: e.latLng.lng()},
      });
      this.getdizhi(this.longlat);
    },
    //获取经纬度
    // getLongLat() {
    // 	return this.longlat
    // },
    //设置地图中心点位置
    // setMapPanBy(e) {
    // 	let latlng = new this.googleApi.maps.LatLng(e.lat,e.lng)
    // 	this.googleMap.setCenter(latlng)
    // 	this.marker[0].setPosition(latlng);
    // },
  }
}
</script>

<style>
</style>
