<template>
  <view id="list" ref="list" class="uni-indexed-list">
    <!-- #ifdef APP-NVUE -->
    <!-- 1144 -->
    <list
      class="uni-indexed-list__scroll"
      scrollable="true"
      show-scrollbar="false">
      <cell
        v-for="(list, idx) in lists"
        :key="idx" 
        :ref="'uni-indexed-list-' + idx">
        <slot :scope-data="list" :loaded="loaded" />
      </cell>
    </list>
    <!-- #endif -->
		
    <!-- #ifndef APP-NVUE -->
    <scroll-view
      :scroll-into-view="scrollViewId"
      class="uni-indexed-list__scroll"
      scroll-y>
      <view 
        v-for="(list, idx) in lists"
        :id="'uni-indexed-list-' + idx"
        :key="idx">				
        <slot :scope-data="list" :loaded="loaded" />
      </view>
    </scroll-view>
    <!-- #endif -->
		
    <view 
      :class="touchmove ? 'uni-indexed-list__menu--active' : ''"
      class="uni-indexed-list__menu"
      @touchstart="touchStart"
      @touchmove.stop.prevent="touchMove"
      @touchend="touchEnd">
      <view
        v-for="(list, key) in lists"
        :id="key"
        :key="key"
        :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''"
        class="uni-indexed-list__menu-item">
        {{ list.key }}
      </view>
    </view>
    <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
      <text class="uni-indexed-list__alert">
        {{ lists[touchmoveIndex].key }}
      </text>
    </view>
  </view>
</template>
<script>	
	// #ifdef APP-NVUE
  const dom = weex.requireModule('dom');
  // #endif
	
  // #ifdef APP-PLUS
  function throttle(func, delay) {
    var prev = Date.now();
    return function() {
      var context = this;
      var args = arguments;
      var now = Date.now();
      if (now - prev >= delay) {
        func.apply(context, args);
        prev = Date.now();
      }
    }
  }

  function touchMove(e) {
    let index = Number(e.target.id)
    if (!isNaN(index)) {
      if (this.touchmoveIndex === index) {
        return false
      }
      let item = this.lists[index]
      if (item) {
        // #ifndef APP-NVUE
        this.scrollViewId = 'uni-indexed-list-' + index
        this.touchmoveIndex = index
        // #endif
        // #ifdef APP-NVUE
        dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
          animated: false
        })
        this.touchmoveIndex = index
        // #endif
      }
    }
  }
  const throttleTouchMove = throttle(touchMove, 40)
  // #endif

  /**
   * IndexedList 索引列表
   * ------ 已经基于原版重新改造 ---------
   * @description 用于展示索引列表
   * @tutorial https://ext.dcloud.net.cn/plugin?id=375
   * @property {Object} options 索引列表需要的数据对象
   * @example <uni-indexed-list options=""></uni-indexed-list>
   */
  export default {
    name: 'UniIndexedList',
    props: {
      options: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        lists: [],
        winHeight: 0,
        itemHeight: 0,
        winOffsetY: 0,
        touchmove: false,
        touchmoveIndex: -1,
        scrollViewId: '',
        touchmoveTimeout: '',
        loaded: false
      }
    },
    watch: {
      options: {
        handler: function() {
          this.setList()
        },
        deep: true
      }
    },
    mounted() {
      setTimeout(() => {
        this.setList()
      }, 50)
      setTimeout(() => {
        this.loaded = true
      }, 300);
    },
    methods: {
      setList() {
        let index = 0;
        this.lists = []
        this.options.forEach((value, index) => {
          if (value.data.length === 0) {
            return
          }
          let indexBefore = index
          let items = value.data.map(item => {
            let obj = {}
            obj['key'] = value.letter
            obj['name'] = item
            obj['itemIndex'] = index
            index++
            obj.checked = item.checked ? item.checked : false
            return obj
          })
          this.lists.push({
            title: value.letter,
            key: value.letter,
            items: items,
            itemIndex: indexBefore
          })
        })
      },
			
      touchStart(e) {
        this.touchmove = true
        let index = Number(e.target.id)
        if (!isNaN(index)) {
          let item = this.lists[index]
          if (item) {
            this.scrollViewId = 'uni-indexed-list-' + index
            this.touchmoveIndex = index
            // #ifdef APP-NVUE
            dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
              animated: false
            })
            // #endif
          }
        }
      },
      touchMove(e) {
        // #ifndef APP-PLUS
        let index = Number(e.target.id)
        if (!isNaN(index)) {
          if (this.touchmoveIndex === index) {
            return false
          }
          let item = this.lists[index]
          if (item) {
            this.scrollViewId = 'uni-indexed-list-' + index
            this.touchmoveIndex = index
          }
        }
        // #endif
        // #ifdef APP-PLUS
        throttleTouchMove.call(this, e)
        // #endif
      },
			
      touchEnd(e) {
        this.touchmove = false
        this.touchmoveIndex = -1
      }
    }
  }
</script>
<style lang="scss" scoped>
	.uni-indexed-list {
		position: relative;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-indexed-list__scroll {
		flex: 1;
	}

	.uni-indexed-list__menu {
		position: absolute;
		top: 0;
		right: 0;
		width: 24px;
		height: 100%;
		
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		will-change: background-color;
		transition: background-color ease-in 0.3s;
	}

	.uni-indexed-list__menu-item {
		width: 100%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		line-height: 20px;
		font-size: 12px;
		text-align: center;
		color: #666;
	}

	.uni-indexed-list__menu-text {
	}

	.uni-indexed-list__menu--active {
		background-color: rgb(239, 239, 239);
	}

	.uni-indexed-list__menu-text--active {
		color: #007aff;
	}

	.uni-indexed-list__alert-wrapper {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.uni-indexed-list__alert {
		width: 80px;
		height: 80px;
		border-radius: 80px;
		text-align: center;
		line-height: 80px;
		font-size: 35px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
