<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-header">
      <view class="search-box">
        <uv-icon name="search" color="#999" size="16"></uv-icon>
        <input
          class="search-input"
          v-model="searchKeyword"
          placeholder="请输入地址"
          confirm-type="search"
          focus
          @input="onSearchInput"
          @confirm="onSearchConfirm"
        />
        <uv-icon
          v-if="searchKeyword"
          name="close"
          color="#999"
          size="16"
          @click="clearSearch"
        ></uv-icon>
      </view>
      <view class="cancel-btn" @click="goBack">取消</view>
    </view>

    <!-- 搜索历史 -->
    <view class="section" v-if="!searchKeyword && searchHistory.length > 0">
      <view class="section-header">
        <text class="section-title">搜索历史</text>
        <uv-icon
          name="trash"
          color="#999"
          size="16"
          @click="clearHistory"
        ></uv-icon>
      </view>
      <view class="history-list">
        <view
          class="history-item"
          v-for="(item, index) in searchHistory"
          :key="index"
          @click="useHistoryItem(item)"
        >
          <uv-icon name="time" color="#999" size="16"></uv-icon>
          <text class="history-text">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-results" v-if="searchKeyword">
      <view class="loading-box" v-if="isSearching">
        <uv-loading-icon></uv-loading-icon>
        <text>搜索中...</text>
      </view>

      <view
        v-else-if="searchResults.length === 0 && searchKeyword"
        class="no-result"
      >
        <text>没有找到相关地址</text>
      </view>

      <view v-else class="result-list">
        <view
          class="result-item"
          v-for="(item, index) in searchResults"
          :key="index"
          @click="selectAddress(item)"
        >
          <view class="result-icon">
            <uv-icon name="map-fill" color="#4080FF" size="20"></uv-icon>
          </view>
          <view class="result-info">
            <view class="result-name">{{ item.name }}</view>
            <view class="result-address">{{ item.address }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch,onMounted } from "vue";
import { useUserStore } from "@/store";

// 搜索关键词
const searchKeyword = ref("");
// 搜索历史
const searchHistory = ref([]);
// 搜索结果
const searchResults = ref([]);
// 是否正在搜索
const isSearching = ref(false);

// 从本地存储加载搜索历史
const loadSearchHistory = () => {
  try {
    const history = uni.getStorageSync("searchAddressHistory");
    if (history) {
      searchHistory.value = JSON.parse(history);
    }
  } catch (e) {
    console.error("加载搜索历史失败", e);
  }
};

// 保存搜索历史到本地存储
const saveSearchHistory = () => {
  try {
    uni.setStorageSync(
      "searchAddressHistory",
      JSON.stringify(searchHistory.value)
    );
  } catch (e) {
    console.error("保存搜索历史失败", e);
  }
};

// 添加搜索历史
const addToHistory = (keyword) => {
  // 如果已存在，先移除
  const index = searchHistory.value.indexOf(keyword);
  if (index !== -1) {
    searchHistory.value.splice(index, 1);
  }

  // 添加到最前面
  searchHistory.value.unshift(keyword);

  // 限制历史记录数量
  if (searchHistory.value.length > 10) {
    searchHistory.value.pop();
  }

  // 保存到本地存储
  saveSearchHistory();
};

// 清空搜索历史
const clearHistory = () => {
  uni.showModal({
    title: "提示",
    content: "确定要清空搜索历史吗？",
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = [];
        saveSearchHistory();
      }
    },
  });
};

// 使用历史记录项
const useHistoryItem = (keyword) => {
  searchKeyword.value = keyword;
  searchAddress(keyword);
};

// 清空搜索框
const clearSearch = () => {
  searchKeyword.value = "";
  searchResults.value = [];
};

