{% extends "layout.html" %}

{% block title %}
  tmap_addr_input
{% endblock %}
{% block main %}
      <!-- Head section moved into body -->
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
      <title>输入提示后查询</title>
      <!-- UIkit CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/css/uikit.min.css" />
      <!-- UIkit JS -->
      <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.min.js"></script>

      <style type="text/css">
          body {
              margin: 0;
              height: 100%;
              width: 100%;
              position: absolute;
          }

          #mapContainer {
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              width: 100%;
              height: 400px;
          }

          #tmap-container {
              height: 400px; /* Adjust height as needed */
          }

          .button-group {
              position: absolute;
              bottom: 20px;
              right: 20px;
              font-size: 12px;
              padding: 10px;
          }

          .button-group .button {
              height: 28px;
              line-height: 28px;
              background-color: #0D9BF2;
              color: #FFF;
              border: 0;
              outline: none;
              padding-left: 5px;
              padding-right: 5px;
              border-radius: 3px;
              margin-bottom: 4px;
              cursor: pointer;
          }

          .tmap-info-content {
              font-size: 12px;
          }
      </style>

      <!-- 地图和搜索区域 -->
      <div>
          <div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
              <div class="uk-width-1-3@m">
                  <select id="save_type" class="uk-select">
                      <option value="recent">最近</option>
                      <option value="home">住家</option>
                      <option value="work">工作</option>
                  </select>
              </div>
              <div class="uk-width-expand@m">
                  <input class="uk-input" type="text" id="keyword" name="keyword"
                      placeholder="请输入关键字：(选定后搜索)" onfocus='this.value=""' />
              </div>
          </div>
          <input type="hidden" id="longitude" />
          <input type="hidden" id="latitude" />
          <div style="height: 600px" id="container"></div>
      </div>

      <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=VXYBZ-HKFR6-7WYSQ-MSZCE-ZLFAJ-33FIW"></script>
      <script type="text/javascript">
          var map, marker, infoWindow;
          var searchService, geocoder;

          // 初始化地图
          function initMap() {
              const center = new TMap.LatLng({{lat}}, {{lon}});
              //初始化地图
              map = new TMap.Map(document.getElementById('container'), {
                  center: center,
                  zoom: 14,
                  pitch: 0,
                  rotation: 0,
                  viewMode: '2D',
                  showControl: true
              });

              // 创建标记
              marker = new TMap.MultiMarker({
                  map: map,
                  styles: {
                      "normal": new TMap.MarkerStyle({
                          width: 25,
                          height: 35,
                          anchor: { x: 16, y: 32 }
                      })
                  },
                  geometries: []
              });

              // 初始化信息窗口
              infoWindow = new TMap.InfoWindow({
                  map: map,
                  position: center,
                  offset: { x: 0, y: -32 }
              });
              infoWindow.close();

              // 创建检索服务
              searchService = new TMap.service.Search({
                  complete: function(result) {
                      handleSearchResult(result);
                  },
                  error: function() {
                      alert("搜索失败，请检查关键词");
                  }
              });

              // 创建地理编码服务
              geocoder = new TMap.service.Geocoder();

              // 绑定搜索事件
              document.getElementById('keyword').addEventListener('keydown', function(e) {
                  if (e.keyCode === 13) {
                      var keyword = this.value.trim();
                      if (keyword) {
                          searchService.searchAddressDetail({
                              keyword: keyword,
                              region: '全国',
                              pageIndex: 1,
                              pageSize: 10
                          });
                      }
                  }
              });

              // 地图点击事件
              map.on('click', function(evt) {
                  var latLng = evt.latLng;

                  document.getElementById('longitude').value = latLng.lng;
                  document.getElementById('latitude').value = latLng.lat;

                  // 清除现有标记
                  marker.setGeometries([]);

                  // 添加新标记
                  addMarker(latLng, "选定位置");

                  // 反向地理编码获取地址信息
                  geocoder.getAddress({
                      location: latLng
                  }).then(function(result) {
                      var address = "";
                      if (result.result && result.result.address) {
                          address = result.result.address;
                      }
                      showInfoWindow(latLng, "选定位置", address, latLng.lat, latLng.lng);
                  });
              });
          }

          // 处理搜索结果
          function handleSearchResult(result) {
              if (result && result.data && result.data.length > 0) {
                  // 清除现有标记
                  marker.setGeometries([]);

                  // 添加标记并设置地图中心
                  var firstResult = result.data[0];
                  var newLatLng = new TMap.LatLng(firstResult.location.lat, firstResult.location.lng);

                  for (var i = 0; i < result.data.length; i++) {
                      var poi = result.data[i];
                      var poiLatLng = new TMap.LatLng(poi.location.lat, poi.location.lng);
                      addMarker(poiLatLng, poi.title);

                      // 为标记添加点击事件
                      (function(p, ll) {
                          var markerGeometry = marker.getGeometries()[i];
                          marker.on('click', function(evt) {
                              if (evt.geometry.id === markerGeometry.id) {
                                  showInfoWindow(ll, p.title, p.address, p.location.lat, p.location.lng);
                              }
                          });
                      })(poi, poiLatLng);
                  }

                  // 设置地图中心为第一个结果
                  map.setCenter(newLatLng);
                  map.setZoom(15);
              } else {
                  alert("未找到相关地点");
              }
          }

          // 添加标记
          function addMarker(latLng, title) {
              var markerGeometry = {
                  id: title + "_" + Date.now(),
                  styleId: 'normal',
                  position: latLng,
                  properties: {
                      title: title
                  }
              };
              marker.add(markerGeometry);
              return markerGeometry;
          }

          // 显示信息窗口
          function showInfoWindow(latLng, title, address, lat, lng) {
              var content = '<div class="uk-card uk-card-default uk-card-body" style="width:250px;">' +
                            '<h3 class="uk-card-title">' + title + '</h3>' +
                            '<p>' + (address || "(" + lat + ", " + lng + ")") + '</p>' +
                            '<div class="uk-card-footer">' +
                            '<form name="navForm" method="post">' +
                            '  <input type="hidden" name="lat" value="' + lat + '">' +
                            '  <input type="hidden" name="lon" value="' + lng + '">' +
                            '  <input type="hidden" name="save_type" value="' + document.getElementById("save_type").value + '">' +
                            '  <input type="hidden" name="name" value="' + title + '">' +
                            '  <input class="uk-button uk-button-primary" type="submit" value="导航" >' +
                            '</form>' +
                            '</div>' +
                            '</div>';

              infoWindow.setContent(content);
              infoWindow.setPosition(latLng);
              infoWindow.open();
          }

          // 页面加载完成后初始化地图
          window.onload = function() {
              initMap();
          };
      </script>
{% endblock %}