<template>
  <div class="city-page">
    <!-- 城市展示区域 -->
    <div class="list-wrap">
      <div
        class="list"
        v-for="(group, index) of tab.groups"
        :key="index"
        :group="group"
      >
        <template v-if="group.citys && group.citys.slice(startIndex, endIndex).length">
          <div class="title" v-if="group.letter">
            {{ group.letter }}
          </div>
          <div class="cities" :class="group.letter">
            <div
              v-for="(city, index) of group.citys.slice(startIndex, endIndex)"
              :key="index"
              class="city-wrap"
              @click="handleSelect(city)"
            >
              <span class="city-name" v-text="city.cityName"></span>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="pagination" v-if="tab.groups.length > 1">
      <el-button type="text" @click.native="handlerPrev" :disabled="isStart" icon="el-icon-d-arrow-left">
        上一页
      </el-button>
      <el-button type="text" @click.native="handlerNext" :disabled="isEnd">
        下一页
        <i class="el-icon-d-arrow-right el-icon--right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cityPage',
  props: {
    tab: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
    };
  },
  computed: {
    startIndex() {
      const { pageNum, pageSize } = this;
      const index = (pageNum - 1) * pageSize;
      return index;
    },
    endIndex() {
      const { pageNum, pageSize } = this;
      const index = pageNum * pageSize;
      return index;
    },
    isStart() {
      const isStart = this.pageNum === 1;
      return isStart;
    },
    isEnd() {
      const isEnd = this.tab.groups.every(group => group.citys.length <= this.endIndex);
      return isEnd;
    },
  },
  methods: {
    handlerPrev() {
      this.pageNum--;
    },
    handlerNext() {
      this.pageNum++;
    },
    resetPages() {
      this.pageNum = 1;
    },
    handleSelect(city) {
      this.$emit('select', city);
    },
  },
};
</script>