<template>
  <div class="container store-page">
    <!-- <div class="store-toolbar">
      <div class="toolbar">
        <div class="item item1" >
         <van-search
            value="{{ value }}"
            placeholder="请输入搜索关键词"
            show-action
            shape="round"
            background="#efefef"
            focus
            @change="onChange"
            @cancel="onCancel"
          />
        </div>


      </div>

    </div> -->
    <div class="content">
        <div class="all-city">
            <scroll-view class="city-scroll" scroll-y="true" scroll-with-animation="true" :scroll-into-view="toView">
                <div class="city-list">
                  <div id="gps" class="city-con">
                    <span @click='selectcity(currentCity)' class="city-box">
                      <van-icon style="font-size: 14px; color: red;vertical-align: middle;" name="location-o" />
                      <span >{{currentCity.name}}</span>
                    </span>
                  </div>
                  <div class="city-con" id="hot">
                    <div class="nav-text">
                        <span>热门城市</span>
                    </div>
                    <div class="hot-list">
                        <span @click='selectcity(item)' class="city-box" v-for="(item,index) in hotList" :key="index" >{{item.name}}</span>
                    </div>
                  </div>
                    <!-- 循环城市列表 start -->
                    <div v-for="(item,index) in cityList" :key="index" :id="'city' + item.title"   :data-title="item.title">
                        <div class="nav-text">
                            <span>{{item.title}}</span>
                        </div>
                        <div class="show-city">
                            <span @click='selectcity(item)' v-for="(item,indexx) in item.lists" :key="indexx" >{{item.name}}</span>
                        </div>
                    </div>
                    <!-- 循环城市列表 end -->
                </div>
            </scroll-view>
        </div>
        <!-- 字母索引 start -->
        <div class="search-nav" >
            <span @click="cityScroll(item)" :data-index="index" v-for="(item,index) in searchNav" :key="index" >{{item}}</span>
        </div>
        <!-- 字母索引 end -->
    </div>

    <view  v-if="showCon" class="modal-mask" @click="showCon=false">
      <view class="modal-dialog">
        <view class="modal-title">温馨提示</view>
        <view class="modal-content">
          获取定位失败，请前往设置打开定位权限
        </view>
        <view class="modal-footer">
          <view class="btn-cancel" @click="showCon=false">取消</view>
          <button open-type="openSetting" class="btn-confirm button-on-view" style="padding:0rpx;" @click="showCon=false">设置</button>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import { listStore, getLookUpData } from '@/api/api';
