<!-- 区号下拉框 -->
<template>
  <div class="index-bar-container" v-show="show" @click.stop="">
    <div class="index-bar-content">
      <el-scrollbar style="height: 100%" ref="scrollbar">
        <div :id="key" class="main-list" v-for="(area, key) in indexData" :key="key" ref="listGroup">
          <div class="title-key">{{ key == '#' ? '选择国家或地区' : key }}</div>
          <div class="content-container">
            <div :class="['content-item', { 'active-item': val.name == currentAreaCode }]" v-for="(val, index) in area" :key="index" @click="chooseAreaItem(val)">
              <div class="text-content">{{ val.areaCode }}</div>
              <span class="area-content">{{ val[name] }}</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <!-- 右侧字母列表 -->
      <ul class="char-list">
        <li v-if="totalPage > 1" @click="handlePreviousPage">
          <i class="iconfont iconshang"></i>
        </li>
        <li v-for="item in indexList" :key="item.id" @click="scrollToLetter(item)" :class="{ active: currentIndex === item.id }">
          {{ item.key }}
        </li>
        <li v-if="totalPage > 1" @click="handleNextPage">
          <i class="iconfont iconxia"></i>
        </li>
      </ul>
      <div class="no-data" v-if="charList.length <= 0">暂无数据</div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: 'EreaIndexBar',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    currentAreaCode: {
      type: [Number, String],
      default: ''
    },
    name: {
      type: String,
      default: 'name'
    },
    indexData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      charList: [],
      listHeight: [],
      currentIndex: 0,
      indexPage: 1,
      indexLimit: 26
    };
  },

  watch: {
    show(newV, oldV) {
      const keys = Object.keys(this.indexData);
      this.charList = keys.map((key, index) => {
        return {
          id: index,
          key
        };
      });
      if (newV) {
        this.$nextTick(() => {
          this._calculateHeight();
          this.handleScroll();
        });
      }
    }
  },

  computed: {
    totalPage() {
      return Math.ceil(this.charList.length / this.indexLimit);
    },
    indexList() {
      return this.charList.slice((this.indexPage - 1) * this.indexLimit, this.indexPage * this.indexLimit);
    }
  },

  methods: {
    _calculateHeight() {
      this.listHeight = [];
      this.$nextTick(() => {
        const list = this.$refs.listGroup;
        let height = 0;
        this.listHeight.push(height);
        if (list) {
          for (let i = 0; i < list.length; i++) {
            let item = list[i];
            height += item.clientHeight;
            this.listHeight.push(height);
          }
        }
      });
    },
    scrollToLetter(item) {
      let scrollEle = this.$refs.scrollbar.wrap;
      scrollEle.scrollTop = this.listHeight[item.id];
      // let element = document.querySelector(`#${item.key}`)
      // console.log(element, "element")
      // element.scrollIntoView({
      //   behavior: "smooth"
      // })
    },
    handleScroll() {
      let scrollEle = this.$refs.scrollbar.wrap;
      scrollEle.onscroll = () => {
        let newY = scrollEle.scrollTop;
        const listHeight = this.listHeight;
        // 在中间部分滚动
        for (let i = 0; i < listHeight.length - 1; i++) {
          let height1 = listHeight[i];
          let height2 = listHeight[i + 1];
          if (height1 <= newY && newY < height2) {
            this.currentIndex = i;
            // console.log(this.currentIndex, "currentIndex")
            let currentPage = Math.floor(i / this.indexLimit) + 1;
            this.indexPage = currentPage;
            return;
          }
        }
      };
    },
    handleNextPage() {
      if (this.indexPage < this.totalPage) {
        this.indexPage++;
      }
    },
    handlePreviousPage() {
      if (this.indexPage > 1) {
        this.indexPage--;
      }
    },

    chooseAreaItem(val) {
      this.$emit('chooseItem', val);
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.index-bar-container {
  width: 400px;
  padding: 0px 0 0 10px;
  // border: 1px #f1f1f1 solid;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  background: #fafbfe;
  line-height: 36px;
  z-index: 9;
}
.index-bar-content {
  position: relative;
  width: 400px;
  height: 435px;

  .no-data {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    color: #666;
  }

  :deep .el-scrollbar__wrap {
    background: white;
    overflow-x: hidden;
    .el-scrollbar__view {
      padding: 0 20px;
    }
  }
  .main-list {
    height: 100%;
    padding-top: 10px;
    .title-key {
      padding-left: 10px;
      font-size: 13px;
      font-weight: bold;
      color: #999;
    }
    .content-container {
      // display: flex;
      // flex-wrap: wrap;
      .content-item {
        cursor: pointer;
        min-height: 20px;
        margin-right: 16px;
        margin-bottom: 12px;
        font-size: 12px;
        display: flex;
        align-items: center;
        color: #333;
        &:hover {
          color: dodgerblue;
        }
        .text-content {
          padding-left: 10px;
          width: 60px;
        }
        .area-content {
          width: calc(100% - 60px);
          word-break: break-all;
          line-height: 16px;
          padding-right: 5px;
          box-sizing: border-box;
        }
      }
      .active-item {
        color: dodgerblue;
      }
    }
  }
}
.el-popover {
  padding: 0;
}
.char-list {
  z-index: 99;
  width: 24px;
  height: 100%;
  background: #fafbfe;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  display: flex;
  flex-direction: column;
  text-align: center;
  li {
    height: 19px;
    display: inline;
    cursor: pointer;
    font-size: 13px;
    color: #999;
    &:hover {
      color: #fd4378;
      font-weight: 550;
    }
  }
  .active {
    color: #fd4378;
    font-weight: 550;
  }
}
</style>
  