<template>
  <view class="select-city-wrap">
    <view class="select-city">
      <view class="index">
        <view class="index-item" @click="scrollTo('#')">#</view>
        <view class="index-item" v-for="item in citys" :key="item.letter" @click="scrollTo(item.letter)">{{item.letter}}</view>
      </view>
      <scroll-view :scroll-into-view="scrollIntoId" :scroll-y="true" :scroll-with-animation="true" :style="{height:windowHeight}">
        <view class="content">
          <view class="section" id="current">
            <view class="city-title">{{__('当前城市')}}</view>
            <view class="city-list">
              <view class="city-item">{{current}}</view>
            </view>
          </view>
          <view class="section" id="hot" v-if="hotCitys.length">
            <view class="city-title">{{__('热门城市')}}</view>
            <view class="city-list">
              <view class="city-item" :class="{active: current === city.subsite_name}" v-for="(city, i) in hotCitys" :key="i" @click="onSelect(city)">{{city.subsite_name}}</view>
            </view>
          </view>
          <view class="section" :id="item.letter" v-for="item in citys" :key="item.letter">
            <view class="letter">{{item.letter}}</view>
            <view class="city-list">
              <view class="city-item" :class="{active: current === city.subsite_name}" v-for="(city,itemIndex) in item.list" :key="itemIndex" @click="onSelect(city)">{{city.subsite_name}}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
  //import Citys from './citys'
  export default {
    props: {
      citys: {
        type: Array,
        default () {
          return []
        }
      },
      hotCitys: {
        type: Array,
        default () {
          return []
        }
      },
      subsite_current: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data() {
      return {
        windowHeight: '',
        scrollIntoId: 'F',
        current: this.subsite_current.subsite_name
      }
    },
    mounted() {
		let that = this;
		this.getSystemInfo()

		setTimeout(function(){that.current = that.subsite_current.subsite_name}, 400)
    },
    methods: {
      getSystemInfo() {
        uni.getSystemInfo().then(res => {
          let [error, data] = res
          this.windowHeight = `${data.windowHeight}px`
        })
      },
      scrollTo(letter) {
        this.scrollIntoId = letter === '#' ? 'current' : letter
      },
      onSelect(city) {
        this.current = city.subsite_name
        this.$emit('input', city)
        this.$emit('on-select', city)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .select-city-wrap {
    position: relative;
    padding: 0 30rpx;
    background-color: #fff;
  }
  .select-city {
    .index {
      position: absolute;
      right: 0;
      bottom: 20rpx;
      z-index: 999;
      color: #2f9bfe;
      font-size: 32rpx;
      .index-item {
        width: 40rpx;
        height: 42rpx;
        line-height: 42rpx;
        text-align: center;
      }
    }
    .section {
      margin-bottom: 19rpx;
      .city-title {
        color: #333;
        font-size: 28rpx;
        margin-bottom: 28rpx;
      }
      .letter {
        width: 44rpx;
        height: 44rpx;
        color: #fff;
        border-radius: 100%;
        background-color: #2f9bfe;
        font-size: 28rpx;
        line-height: 44rpx;
        text-align: center;
        margin-bottom: 30rpx;
      }
      .city-list {
        display: flex;
        flex-wrap: wrap;
        .city-item {
          width: 196rpx;
          height: 55rpx;
          margin-right: 25rpx;
          margin-bottom: 28rpx;
          line-height: 55rpx;
          text-align: center;
          border: 1px solid #dcdcdc;
          border-radius: 6rpx;
          color: #999;
          font-size: 23rpx;
          &.active {
            background-color: #d5ebff;
            border-color: #2f9bfe;
            color: #2f9bfe;
          }
        }
      }
    }
  }
</style>