import NoData from '@/components/NoData';
import storage from '@/utils/storage.js';
import { getListArea } from '@/api/store.js';
import { province, city, area } from '@/api/address.js'
import pinyin from 'pinyin'
export default {
  name: 'storeSearch',
  components: { 'no-data': NoData },
  data() {
    return {
      showCon: false,
      searchVal: '',
      // 当前定位城市code name
      currentCity: {
        code:'',
        name:''
      },
      isfocus: true,
      toView:'',//用来做定位联动
      searchNav: ["定","热"],
      hotList: [
        {name:"西安市",code:"6101"},
        {name:"咸阳市",code:"6104"},
        {name:"渭南市",code:"6105"},
        {name:"商洛市",code:"6110"},
        {name:"铜川市",code:"6102"},
        {name:"兰州市",code:"6201"}
      ],
      cityList: [],
      currentPosition: {
        lat: '',
        lng: ''
      },
    };
  },
  computed: {

  },
  methods: {
    onChange (e) {
      this.searchVal = e.mp.detail
      console.log(e, "e.detail")
      console.log(this.searchVal, "this.searchVal")
    },
    onCancel () {
      wx.navigateBack({
        delta: 1
      })
    },
    // 获取已开通城市
    getAllCity () {
      getListArea({}).then(res => {
        console.log(res)
        if(res.status == 200){
          this.getCityList(res.data)
        }
      })
    },
    // 格式化城市列表
    getCityList (data){
      this.cityList = []
      this.searchNav = ["定","热"]
      let zmIndex = []
      for(let i=0;i<data.length;i++){
        let item = data[i]
        if(String(item.addrDistrict).length == 4){
          // 如果是直辖市
          if(item.addrDistrictName == '市辖区'){
            //console.log(province)
            //console.log(item.addrDistrict)
            let b = province.find(k=>{
              return k.children[0].value == item.addrDistrict
            })
            console.log(b)
            item.addrDistrictName = b.name
          }

          let py = pinyin(item.addrDistrictName)
          let pyIndex = py[0][0].substr(0,1).toUpperCase()
          const hasPy = zmIndex.find(item => {return item == pyIndex})
          const hasCity = this.cityList.find(item => {return item.title == pyIndex})
          if(!hasPy){
            zmIndex.push(pyIndex)
          }
          // 已存在
          if(hasCity){
            hasCity.lists.push({ name: item.addrDistrictName , code: item.addrDistrict})
          }else{
            this.cityList.push({
                "title": pyIndex,
                "lists":[{ name: item.addrDistrictName , code: item.addrDistrict}]
            })
          }
        }
      }
      // 缓存数据
      //storage.put('cityListData', this.cityList , 5)
      // 按字母排序
      this.cityList = this.cityList.sort(function(a,b){
          return a.title.charCodeAt(0) - b.title.charCodeAt(0)
      })
      this.searchNav = this.searchNav.concat(zmIndex.sort())
      //console.log(this.cityList,'cityList')
      //console.log(this.searchNav,'searchNav')
    },
    // 选择城市
    selectcity(data){
      wx.reLaunch({
        url: `/pages/store/main?code=${data.code}&name=${data.name}`
      })
    },
    // 点击英文字母进行跳转到相应位置
    cityScroll(index){
        console.log(index, 'eeeee')
        if (index == "定") {
          this.toView = "gps"
        } else if (index == "热"){
          this.toView = "hot"
        }
        this.toView = `city${index}`
        console.log(this.toView, 'this.toView')
    	},
  },
  onShow() {
    this.searchVal = '';
    this.isfocus = true
  },
  onLoad(options) {
    console.log(options)
    this.currentCity.code = options.code != 'undefined' ? options.code : null
    this.currentCity.name = options.name != 'undefined' ? options.name : '未开启'
    this.getAllCity()
  }
};
</script>

<style lang="stylus">
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-dialog {
  width: 540rpx;
  overflow: hidden;
  z-index: 9999;
  background: #f9f9f9;
  border-radius: 5rpx;
}
.modal-title {
  padding-top: 30rpx;
  font-size: 32rpx;
  color: #030303;
  text-align: center;
}
.modal-content {
  padding: 20rpx 32rpx;
  font-size: 28rpx;
}
.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: 1px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
}
.btn-cancel {
  width: 50%;
  color: #abb4bd;
  text-align: center;
  border-right: 1px solid #dedede;
}
.btn-confirm {
  width: 50%;
  color: #6fb64b;
  text-align: center;
  font-weight: 500;
}
._v-card .v-card{
  border-bottom: 1px solid #eee;
  height:auto;
}
.vcard .van-card__img{
  border-radius:5px;
}
.container {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 30rpx;
}

.store-content {
  height: 100%;
  box-sizing: border-box;
}

.store-toolbar {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  z-index: 9;
  .toolbar {
    display: flex;
    justify-content: space-around;
    height: 70rpx;

    .item {
      width: 100%;
      border-bottom : 1px solid #d9d9d9;
    }

    .item1 {
      text-align: right;
    }
  }


}
.city-con{
  width :100%;
  padding: 5px 0px;

}
.city-box{
  width: 80px;
  border :1px solid #dfdfdf;
  border-radius :5px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  margin-bottom: 10px;
  font-size: 14px;
  margin-left :15px;
}
.content{
    // margin-top: 90rpx;
    width: 100%;
}
.nav-text{
  background-color :#efefef;
  width :100%;
  font-size :16px;
  padding :10px 0px;
}
.nav-text span {
  margin-left :15px;
}
.hot-list {
  width :100%;
 padding-top: 10px;

}
.city-scroll {
    // left: 15px;
    // position: fixed;
    height: 100%;
    width: 100%;
}

.search-nav{
    position: fixed;
    top: 140rpx;
    bottom: 160rpx;
    right: 5rpx;
    z-index :99;
    display:flex;
    flex-direction: column;
}

.search-nav span{
    padding : 10px;
    text-align: center;
    font-size: 24rpx;
}

.show-city{
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.show-city span{
    padding :10px 15px
    font-size: 28rpx;
}


</style>
