<template>
  <view class="page-location-search">
    <!-- 搜索框 -->
    <view class="search-header">
      <view class="search-input-wrap">
        <view class="search-icon">
          <u-icon name="search" :size="20" color="#999" />
        </view>
        <input
          class="search-input"
          type="text"
          v-model="keyword"
          placeholder="搜索酒店/位置/品牌"
          :focus="true"
          @input="onInput"
          @confirm="selectKeyword"
        />
        <view v-if="keyword" class="clear-icon" @tap="clearKeyword">
          <u-icon name="close" :size="18" color="#999" />
        </view>
      </view>
      <text class="cancel-btn" @tap="goBack">取消</text>
    </view>

    <!-- 搜索结果 -->
    <view class="search-results">
      <!-- 第一行：当前搜索关键词 -->
      <view v-if="keyword" class="result-item keyword-item" @tap="selectKeyword">
        <view class="result-icon">
          <u-icon name="search" :size="20" color="#667eea" />
        </view>
        <text class="result-text">搜索"{{ keyword }}"</text>
      </view>

      <!-- 搜索结果列表 -->
      <view v-if="loading" class="loading">
        <text class="loading-text">搜索中...</text>
      </view>

      <view v-else-if="searchResults.length > 0" class="result-list">
        <view
          v-for="item in searchResults"
          :key="item.id"
          class="result-item"
          @tap="selectMerchant(item)"
        >
          <image class="result-logo" :src="item.logo || '/static/default-avatar.png'" mode="aspectFill" />
          <view class="result-info">
            <text class="result-name">{{ item.shopName }}</text>
            <text class="result-address">{{ item.city }} {{ item.district }} {{ item.address }}</text>
          </view>
        </view>
      </view>

      <view v-else-if="keyword && !loading" class="empty">
        <text class="empty-text">未找到相关酒店</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getMerchantList } from '@/api/user/merchant';

const keyword = ref('');
const searchResults = ref<any[]>([]);
const loading = ref(false);
let searchTimer: any = null;

function onInput() {
  if (searchTimer) clearTimeout(searchTimer);
  if (!keyword.value.trim()) {
    searchResults.value = [];
    return;
  }
  searchTimer = setTimeout(() => {
    searchMerchants();
  }, 300);
}

async function searchMerchants() {
  if (!keyword.value.trim()) return;
  loading.value = true;
  try {
    const res = await getMerchantList({
      keyword: keyword.value.trim(),
      pageSize: 20,
    });
    searchResults.value = res.data?.list || [];
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
}

function selectKeyword() {
  if (!keyword.value.trim()) return;
  // 通过全局变量传递，返回首页后读取
  (uni as any).__locationSearchKeyword = keyword.value.trim();
  uni.navigateBack();
}

function selectMerchant(merchant: any) {
  (uni as any).__locationSearchKeyword = merchant.shopName;
  uni.navigateBack();
}

function clearKeyword() {
  keyword.value = '';
  searchResults.value = [];
}

function goBack() {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/common.scss';

.page-location-search {
  min-height: 100vh;
  background: $bg-page;
}

.search-header {
  display: flex;
  align-items: center;
  padding: $spacing-lg $spacing-xl;
  background: $bg-card;
  border-bottom: 1rpx solid $border-light;
}

.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: $bg-page;
  border-radius: $radius-round;
  height: 72rpx;
  padding: 0 $spacing-lg;
  border: 1rpx solid $border-light;
  transition: all 0.2s ease;

  &:focus-within {
    border-color: $primary-color;
    background: $bg-card;
  }
}

.search-icon {
  font-size: $font-base;
  margin-right: $spacing-sm;
}

.search-input {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
}

.clear-icon {
  font-size: $font-base;
  color: $text-secondary;
  padding: $spacing-xs;
  transition: all 0.2s ease;

  &:active {
    opacity: 0.6;
  }
}

.cancel-btn {
  font-size: $font-base;
  color: $text-secondary;
  margin-left: $spacing-lg;
  transition: all 0.2s ease;

  &:active {
    opacity: 0.6;
  }
}

.search-results {
  padding: 0 $spacing-xl;
}

.keyword-item {
  background: $bg-card;
  margin-top: $spacing-lg;
  border-radius: $radius-base;
  border: 1rpx solid $border-light;
  transition: all 0.2s ease;

  &:active {
    background: $bg-hover;
  }
}

.result-item {
  display: flex;
  align-items: center;
  padding: $spacing-xl;
  background: $bg-card;
  margin-top: $spacing-md;
  border-radius: $radius-base;
  border: 1rpx solid $border-light;
  transition: all 0.2s ease;

  &:active {
    background: $bg-hover;
  }
}

.result-icon {
  font-size: $font-lg;
  margin-right: $spacing-md;
}

.result-text {
  font-size: $font-base;
  color: $text-primary;
}

.result-logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: $radius-sm;
  flex-shrink: 0;
  border: 1rpx solid $border-light;
}

.result-info {
  flex: 1;
  margin-left: $spacing-md;
}

.result-name {
  font-size: $font-base;
  color: $text-primary;
  font-weight: $font-medium;
  display: block;
}

.result-address {
  font-size: $font-sm;
  color: $text-secondary;
  margin-top: $spacing-xs;
  display: block;
}

.loading,
.empty {
  display: flex;
  justify-content: center;
  padding: 60rpx 0;
}

.loading-text,
.empty-text {
  font-size: $font-base;
  color: $text-secondary;
}
</style>
