<template>
  <div>
    <van-nav-bar
        title="选择坐标"
        left-text="返回"
        right-text="确定"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <div class="coord-picker">
      <div class="map-contain-point">

      </div>
      <div id="mapDiv" style="width: 100%;height: calc(100% - 46px );top: 46px;position: absolute"></div>
    </div>
  </div>
</template>

<script>
var map;
var zoom = 12;

export default {
  name: "Map",
  props: ['defaultPosition'],
  data() {
    return {
      mode: 'search',
      center: null,
      zoom: 10,
      query: '',
      searching: false,
      tips: [],
      results: [],
      position: null,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      satellite: false,
    };
  },
  mounted() {
    map = new T.Map('mapDiv',{projection:"EPSG:4326"});
    let positionArr = []
    if (this.defaultPosition) {
      positionArr = this.defaultPosition.split(",")
      map.centerAndZoom(new T.LngLat(positionArr[0], positionArr[1]), zoom);
    } else {
      map.centerAndZoom(new T.LngLat(118.36382,35.06236), zoom);
    }


  },
  methods: {
    onClickRight() {
      let pos = map.getCenter().getLng() + "," + map.getCenter().getLat()
      this.$emit('getPosition', pos)
    },
    onClickLeft() {
      this.$emit('hiddenMap')
    }
  },
}
</script>

<style>
.map-contain {
  background-color: #ffffff;
}

.mapDiv {
  width: 100%;
  height: 100%;
}

.map-contain-point {
  position: fixed;
  z-index: 1111111111111111111;
  width: 16px;
  height: 16px;
  background-color: red;
  border-radius: 50%;
  box-shadow: 0 0 3px 5px rgba(255, 255, 255, 1);
  left: calc(50% - 8px);
  bottom: calc(50% - 15px);
}

</style>