// 搜索地址
const searchAddress = (keyword) => {
  if (!keyword.trim()) {
    searchResults.value = [];
    return;
  }

  isSearching.value = true;

  // 这里应该调用地图API进行地址搜索
  // 示例使用模拟数据
  setTimeout(() => {
    // 模拟搜索结果
    if (keyword.includes("上海") || keyword.includes("天河")) {
      searchResults.value = [
        {
          name: "通力电梯(上海旗舰店)",
          address: "上海天河区珠江城洋村路11号",
          latitude: 31.2304,
          longitude: 121.4737,
        },
        {
          name: "上海中心大厦",
          address: "上海市浦东新区陆家嘴环路479号",
          latitude: 31.2338,
          longitude: 121.5079,
        },
        {
          name: "上海天河城",
          address: "上海市徐汇区天钥桥路123号",
          latitude: 31.1898,
          longitude: 121.4326,
        },
      ];
    } else if (keyword.includes("北京")) {
      searchResults.value = [
        {
          name: "北京通力电梯有限公司",
          address: "北京市朝阳区建国路88号",
          latitude: 39.9042,
          longitude: 116.4074,
        },
        {
          name: "北京国贸中心",
          address: "北京市朝阳区建国门外大街1号",
          latitude: 39.9088,
          longitude: 116.4614,
        },
      ];
    } else {
      searchResults.value = [];
    }

    isSearching.value = false;

    // 添加到搜索历史
    if (searchResults.value.length > 0) {
      addToHistory(keyword);
    }
  }, 800);

  // 实际应用中应该使用类似下面的代码调用地图API
  /*
		uni.request({
			url: 'https://apis.map.qq.com/ws/place/v1/search',
			method: 'GET',
			data: {
				keyword: keyword,
				boundary: 'region(上海,0)',  // 可以根据当前城市动态设置
				key: 'YOUR_MAP_KEY'
			},
			success: (res) => {
				isSearching.value = false;
				if (res.data.status === 0 && res.data.data.length > 0) {
					searchResults.value = res.data.data.map(item => ({
						name: item.title,
						address: item.address,
						latitude: item.location.lat,
						longitude: item.location.lng
					}));
					
					// 添加到搜索历史
					addToHistory(keyword);
				} else {
					searchResults.value = [];
				}
			},
			fail: (err) => {
				isSearching.value = false;
				console.error('搜索地址失败', err);
				uni.showToast({
					title: '搜索失败，请重试',
					icon: 'none'
				});
			}
		});
		*/
};

// 监听搜索输入
const onSearchInput = () => {
  if (searchKeyword.value) {
    // 可以实现输入时实时搜索
    // 这里为了性能考虑，不实时搜索，而是在用户停止输入一段时间后搜索
    clearTimeout(window.searchTimeout);
    window.searchTimeout = setTimeout(() => {
      searchAddress(searchKeyword.value);
    }, 500);
  } else {
    searchResults.value = [];
  }
};

// 搜索确认
const onSearchConfirm = () => {
  if (searchKeyword.value.trim()) {
    searchAddress(searchKeyword.value);
  }
};

// 选择地址
const selectAddress = (address) => {
  // 将选择的地址保存到store
  useUserStore().setAdressInfo({
    latitude: address.latitude,
    longitude: address.longitude,
    adress: address.name,
    addressDetail: address.address,
  });

  // 返回上一页
  uni.navigateBack({
    delta: 1,
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};

// 页面加载时
onMounted(() => {
  loadSearchHistory();
});
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;

  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    padding: 10rpx 20rpx;

    .search-input {
      flex: 1;
      height: 60rpx;
      margin: 0 20rpx;
      font-size: 28rpx;
    }
  }

  .cancel-btn {
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333333;
  }
}

.section {
  background-color: #ffffff;
  margin-top: 20rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #f5f5f5;

    .section-title {
      font-size: 28rpx;
      color: #333333;
    }
  }

  .history-list {
    padding: 0 30rpx;

    .history-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #f5f5f5;

      .history-text {
        margin-left: 20rpx;
        font-size: 28rpx;
        color: #333333;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.search-results {
  background-color: #ffffff;
  margin-top: 20rpx;
  min-height: 200rpx;

  .loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;

    text {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .no-result {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60rpx 0;
    color: #999999;
    font-size: 28rpx;
  }

  .result-list {
    .result-item {
      display: flex;
      padding: 20rpx 30rpx;
      border-bottom: 1px solid #f5f5f5;

      .result-icon {
        margin-right: 20rpx;
        display: flex;
        align-items: center;
      }

      .result-info {
        flex: 1;

        .result-name {
          font-size: 30rpx;
          color: #333333;
          margin-bottom: 10rpx;
        }

        .result-address {
          font-size: 26rpx;
          color: #999999;
        }
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>