<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="wraper overflow-hidden flex flex-col" :bordered="false">
    <Navbar title="城市列表" left-arrow @click-left="navigatorBack" safeAreaInsetTop />
    <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" />
        <view
          v-for="city in item.provinces"
          :key="city.id"
          @click="chooseCity(city)"
          class="px-[32rpx] py-[24rpx] province-item"
        >
          {{ city.provincename }}
        </view>
      </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'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import { getUserCity } from '@/service/index/api'

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.provinceCode &&
    userStore.userInfo.estimatedAchievement.provinceCode !== city.code
  ) {
    userStore.clearUserEstimatedAchievement()
    // userStore.setEstimatedAchievement({ provinceName: city.provincename, provinceCode: city.code })
  }
  navigatorBack()
}

const getUserLocation = () => {
  uni.getLocation({
    type: 'wgs84',
    success: (res) => {
      const { latitude, longitude } = res

      getUserCity({ lat: latitude, lng: longitude }).then((resp) => {
        if (resp.code === 200) {
          let _locationCode = (resp.result as { locationCode: string }).locationCode
          cities.map((item) => {
            item.provinces.map((city) => {
              if (city.code === _locationCode) {
                userStore.setUserCity(city)
                if (
                  userStore.userInfo.estimatedAchievement.provinceCode &&
                  userStore.userInfo.estimatedAchievement.provinceCode !== city.code
                ) {
                  userStore.clearUserEstimatedAchievement()
                  // userStore.setEstimatedAchievement({ provinceName: city.provincename, provinceCode: city.code })
                }
              }
            })
          })
        }
      })
    },
    fail: () => {
      uni.showToast({
        title: '获取位置权限失败',
        icon: 'none',
      })
    },
  })
}

onLoad(() => {
  if (!userStore.userInfo.estimatedAchievement.provinceCode) {
    getUserLocation()
  }
})
</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));
}
.province-item {
  font-size: 28rpx;
  color: #000000;
}

.province-item:not(:last-child) {
  border-bottom: 1rpx solid #e5e5e5;
}

.wd-index-bar {
  background-color: #f8f8f8;
}
</style>
