<template>
  <div style="display: flex">
    <a-form-item-rest>
      <div class="rightBox">
        <div class="inputArea">
          <div style="margin-right: 10px">经度</div>
          <div class="lng">
            <ns-input
              v-model:value="lng"
              type="number"
              class="input"
              placeholder="请输入经度"
              @change="inputChange('lng', $event)" /> </div
          ><div style="margin: 0 10px">纬度</div>
          <div class="lat">
            <ns-input
              v-model:value="lat"
              type="number"
              class="input"
              placeholder="请输入纬度"
              @change="inputChange('lat', $event)" />
          </div>
        </div>
        <div class="inputSearch" style="margin: 15px 0 15px 0">
          <label style="margin-right: 10px">地址</label>
          <ns-input v-model:value="address" class="inputAdress" placeholder="请输入地址" />
          <ns-button type="primary" @click="onSearch">查询</ns-button>
        </div>
        <div class="mapArea">
          <div id="map-container" style="width: 600px"></div>
        </div>
        <div id="resultDiv" class="result" v-if="resultList.length">
          <div class="title">搜索结果:</div>
          <ul>
            <li v-for="(item, index) in resultList" :key="index">
              <a @click="clickItem(item)">{{ index + 1 + '-' + item.name }}</a>
            </li>
          </ul>
          <a-pagination
            size="small"
            :total="total"
            @change="changeHandle"
            :show-total="(total) => ` 共 ${total} 个搜索结果`" />
        </div>
      </div>
    </a-form-item-rest>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Pagination } from 'ant-design-vue';
  import pointTransfer from './transfer';

  export default defineComponent({
    name: 'NsSuperMap',
    components: {
      'a-pagination': Pagination,
    },
    props: {
      // 中心点坐标
      centerPoint: {
        type: Array,
      },
      // 纬度
      longitude: {
        type: String,
        default: '',
      },
      // 经度
      latitude: {
        type: String,
        default: '',
      },
      defaultAddress: {
        type: String,
        default: '',
      },
      toPoint: {
        type: String,
        default: 'WGS84',
      },
      fromPoint: {
        type: String,
        default: 'GCJ02',
      },
    },
    emits: ['change'],
    data() {
      return {
        T: '',
        zoom: 12,
        lng: 0,
        lat: 0,
        address: '',
        resultList: [],
        total: 0,
        page: 1,
      };
    },
    watch: {
      // longitude: {
      //   handler(val) {
      //     if (this.longitude && this.latitude) {
      //       let point = pointTransfer(
      //         [this.longitude, this.latitude],
      //         this.fromPoint,
      //         this.toPoint,
      //       );
      //       this.lng = point[0];
      //       this.lat = point[1];
      //       this.$nextTick(() => {
      //         this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
      //         let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
      //         this.map.addOverLay(marker);
      //         this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
      //         this.$emit('change', [this.latitude, this.longitude, this.address]);
      //       });
      //     }
      //   },
      //   immediate: true,
      //   deep: true,
      // },
      // latitude: {
      //   handler(val) {
      //     if (this.longitude && this.latitude) {
      //       let point = pointTransfer(
      //         [this.longitude, this.latitude],
      //         this.fromPoint,
      //         this.toPoint,
      //       );
      //       this.lng = point[0];
      //       this.lat = point[1];
      //       this.$nextTick(() => {
      //         this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
      //         let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
      //         this.map.addOverLay(marker);
      //         this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
      //         this.$emit('change', [this.latitude, this.longitude, this.address]);
      //       });
      //     }
      //   },
      //   immediate: true,
      //   deep: true,
      // },
      // defaultAddress: {
      //   handler(val) {
      //     if (this.longitude && this.latitude) {
      //       let point = pointTransfer(
      //         [this.longitude, this.latitude],
      //         this.fromPoint,
      //         this.toPoint,
      //       );
      //       this.lng = point[0].toFixed(8);
      //       this.lat = point[1].toFixed(8);
      //       this.$nextTick(() => {
      //         this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
      //         let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
      //         this.map.addOverLay(marker);
      //         this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
      //         this.$emit('change', [this.latitude, this.longitude, this.address]);
      //       });
      //     }
      //   },
      //   immediate: true,
      //   deep: true,
      // },
      address: {
        handler(val) {
          console.log(val);
        },
        immediate: true,
        deep: true,
      },
    },
    mounted() {
      this.init();
      // this.map = new this.T.Map('map-container');
      let supMap = window.L;
      var url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';

      this.map = supMap.map('map-container', {
        // crs: supMap.CRS.EPSG4326,
        center: [35.25, 102.55],
        zoom: 14,
        maxZoom: 18,
      });
      let supermapCloud = new window.L.supermap.CloudTileLayer();
      // let vectorLayer = new supMap.supermap.TiledMapLayer(url, {
      //   cacheEnabled: true,
      //   returnAttributes: true,
      //   attribution: 'Tile Data©SuperMap iServer with©SuperMap iClient',
      // }).addTo(this.map);
      this.map.addLayer(supermapCloud);
      // this.map.panTo(supMap.latLng(118.433065, 31.352625));
      //矢量瓦片图层添加点击事件，设置默认风格
      // vectorLayer.on('click', function (evt) {
      //   var id = evt.layer.properties.id;
      //   var layerName = evt.layer.layerName;
      //   // 设置矢量瓦片图层样式
      //   var selectStyle = {
      //     fillColor: '#800026',
      //     fillOpacity: 0.5,
      //     stroke: true,
      //     fill: true,
      //     color: 'red',
      //     opacity: 1,
      //     weight: 2,
      //   };
      //   vectorLayer.setFeatureStyle(id, layerName, selectStyle);
      // });
      // if (this.centerPoint) {
      //   this.map.centerAndZoom(new this.T.LngLat(this.centerPoint.join()), this.zoom);
      // } else {
      //   this.map.centerAndZoom(new this.T.LngLat(118.433065, 31.352625), this.zoom);
      // }
      // let cp = new this.T.CoordinatePickup(this.map, { callback: this.getLngLat });
      // cp.addEvent();
    },
    methods: {
      init() {
        // if (typeof window.T !== 'undefined') {
        //   console.log('初始化资源成功');
        //   this.T = window.T;
        // } else {
        //   console.log('初始化资源失败，查看项目index.html是否引用天地图');
        // }
      },
      getLngLat(lnglat) {
        let that = this;
        that.lng = lnglat.lng;
        that.lat = lnglat.lat;
        this.getAddress(lnglat);
        that.map.clearOverLays();
        let marker = new that.T.Marker(new that.T.LngLat(that.lng, that.lat));
        that.map.addOverLay(marker);
        that.map.centerAndZoom(new that.T.LngLat(that.lng, that.lat), 16);
        let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
        this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
      },
      getAddress(lnglat) {
        let that = this;
        that.geocode = new that.T.Geocoder();
        that.geocode.getLocation(lnglat, function (result) {
          that.address = result.getAddress();
        });
      },
      onSearch() {
        this.map.clearOverLays();
        let config = {
          // pageCapacity: 10,
          onSearchComplete: this.loaclSearchResult,
        };
        this.localsearch = new this.T.LocalSearch(this.map, config);
        this.localsearch.search(this.address);
      },
      loaclSearchResult(result) {
        let that = this;
        that.resultList = result.getPois();
        that.total = result.getCount();
        if (that.resultList.length > 0) {
          let first = that.resultList[0];
          let lonlat = first.lonlat.split(' ');
          this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
          for (let i = 0; i < that.resultList.length; i++) {
            const item = that.resultList[i];
            let lonlat = item.lonlat.split(' ');
            let marker = new that.T.Marker(new that.T.LngLat(lonlat[0], lonlat[1]));
            marker.addEventListener('click', function (e) {
              that.lng = e.lnglat.lng;
              that.lat = e.lnglat.lat;
              that.getAddress(e.lnglat);
              that.map.centerAndZoom(new that.T.LngLat(e.lnglat.lng, e.lnglat.lat), 16);
              let point = pointTransfer([that.lng, that.lat], that.toPoint, that.fromPoint);
              this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
            });
            that.map.addOverLay(marker);
          }
        }
      },
      changeHandle(page) {
        this.map.clearOverLays();
        if (this.page < page) {
          this.localsearch.nextPage();
        } else {
          this.localsearch.previousPage();
        }
        this.page = page;
      },
      clickItem(item) {
        let lonlat = item.lonlat.split(' ');
        this.lng = lonlat[0];
        this.lat = lonlat[1];
        this.address = item.address;
        this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
        let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
        this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
      },
    },
  });
</script>

<style lang="less" scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  #map-container {
    width: 600px;
    height: 400px;
  }
  .leftBox,
  .rightBox {
    flex: 1;
  }
  .inputArea {
    display: flex;
    line-height: 30px;
  }
  .inputSearch {
    .inputAdress {
      width: 344px;
      margin-right: 10px;
    }
  }
  #resultDiv {
    width: 100%;
    ul {
      list-style: none;
      padding-left: 0;
    }
  }
</style>
