<route lang="json5" type="page">
{
  layout: 'page',
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="wraper overflow-hidden flex flex-col" :bordered="false">
    <wd-navbar title="城市列表" left-arrow @click-left="navigatorBack" safeAreaInsetTop></wd-navbar>
    <wd-index-bar sticky class="overflow-y h-0 flex-auto">
      <view v-for="item in cities" :key="item.letter">
        <wd-index-anchor :index="item.letter" />
        <wd-cell
          border
          clickable
          v-for="city in item.provinces"
          :key="city.id"
          :title="city.provincename"
          @click="chooseCity(city)"
        ></wd-cell>
      </view>
    </wd-index-bar>
  </view>
</template>

<script lang="ts" setup>
import { useCityStore } from '@/store/city'
import { useUserStore } from '@/store/user'
import { City } from '@/types/app-type'

const cityStore = useCityStore()
const userStore = useUserStore()

const cities = cityStore.userCity.cities ?? []

const navigatorBack = () => {
  uni.navigateBack()
}

const chooseCity = (city: City) => {
  userStore.setUserCity(city)
  if (
    userStore.userInfo.estimatedAchievement.cityCode &&
    userStore.userInfo.estimatedAchievement.cityCode !== city.code
  ) {
    userStore.clearUserEstimatedAchievement()
  }
  navigatorBack()
}
</script>

<style lang="scss">
.wraper {
  height: calc(100vh - var(--window-top));
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}
</style>
