<template>
  <div class="noalphabetically">
    <div class="title">
      <cr-icon type="arrow-left" color="#C8C9CC" size="22px" @click.native="back" />
      <div class="text">{{ title }}</div>
      <div class="rightBtn" @click.stop="confirm">{{ rightBtn }}</div>
    </div>
    <div ref="content" class="content" @scroll="calcSelectIndex">
      <div class="group">
        <div
          v-for="(item, key) in sortData"
          :key="`item-${key}`"
          class="group-item"
          :class="{
            select: categorySelect.valueId == item.valueId
          }"
          @click.stop="clickCategoryItem(item)"
        >
          <cr-icon type="success" size="14px" />
          {{ item.showName }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { EventBus } from '@/service/utils.service';
const CLEAR_Category_SELECT_LIST = 'clearcategorySelect';
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    rightBtn: {
      type: String,
      default: ''
    },
    sortData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      selectIndex: '',
      categorySelect: {}
    };
  },
  beforeDestroy() {
    EventBus.$off(CLEAR_Category_SELECT_LIST);
  },
  created() {
    EventBus.$on(CLEAR_Category_SELECT_LIST, () => {
      this.categorySelect = {};
    });
  },
  methods: {
    clickCategoryItem(item) {
      // 选择分类
      console.log(item);
      this.categorySelect = item;
    },
    confirm() {
      EventBus.$emit('selectCategoryBySortList', Object.assign({}, this.categorySelect));
      this.back();
    },
    clear() {
      this.categorySelect = {};
    },
    back() {
      this.$emit('back');
      this.$refs.content.scrollTop = 0;
    },
    jumpTo(index) {
      this.selectIndex = index;
      this.$refs.content.scrollTop = this.$refs[`item-${index}`][0].offsetTop;
    },
    calcSelectIndex(e) {
      const offsetTopMap = {};
      const indexMap = {};
      const numArr = [];
      for (let i = 0; i < this.letters.length; i++) {
        offsetTopMap[this.letters[i]] = this.$refs[`item-${this.letters[i]}`][0].offsetTop;
        numArr.push(this.$refs[`item-${this.letters[i]}`][0].offsetTop);
        indexMap[i] = this.letters[i];
      }
      const targetIndex = this.findCloseNum(numArr, e.target.scrollTop, indexMap);
      this.selectIndex = targetIndex;
    },
    findCloseNum(arr, num, indexMap) {
      let index = 0; // 保存最接近数值在数组中的索引
      let value = Number.MAX_VALUE; // 保存差值绝对值，默认为最大数值
      for (let i = 0; i < arr.length; i++) {
        let newValue = Math.abs(arr[i] - num); // 新差值
        if (newValue <= value) {
          // 如果新差值绝对值小于等于旧差值绝对值，保存新差值绝对值和索引
          if (newValue === value && arr[i] < arr[index]) {
            // 如果数组中两个数值跟目标数值差值一样，取大
            continue;
          }
          index = i;
          value = newValue;
        }
      }
      return indexMap[index]; // 返回最接近的数值
    }
  }
};
</script>
<style lang="less" scoped>
.noalphabetically {
  width: 100%;
  height: 100%;
  padding: 0 20px 0 16px;
  box-sizing: border-box;
  // position: relative;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    .text {
      font-size: 16px;
      color: @black;
      font-weight: bold;
    }
    .rightBtn {
      font-size: 14px;
      color: @black;
    }
  }
  .content {
    height: calc(100% - 30px);
    overflow-y: auto;
    overflow-x: hidden;
    background: @white;
    position: relative;
    .group-item {
      font-size: 12px;
      color: @black;
      margin-top: @padding-lg;
      user-select: none;
      padding: 0 20px 0 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      /deep/ .cr-icon {
        display: none;
        margin-right: 4px;
      }
      &.select {
        font-weight: bold;
        /deep/ .cr-icon {
          display: inline-block;
          font-weight: normal;
          color: @red;
        }
      }
      a {
        visibility: hidden;
      }
    }
  }
}
</style>
