<template>
  <view class="city-selector">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <u-search placeholder="搜索城市" shape="round" :clearabled="true" :showAction="false" @input="method.onSearchInput" v-model="useModel.searchKeyword.value"></u-search>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view v-if="useModel.searchKeyword.value && useModel.searchResults.value.length > 0" class="search-results">
      <scroll-view scroll-y class="results-scroll">
        <view
          v-for="(city, index) in useModel.searchResults.value"
          :key="`search_${index}`"
          class="city-item"
          @click="method.selectCity(city)"
        >
          <view class="city-name">{{ city.city }}</view>
          <!-- <view v-if="city.pinyin" class="city-pinyin">{{ city.pinyin }}</view> -->
        </view>
      </scroll-view>
    </view>

    <!-- 空搜索结果 -->
    <view v-else-if="useModel.searchKeyword.value && useModel.searchResults.value.length === 0" class="empty-result">
        <hs-empty text="未找到相关城市" />
    </view>

    <!-- 城市列表 -->
    <view v-else class="city-list-container">
      <scroll-view scroll-y class="city-scroll" scroll-with-animation :scroll-into-view="useModel.scrollToId.value">
        <!-- 当前定位城市 -->
        <view v-if="useModel.currentCity.value" class="city-section">
          <view class="section-title">当前定位</view>
          <view class="city-item current-city" @click="method.selectCity(useModel.currentCity.value)">
            <u-icon name="map" size="14"></u-icon>
            <view class="city-name">{{ useModel.currentCity.value.name }}</view>
          </view>
        </view>

        <!-- 热门城市 -->
        <view v-if="useModel.hotCities.value.length > 0" class="city-section">
          <view class="section-title">已开通城市</view>
          <view class="hot-cities-grid">
            <view
              v-for="(city, index) in useModel.openCities.value"
              :key="`hot_${index}`"
              class="hot-city-item"
              @click="method.selectCity(city)"
            >
              {{ city.city }}
            </view>
          </view>
        </view>

        <!-- 所有城市按字母分组 -->
        <!-- <view v-for="(group, letter) in useModel.cityGroups.value" :key="letter" class="city-section" :id="`section_${letter}`">
          <view class="section-title">{{ letter }}</view>
          <view
            v-for="(city, index) in group"
            :key="`city_${letter}_${index}`"
            class="city-item"
            @click="method.selectCity(city)"
          >
            <view class="city-name">{{ city.name }}</view>
          </view>
        </view> -->
      </scroll-view>

      <!-- 右侧字母索引 -->
      <!-- <view v-if="useModel.indexLetters.value.length > 0" class="index-bar">
        <view
          v-for="(letter, index) in useModel.indexLetters.value"
          :key="`index_${index}`"
          class="index-item"
          @click="method.scrollToSection(letter)"
        >
          {{ letter }}
        </view>
      </view> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { useWeAppAuthStore } from '@/common'
const auth = useWeAppAuthStore()
import { onLoad } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'

onLoad(() => {
useModel.currentCity.value = { name: auth?.data?.current_city?.city || '深圳' }
//   method.getLocation()
  // 如果需要从接口获取城市列表，可以调用
  method.getCityList()
})
</script>
<style lang="scss">
@import './style.scss';
</style>
