<template>
  <div class="pick-city">
    <!-- 输入框 -->
    <div class="pick-city-search-input">
      <search-input placeholder="输入城市名进行搜索" :searchBtnShow="false" @on-change="keywordChange" :focus="false"></search-input>
    </div>
    <!-- 当前定位城市 -->
    <div class="content">
      <div class="address-label">
        <div class="icon-position"></div>
        <div class="label-text">当前定位城市<span class="span" @click="pickCity(location.city)">{{location.city}}</span></div>
      </div>
      <!-- 热门城市 -->
      <div class="hot-city">
        <div class="label-title">热门城市</div>
        <div class="city-list">
          <div v-for="city in hotCity" :key="city.id" class="list-item" @click="pickCity(city.name)">
            {{city.nickName}}
          </div>
        </div>
      </div>
      <!-- 搜索城市 -->
      <div class="search-list">
        <div class="city-item" v-for="city in cityList" :key="city.id" @click="pickCity(city)">
          {{city.name}}
        </div>
      </div>
    </div>
    <!-- loading -->
    <ZyLoading></ZyLoading>
  </div>
</template>

<script>
import ZyLoading from '@/components/Loading/loading'
import SearchInput from '@/components/commonCmp/search-input/search-input.vue'
import {errToast} from '@/utils/uniapi.js'
import { mapGetters } from 'vuex'

import apiAddress from '@/apis/address'
import {hotCity} from "@/apis/config"
import {store} from "@/store"
export default {
  components: {
    ZyLoading, SearchInput
  },
  data () {
    return {
      cityList: [],           // 搜索历史
      hotCity: hotCity
    }
  },
  async created () {},
  onShow () {
    const historyCity = uni.getStorageSync('historyCity')
    this.cityList = historyCity ? JSON.parse(historyCity) : []
  },
  computed: {
    ...mapGetters({
      location: 'indexPage/myLocation'
    })
  },
  methods: {
    async keywordChange (keyword) {
      this.cityList=[]
      keyword = keyword.trim()
      if (!keyword) return false
      this.showLoad()
      try {
        let province = await apiAddress.getCity({keyword:keyword,level:1})   // 省
        let city = await apiAddress.getCity({keyword:keyword,level:2})  // 市
        let area = await apiAddress.getCity({keyword:keyword,level:3})  // 区
        this.cityList = [...province, ...city, ...area]
      } catch (e) {
        console.error(e)
        this.cityList = []
        errToast(e)
      } finally {
        this.hideLoad()
      }
      // console.log(this.cityList)
    },
    pickCity (city) {
      if (typeof city === 'string') {
        store.commit('indexPage/changeCity', city)
      } else {
        store.commit('indexPage/changeCity', city.name)
        // 存储历史城市
        const historyCity = uni.getStorageSync('historyCity')
        const history = historyCity ? JSON.parse(historyCity) : []
        history.unshift(city)
        // 找到后面位置的相同ID移除
        // 去除重复
        const noRepeatHistory = []
        for (let i = 0; i < history.length; i++) {
          const cityItem = history[i]
          if (noRepeatHistory.find(item => item.code === cityItem.code)) continue
          else noRepeatHistory.push(cityItem)
        }
        if (noRepeatHistory.length > 10) history.pop()
        uni.setStorageSync('historyCity', JSON.stringify(noRepeatHistory))
      }
      uni.navigateBack({delta: 1})
    }
  }
}
</script>

<style lang="scss">
@import "./pick-city.scss";
</style>