<!--pages/city-selector/city-selector.wxml-->
<view class="page">
  <!-- 固定导航栏容器 -->
  <view class="nav-container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    
    <!-- 自定义导航栏 -->
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">选择城市</view>
    </view>
  </view>

  <!-- 内容滚动区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;" enhanced show-scrollbar="{{false}}">
    <!-- 热门城市 -->
    <view class="section">
      <view class="section-title">热门城市</view>
      <view class="hot-cities">
        <view 
          wx:for="{{hotCities}}" 
          wx:key="index"
          class="city-tag {{item === selectedCity ? 'active' : ''}}"
          bindtap="onSelectCity"
          data-city="{{item}}"
        >
          {{item}}
        </view>
      </view>
    </view>

    <!-- 全部城市（按字母分组） -->
    <view class="section">
      <view class="section-title">全部城市</view>
      <view class="city-groups">
        <view wx:for="{{cityGroups}}" wx:key="letter" class="city-group">
          <view class="group-letter">{{item.letter}}</view>
          <view class="group-cities">
            <view 
              wx:for="{{item.cities}}" 
              wx:for-item="city"
              wx:key="city"
              class="city-item {{city === selectedCity ? 'active' : ''}}"
              bindtap="onSelectCity"
              data-city="{{city}}"
            >
              {{city}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>
