<template>
  <div>
    <!--    <label for="tipinput">地址：</label>-->
    <!--    <div id="tipinput" class="input" placeholder="输入地址关键字" v-model="keyword"/>-->
    <div id="container" style="width: 100%; border-radius: 8px" :style="`height:${height || '200'}px;`"></div>
  </div>
</template>

<script>
  export default {
    props: ['setLocation', 'height'],
    data() {
      return {
        keyword: '',
        showCode: false,
        address: {},
        getLng: '', // 点击的纬度
        getLat: '', // 点击的经度
        lnglat: []
      }
    },
    watch: {},
    methods: {
      init() {
        const vm = this
        let marker
        const map = new AMap.Map('container', {
          // 初始化地图
          center: vm.setLocation.length > 0 && vm.setLocation[0] !== null ? vm.setLocation : [114.05956, 22.54286],
          resizeEnable: true,
          zoom: 16,
          keyboardEnable: false,
          // resizeEnable: true,
          viewMode: '3D',
          pinch: 45
        })
        map.setFitView()
        let geocoder
        // const auto = new AMap.Autocomplete({ input: 'tipinput' }) // 绑定搜索input
        const infoWindow = new AMap.InfoWindow({
          // 构造标注点的文本参数
          autoMove: true,
          offset: new AMap.Pixel(10, 20) // 标记的偏移量
        })
        // const placeSearch = new AMap.PlaceSearch({ // 构造地点查询类
        //   map: map,
        //   pageSize: 1, // 单页显示结果条数
        //   extensions: 'all' // 返回基本地址信息
        // })
        function regeoCode(getLng, getLat) {
          if (!geocoder) {
            geocoder = new AMap.Geocoder({
              // city: '010', //城市设为北京，默认：“全国”
              radius: 1000 // 范围，默认：500
            })
          }
          vm.lnglat = [getLng, getLat]
          if (!marker) {
            marker = new AMap.Marker({
              icon: 'http:////a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
              position: [getLng, getLat],
              offset: new AMap.Pixel(-13, -30),
              draggable: true,
              cursor: 'move',
              raiseOnDrag: true
            })
            map.add(marker)
          }
          marker.setPosition(vm.lnglat)
          map.setCenter(marker.getPosition())
          AMap.event.addListener(marker, 'dragend', function (e) {
            vm.lnglat = marker.getPosition()
            geocoder.getAddress(vm.lnglat, function (status, result) {
              if (status === 'complete' && result.regeocode) {
                console.log(result.regeocode.addressComponent)
                const address = result.regeocode.formattedAddress
                const citycode = result.regeocode.addressComponent.citycode
                const value = {
                  address: address,
                  province: result.regeocode.addressComponent.province,
                  city: result.regeocode.addressComponent.city,
                  dist: result.regeocode.addressComponent.district
                }
                vm.keyword = address
                vm.address = value
                infoWindow.setContent(createContent(address, vm.lnglat, citycode))
                infoWindow.open(map, marker.getPosition())
                vm.$emit('getLocation', value, vm.lnglat)
              } else {
                console.log('111')
                vm.$Notice.error({
                  title: '温馨提示：',
                  desc: `位置有误！`
                })
              }
            })
          })
          geocoder.getAddress(vm.lnglat, function (status, result) {
            if (status === 'complete' && result.regeocode) {
              console.log(result.regeocode.addressComponent)
              const address = result.regeocode.formattedAddress
              const citycode = result.regeocode.addressComponent.citycode
              const value = {
                address: address,
                province: result.regeocode.addressComponent.province,
                city: result.regeocode.addressComponent.city,
                dist: result.regeocode.addressComponent.district
              }
              vm.keyword = address
              vm.address = value
              infoWindow.setContent(createContent(address, vm.lnglat, citycode))
              infoWindow.open(map, marker.getPosition())
              vm.$emit('getLocation', value, vm.lnglat)
            } else {
              vm.$Notice.error({
                title: '温馨提示：',
                desc: `位置有误！`
              })
            }
          })
        }

        function createContent(address, lnglat, citycode) {
          // 信息窗体内容
          const s = []
          // s.push(`<b>经纬度：${lnglat}</b>`)
          s.push(`地址：${address}`)
          // s.push(`区号：${citycode}`)
          return s.join('<br>')
        }

        // function select(e) { // 搜索函数
        //   console.log(e, '7987')
        //   placeSearch.setCity(e.poi.adcode)
        //   placeSearch.search(e.poi.name, (status, result) => { // 关键字查询查询
        //     console.log(status)
        //     const { lng, lat } = result.poiList.pois[0].location
        //     regeoCode(lng, lat)
        //   })
        // }
        // AMap.event.addListener(auto, 'select', select) // 注册监听，当选中某条记录时会触发
        // AMap.event.addListener(placeSearch, 'markerClick', (e) => { // 点击标注
        // })
        map.on('click', e => {
          // 点击地图添加标注点
          regeoCode(e.lnglat.getLng(), e.lnglat.getLat())
          console.log('111')
        })
        map.on('dragend', () => {
          // 移动地图
          regeoCode(map.getCenter().lng, map.getCenter().lat)
        })
        map.on('complete', () => {
          // 地图加载完成
          regeoCode(map.getCenter().lng, map.getCenter().lat) // 初始化地图中心点坐标
        })
        AMap.plugin(
          [
            // 添加 3D 罗盘控制
            'AMap.ControlBar'
          ],
          () => {
            map.addControl(new AMap.ControlBar())
          }
        )
      }
    },
    mounted() {
      setTimeout(() => {
        this.init()
      }, 800)
    }
  }
</script>

<style>
  #iCenter {
    height: 500px;
    position: relative;
    display: flex;
    flex: 1;
  }
  #result {
    width: 210px;
    position: relative;
    height: 500px;
    overflow-y: scroll;
    border-right: 1px solid #ccc;
  }
  .amap_lib_placeSearch {
    height: 100%;
    overflow-y: scroll;
  }
  .amap_lib_placeSearch_page {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  #me {
    border-top: 1px solid #ccc;
    margin-top: 6px;
    padding-top: 6px;
    width: 100%;
    display: block;
  }
  .amap_lib_placeSearch .poibox {
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
    padding: 5px 0 5px 10px;
    position: relative;
    min-height: 35px;
  }
  .amap_lib_placeSearch_poi {
    background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png) no-repeat;
    height: 31px;
    width: 19px;
    cursor: pointer;
    left: -1px;
    text-align: center;
    color: #fff;
    font: 12px arial, simsun, sans-serif;
    padding-top: 3px;
  }
  .amap_lib_placeSearch .poibox .poi-title {
    margin-left: 25px;
    font-size: 13px;
    overflow: hidden;
  }
  .amap_lib_placeSearch .amap_lib_placeSearch_poi {
    position: absolute;
  }
  .amap_lib_placeSearch .poibox .poi-info {
    word-break: break-all;
    margin: 0 0 0 25px;
    overflow: hidden;
  }
  .amap_lib_placeSearch .poibox .poi-info p {
    color: #999;
    font-family: Tahoma;
    line-height: 20px;
    font-size: 12px;
  }
  .amap_lib_placeSearch .poibox .poibox-icon {
    margin-left: 7px;
    margin-top: 4px;
  }
  .amap-pl-pc .poi-img {
    float: right;
    margin: 3px 8px 0;
    width: 90px;
    height: 56px;
    overflow: hidden;
  }
  .poibox {
    cursor: pointer;
  }
  .poibox:hover {
    background: #f6f6f6;
  }
  .selected {
    background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png) !important;
  }
  .amap-info-content {
    width: 200px !important;
  }
</style>
