<template>
  <div class="map-view">
      <div class="serach-box">
        <div class="button-box">
          <input type="text" v-model="serachText" placeholder="请输入搜索的地址">
          <div class="button mouse-poi" @click.stop="getsuggest()">搜索</div>
        </div>

        <div class="select-box" v-if="showSelect">
          <div class="box mouse-poi" v-for="(item,i) in addressList" :key="i" @click="sel(item)">
            <div class="box-title">{{item.title}}</div>
            <div class="box-add">{{item.address}}</div>
          </div>
        </div>
      </div>
      <div id="TXmap" class="map"></div>
  </div>

</template>

<script>
import {Message} from 'element-ui'
import { txRim,txSuggestion } from "@/api/admin/txMap";
export default {
  name: "TengxunMap",

  data() {
    return {
      longitude: "",
      latitude: "",
      TXmap: null,
      markerLayer: null,
      lat: "",
      lng: "",
      isAjax: false,
      addressList:[],
      serachText:'',
      showSelect:false,
    };
  },
  methods: {
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      // 定义地图中心点坐标
      let center = new window.TMap.LatLng(39.98412, 116.307484);
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      this.TXmap = new window.TMap.Map(document.getElementById("TXmap"), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
        viewMode: "2D",
      });
      this.markerLayer = new TMap.MultiMarker({
        map: this.TXmap, //指定地图容器
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          myStyle: new TMap.MarkerStyle({
            width: 25, // 点标记样式宽度（像素）
            height: 35, // 点标记样式高度（像素
            // "src": '',  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            anchor: { x: 16, y: 32 },
          }),
        },
        //点标记数据数组
        geometries: [
          {
            id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            styleId: "myStyle", //指定样式id
            position: new TMap.LatLng(39.98412, 116.307484), //点标记坐标位置
            properties: {
              //自定义属性
              title: "店铺位置",
            },
          },
        ],
      });
      let _that = this;

      //监听地图平移
      this.TXmap.on("pan", function () {
        let centerLatLng = _that.TXmap.getCenter();
        _that.markerLayer.updateGeometries([
          {
            styleId: "myStyle",
            id: "1",
            position: new TMap.LatLng(centerLatLng.lat, centerLatLng.lng),
          },
        ]);
        _that.lat = centerLatLng.lat;
        _that.lng = centerLatLng.lng;
        _that.txRim();
      });
    },

    async getsuggest() {
      var e = this.serachText
    	var that = this;
    	if (e.length <= 0) {
    		that.addressList = []
    		return;
    	}
      await txSuggestion({
        keyword: e,
        region: '',
        key: "VDEBZ-O22HK-DHHJU-AXDG5-AJGDZ-WXFEJ",
      }).then((res)=>{
        if(res.data.length>0){
          that.addressList = res.data
          that.showSelect = true
        }else{
          that.$notify({
            title: '提示',
            message: '没有搜索到数据',
            type: 'error'
          });
        }
      }).catch(err => {
        that.$notify({
          title: '提示',
          message: '地址搜索失败',
          type: 'error'
        });
      });
    },
    sel(item){
      let _that = this
      _that.lat = item.location.lat;
      _that.lng = item.location.lng;
      _that.showSelect = false;
      _that.setCenter(_that.lat, _that.lng);
    },

    async txRim() {
      if (this.isAjax) {
        return false;
      }
      this.isAjax = true;
      let lat = this.lat;
      let lng = this.lng;
      let ret = await txRim({
        key: "VDEBZ-O22HK-DHHJU-AXDG5-AJGDZ-WXFEJ",
        get_poi: "1",
        // poi_options: 5,
        location: lat + "," + lng,
      });
      this.$emit("getLocation", ret);
      setTimeout(()=>{
        this.isAjax = false;
        if (lat !== this.lat || lng !== this.lng) {
          this.txRim();
        }
      },300)

    },
    setCenter(lat, lng) {
      if (this.TXmap === null) {
        Message({
          message: '地图正在初始化中.....',
          type: 'error',
          duration: 3 * 1000,
        })
        return false;
      }
      if (lat <= 0 || lng <= 0) {
        Message({
          message: '地址信息异常',
          type: 'error',
          duration: 3 * 1000,
        })
        return false;
      }
      this.TXmap.setCenter(new TMap.LatLng(lat, lng));
      if (this.markerLayer) {
        this.markerLayer.updateGeometries([
          {
            styleId: "myStyle",
            id: "1",
            position: new TMap.LatLng(lat, lng),
          },
        ]);
      }
    },
  },

  mounted() {
    this.initMap();
  },
};
</script>
<style lang='scss' scoped>
#TXmap {
  width: 100%;
  height: 612px;
}
.map{
  height: 612px;
}

.map-view{
  position: relative;
}
.serach-box{
  margin-bottom: 40px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2000 !important;
  .button-box{
    display: flex;
    input{
      width: 300px;
      box-sizing: border-box;
      height: 40px;
      padding: 0 10px;
      font-size: 16px;
    }
    input:focus{
      width: 300px;
      box-sizing: border-box;
      outline:0px ;
      height: 40px;
      padding: 0 11px;
    }
    .button{
      height: 39px;
      line-height: 39px;
      text-align: center;
      width: 60px;
      margin-left: 20px;
      font-size: 20px;
      color: #fff;
      background: #5473E8;
      border: 0;
      border-radius: 5px;
    }
  }
  .select-box{
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: scroll;
    background-color: #fff;
    .box{
      display: flex;
      height: 50px;
      line-height: 50px;
      color: #333;
      .box-title{
        font-size: 16px;
        padding-left: 10px;
      }
      .box-add{
        font-size: 16px;
        margin-left: 40px;
      }
    }
  }


}
</style>
