<template>
    <div class="wrap" :style="wrapStyle">
        <div class="select-area" v-if="isShowIndicator" :style="indicatorStyle"></div>
        <scroller @touchstart="handleStart" @touchend="handleEnd" ref="scroller" class="scroller" :style="scrollerStyle" append="tree" offset-accuracy="10" :show-scrollbar="false" @scroll="scroll">
            <div v-for="(item, index) in calcListArray" :key="index" ref="item">
                <text class="list-item" :style="itemStyle" v-bind:class="item['classes']" :ref="item['refs']" >{{item.value}}</text>
            </div>
        </scroller>
        <text class="item-label" v-if="label" :style="labelStyle">{{label}}</text>
    </div>
</template>
<script>
const dom = weex.requireModule('dom');
const animation = weex.requireModule('animation')
import { Core } from '../../index';

export default {
  props: {
    listArray: {
      type: Array,
      default: function () {
        return [];
      }
    },
    itemIndex: {
      type: Number,
      default: null
    },
    wrapHeight: {
      type: Number,
      default: 408
    },
    wrapWidth: {
      type: Number,
      default: 710
    },
    isShowIndicator: {
      type: Boolean,
      default: true
    },
    label: {
      type: String,
      default: ''
    },
    raduisType:{
      type: String,
      default: 'all'
    },
    labelOffset: {
      type: Number,
      default: null
    },
    align: {
      type: String,
      default: 'center' // 'center'/'left'
    }
  },
  data() {
    return {
      isInit: false,
      itemHeight: 81,
      index: this.itemIndex,
      handler: null,
      intervalHandler: null
    };
  },

  computed: {
    wrapStyle() {
      return {
        // width: this.wrapWidth,
        height: this.wrapHeight
      };
    },
    selectedItemTop() {
      return Math.floor((this.wrapHeight / this.itemHeight) / 2) * this.itemHeight;
    },

    indicatorStyle() {
      const { raduisType } = this
      let indicatorStyle = {
        top: this.selectedItemTop + 'px',
        width: this.wrapWidth,
        height: this.itemHeight + 2
      };
      let selectAreaRadius={}
      if (raduisType == 'all') { 
        selectAreaRadius = {borderRadius:'16px'}
      }else if (raduisType=='mid') {
        selectAreaRadius = {
          borderRadius:0
        }
      } else if(raduisType=='left'){
        selectAreaRadius = {
          borderTopLeftRadius: '16px',
          borderBottomLeftRadius: '16px'
        }
      }else{
        selectAreaRadius = {
          borderTopRightRadius: '16px',
          borderBottomRightRadius: '16px'
        }
      }
      return {...selectAreaRadius, ...indicatorStyle}
    },
    labelStyle() {
      return {
        top: this.selectedItemTop + 'px',
        left: this.labelOffset ? this.labelOffset : ((this.wrapWidth / 2) + 50),
        width: this.wrapWidth / 2,
        height: this.itemHeight
      };
    },
    scrollerStyle() {
      return {
        width: this.wrapWidth,
        height: this.wrapHeight
      };
    },
    itemStyle() {
      return {
        // width: this.wrapWidth
      };
    },

    calcListArray() {
      let result = [];
      result = this.listArray.map((item, index) => {
        item['classes'] = [];
        item['refs'] = [];    // add by lau
        if (this.align == 'left' && this.label) {
          item['classes'].push('list-item-left');
        }
        // 添加类设置外边距以解决首尾两项选中时的位置偏移，style
        if (index == 0) {
          item['classes'].push('first-item');
        } else if (index == this.listArray.length - 1) {
          item['classes'].push('last-item');
        }

        if (index == this.itemIndex - 2) {
          item['classes'].push('first-visible-item');
          item['refs'].push('first-visible-item');
        } else if (index == this.itemIndex - 1) {
          item['classes'].push('second-visible-item');
        } else if (index == this.itemIndex) {
          item['classes'].push('selected-item');
        } else if (index == this.itemIndex + 1) {
          item['classes'].push('second-last-visible-item');
        } else if (index == this.itemIndex + 2) {
          item['classes'].push('first-last-visible-item');
          item['refs'].push('first-last-visible-item');
        }
        return item;
      });
      return result;
    }
  },
  
  watch: {
    itemIndex(value) {
      this.index = value;
    }
  },
  methods: {
    scroll(event) {
      if (!this.isInit) return;
      // 计算当前滚动到的下标,  滚动距离/item高度
      this.itemIndex = Math.abs(Math.round((event.contentOffset.y || 0) / this.itemHeight));
      // Core.toast(event.contentOffset.y)
      if (weex.config.env.platform == 'android') {
        if (this.handler) {
          clearTimeout(this.handler);
        }
        this.handler = setTimeout(() => {
          this.handleEnd(event);
        }, 500);
      }
    },
    handleEnd(e) {
      if (!this.isInit) return;
      // 计算当前滚动到的下标
      setTimeout(() => {
        this.scrollToIndexItem(this.itemIndex);
        this.$emit('onChange', this.listArray[this.itemIndex]);
      }, 400);
    },

    // 滚动到item下标所在的位置
    scrollToIndexItem(index, animated = true) {
      const el = this.$refs.item[index];
      if (el) {
        dom.getComponentRect(el, (options) => {
          if (options.result && options.size.bottom) {
            dom.scrollToElement(el, { animated: animated, offset: index == 0 ? 0 : (-this.selectedItemTop) });
            this.isInit = true;
          } else {
            setTimeout(() => this.scrollToIndexItem(index, animated), 100);
          }
        });
      }
    },

    // 特效处理 => css
    modifyItemStyle(index){
      var el = this.$refs['first-visible-item']
      animation.transition(el, {
        styles: {
          transform: 'rotateX(60deg)',
          perspective:100,
          transformOrigin: 'center center'
        },
        duration: 10, //ms
        timingFunction: 'ease',
        needLayout:false,
        delay: 0 //ms
        }, function () {})
    }
  },
  mounted() {
    if (this.itemIndex != null) {
      this.scrollToIndexItem(this.itemIndex, false);
    }
  }
};
</script>

