<template lang="html">
<transition name="slide">
  <div class="xin-widget-citys animated" style="font-size:13px;background-color:#F9F9F9" id="city-picker-bake">
    <SearchBox class="search" @query="query" :placeholder="placeholder"></SearchBox>
    <div class="content-block" v-if="queryCity===''">
      <div>
        <div class="sentTo-title">
        <img class="icon-title" src="../assets/img/title-icon.png"><span>当前定位城市</span>
        <re-locate class="right re-locate" @getSuccess='reLocateResult' ></re-locate>
      </div>
      <div class="line" style="display:flex">
          <span class="current-city" @click="checkedTargetCity(cityInfo)">{{formatCity(cityInfo)}}</span>

      </div>
      </div>
    </div>
      <Scroll :data="searchList" class="searchlist" v-if="queryCity !== ''" :class="{'bg':searchList.length === 0}">
          <div class="list-container">
            <ul v-if="searchList.length!==0">
                <li class="search-result-item" v-for="item in searchList" @click="selectSearchItem(item)" :key='item.index'>{{item.name}}</li>
            </ul>
          </div>
      </Scroll>
    <CityList class="city" v-if="queryCity===''" @selectItem="selectItem" @cityData="setCityList"></CityList>
  </div>
</transition>
</template>

<script>
import Scroll from './m-scroll'
import SearchBox from './m-search'
import CityList from './city-list'
import ReLocate from 'location-js-bake/src/components/re-locate'
export default {
  name: 'cityPicker',
  components: {
    ReLocate,
    SearchBox,
    CityList,
    Scroll
  },
  props: ['currentCity'],
  data () {
    return {
      city: [],
      letterList: [],
      searchList: [], // 搜索结果
      queryCity: '',
      placeholder: '输入城市名称',
      cityInfo: this.currentCity,
      cityDataList:[]
    }
  },
  mounted () {
    console.log(this.cityInfo)
  },
  methods: {
    query (newVal) {
      this._search(newVal)
      this.queryCity = newVal
    },
    // 搜索
    _search (newVal) {
      var _arr = []
      for (var i in this.letterList) {
        for (var j = 0; j < this.letterList[i].length; j++) {
          var reg = new RegExp(newVal === '' ? 'xxyy' : newVal, 'ig')
          var pinyin = ''
          var pinyinList = this.letterList[i][j].pinyin
          for (var p = 0; p < pinyinList.length; p++) {
            pinyin += pinyinList[p]
          }
          if (
            reg.test(this.letterList[i][j]['name']) || reg.test(this.letterList[ i ][ j ][ 'firstLetter' ]) || reg.test(pinyin)
          ) {
            _arr.push(this.letterList[i][j])
          }
        }
      }
      this.searchList = _arr
    },
    // 序列化数组
    _formatCityList (arr) {
      var letterArr = {}
      for (var i = 0; i < arr.length; i++) {
        if (!(arr[i]['initial'] in letterArr)) {
          letterArr[arr[i]['initial']] = []
          for (var k = 0; k < arr[i].list.length; k++) {
            letterArr[arr[i]['initial']].push(arr[i].list[k])
          }
        } else {
          for (var j = 0; j < arr[i].list.length; j++) {
            letterArr[arr[i]['initial']].push(arr[i].list[j])
          }
        }
      }
      this.letterList = letterArr
    },
    // 给数组添首字母
    setCityList(citylist){
      this.cityDataList = citylist
      this._addFirstLetter(citylist)
    },
    _addFirstLetter (citylist) {
      for (var i = 0; i < citylist.length; i++) {
        for (var j = 0; j < citylist[i].list.length; j++) {
          citylist[i].list[j]['firstLetter'] = citylist[i].initial
        }
      }
      this._formatCityList(citylist)
    },
    selectItem (item) {
      this.afterSelect(item)
    },
    formatCity (city) {
      if (city) {
        let name = city.city
        name = name.replace('市', '')
        return name
      } else {
        return '定位中'
      }
    },
    selectSearchItem (item) {
      this.afterSelect(item)
    },
    checkedTargetCity (city) {
      var that = this
      let code = (city.adcode + '').substr(0, 4)
      let listarr = Object.assign({}, this.cityDataList)
      for (var i in listarr) {
        listarr[i]['list'].forEach(function (item, index) {
        // console.log(item.id)
          if (code === (item.id + '').substr(0, 4)) {
            that.selectSearchItem(item)
            return false
          }
        })
      }
    },
    // 选择之后的操作
    afterSelect (item) {
      // this.setCity(item)
      this.$emit('cityChecked', item)
    },
    // 重新定位结果
    reLocateResult (data) {
      this.cityInfo = data
    },

  }

}
</script>

<style lang="less" scoped>
.current-city{
  flex: 1;
}
.re-locate{
  margin-left: 20px;
  margin-top: 2px;
}
.xin-widget-citys{
  background:#fff;
  padding-top: .14rem;
  padding-bottom: .40rem;
  .currentCity{
    width: 6.56rem;
    margin: 0 auto;
    ul{
      list-style: none;
      h2{
        font-size: .28rem;
        color:#999;
        margin-bottom: .22rem;
        margin-top:.32rem;
      }
      li{
        font-size:.28rem;
        color:#323232;
      }
    }
  }
  .searchlist{
    position: fixed;
    top: 1.6rem;
    width: 100%;
    margin: 0 auto;
    bottom: 0;
    overflow: hidden;
    background-color:#F9F9F9;
    border-radius: 10px;
    ul{
      li{
        color:#323232;
        width: 100%;
        margin: 0 auto;
        height: .82rem;
        line-height: .82rem;
      }
    }
    .nomatch{
      display: block;
      margin:0 auto;
      margin-top:2.04rem;
      width:2.09rem;
      height:1.95rem;
    }
  }
  .bg{
    background:#f6f4f4;
  }
}
.slide-enter-active, .slide-leave-active{
  transition: all 0.3s
}
.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0)
}
.search-result-item{
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}
.list-container{
  width: 98%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
}
</style>
