<template>
    <div id="">
      <!--头部-->
      <mt-header title="城市列表">
        <router-link to="/index" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <!--内容-->
      <div class="search-city"><input type="text" placeholder="请输入要搜索的城市" v-model="citySearch"></div>
      <div>
        <div id="showCityContent"></div>
        <div v-for="item in showCity" class="letter-item">
          <div><a :id="item.letter">{{item.letter}}</a></div>
          <div v-for="i in item.citylist">{{i}} </div>
        </div>
      </div>
      <aside class="letter-aside">
        <ul>
          <li v-for="item in showCity" @click="naver(item.letter)">{{item.letter}} </li>
        </ul>
      </aside>
      <div id="tip">
        {{tipString}}
    </div>
    </div>
</template>


<script>
  import pinyin from '../../static/lib/web-pinyin/bundle.js'
  var cityLists = []
  var cityNames = []
  var cityNamesFilter = []
  var letter = []
  var countPage = 0
  var tipLetter = ''
  var citySearch = ''
  var showCity = []
  var showCityList = []
  var showCityTemp
  export default {
    beforeCreated: function () {
    },
    updated: function () {

    },
    created: function () {
      countPage++
      if (countPage < 2) {
        this.$http.get('./static/city.json').then(response => {
          // get status
          let cityList = response.body.provinces
          for (let i in cityList) {
            cityLists = cityList[i].citys
            for (let j in cityLists) {
              cityNames.push(cityLists[j].citysName)
            }
          }
          cityNamesFilter = cityNames
          this.cityFilter(this.citySearch)
          this.someData = response.data.body
        }, response => {
        })
      }
    },
    mounted: function () {
      window.scrollTo(0, 500)
    },
    methods: {
      buildLetter: function () {  // 构建字母项
        letter = []
        for (let i = 0; i < 26; i++) {
          let obj = {}
          obj.letter = String.fromCharCode((65 + i))
          obj.citylist = []
          letter.push(obj)
        }
      },
      getFirstLetter: function (str) { //  得到城市第一个字的首字母
        return pinyin.pinyin(str)[0][0].charAt(0).toUpperCase()
      },
      buildItem: function (cityNamesFilter) {  // 构建城市
        this.buildLetter()
        let _this = this
        for (let i = 0; i < 26; i++) {
          letter[i].citylist = []
        }
        for (let i = 0; i < cityNamesFilter.length; i++) {
          let _index = Number(_this.getFirstLetter(cityNamesFilter[i]).charCodeAt() - 65)
          if (_index >= 0 && _index < 26) {
            letter[_index].citylist.push(cityNamesFilter[i])
          }
        }
        // 如果letter中citylist中没有值的话，过滤这一项
        showCity = showCityTemp = letter.filter(function (value) {
          let len = value.citylist.length
          return len > 0
        })
      },
      naver: function (id) { // 点击右边字母滚动
        this.tipString = id
        let obj = document.getElementById(id)
        let tip = document.getElementById('tip')
        tip.setAttribute('class', 'tipAppear')
        setTimeout(function () {
          tip.removeAttribute('class')
        }, 500)
        let oPos = obj.offsetTop
        return window.scrollTo(0, oPos - 36)
      },
      cityFilter: function (city) {  // 城市搜索筛选
        let showCityListTemp
        this.buildItem(cityNamesFilter)
        showCity = showCityTemp
        showCity = showCity.filter(function (value) {
          showCityList = value.citylist
          showCityListTemp = showCityList.filter(function (val) {
            return (val.indexOf(city) > -1)
          })
          value.citylist = showCityListTemp
          return value.citylist.length > 0
        })
        this.showCity = showCity
        if (showCity.length === 0) {
          let _showCityContent = document.getElementById('showCityContent')
          _showCityContent.innerText = '查询不到结果'
          _showCityContent.setAttribute('class', 'tipShow')
        } else {
          document.getElementById('showCityContent').innerText = ''
        }
      }
    },
    data () {
      return {
        cityNames: cityNamesFilter,
        letter: letter,
        tipString: tipLetter,
        citySearch: citySearch,
        showCity: showCity
      }
    },
    watch: {
      citySearch: function (newCitySearch) {
        this.cityFilter(newCitySearch)
      }
    }
  }
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  #city {
    position: relative;
  }

  .letter-item {
    > div:first-child {
      font-size: 16px;
      line-height: 2em;
      background: #eee;
      margin-bottom: 2px;
    }
    > div {
      padding-right: 10%;
      padding-left: 10%;
      border-bottom: 1px solid #f2f2f2;
    }
  }

  .letter-aside {
    position: fixed;
    right: 10px;
    top: 2.3rem;
    ul {
      list-style: none;
      line-height: 1.4em;
      font-size: 14px;
      color: #aaa;
    }
  }

  #tip {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #333333;
    width: 100px;
    height: 100px;
    z-index: 10;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    opacity: 0;
  }

  .tipAppear {
    animation: appearTip 1 linear 0.5s;
  }

  @keyframes appearTip {
    0% {
      opacity: 1;
    }
    80% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }

  .search-city {
    text-align: center;
    padding: 5px 0;
    input {
      line-height: 24px;
      border-radius: 5px;
      outline: none;
    }
  }

  .tipShow {
    text-align: center;
    line-height: 60px;
    font-size: 16px;
    color: #bbbbbb;
  }
</style>