<style>
.wrap {
  position: relative;
  flex-direction: row;
  background-color: #ffffff;
}
.scroller {
    flex: 1;
    align-content: center;
    align-items: center;
    background-color: transparent;
    overflow: hidden;
}
.item-label {
    position: absolute;
    height: 81px;
    line-height: 81px;
    font-family: PingFangSC-Regular;
    /* opacity: 0.6; */
    font-size: 28px;
    color: #8E969B;
    text-align: left;
}
.list-item {
    height: 81px;
    line-height: 81px;
    font-family: PingFangSC-Regular;
    opacity: 0.3;
    font-size: 36px;
    color: #1E2E37;
    text-align: center;
}
.list-item-left {
    text-align: left;
}
.first-item {
    margin-top: 162px;
}
.last-item {
    margin-bottom: 162px;
}
.first-visible-item {
    opacity: 0.15;
    font-size: 34px;
    background-color: #ffffff;
    transform: rotateX(60deg);
}
.second-visible-item {
    opacity: 0.3;
    font-size: 34px;
    background-color: #ffffff;
    transform: rotateX(0deg);
}
.second-last-visible-item {
    opacity: 0.3;
    font-size: 34px;
    background-color: #ffffff;
    transform: rotateX(0deg);
}
.first-last-visible-item {
    opacity: 0.15;
    font-size: 34px;
    background-color: #ffffff;
    transform: rotateX(-60deg);
}
.selected-item {
    opacity: 1;
    color: #1E2E37;
    font-size: 36px;
}
.select-area {
    position: absolute;
    left: 0px;
    background-color: #EEEEEE;
    /* border-radius: 16px; */
}
</style>
