<template>
  <div class="wrap" :style="wrapperStyle" @appear="appeared" @disappear="disappeared">
    <div ref="anim" class="anim">
      <!--116015 lc-marquee跑马灯组件添加点击事件-->
        <div v-for="(item,i) in list" class="row" :key="i" @click="marqueeClick(i)"
          :style="{
            paddingTop: height * 0.5,
            paddingBottom: height * 0.5,
            overflow: 'hidden', }">
          <image class="image" :src="item.icon" v-if="item.icon != '' && item.icon != null"></image>
          <text :style="textStyle">{{item.text}}</text>
        </div>
    </div>
  </div>
</template>

<style scoped>
  .wrap {
    overflow: hidden;
    position: relative;
    height: 48px;
  }
  .anim {
    flex-direction: column;
    position: absolute;
    transform: translateY(0) translateZ(0);
  }
  .row{
    height: 48px;
    flex-direction: row;
    align-items: center;
  }
  .image{
    width: 24px;
    height: 24px;
    margin-left: 20px;
    margin-right: 16px;
  }
</style>

<script>
  var animation = weex.requireModule('animation')

  module.exports = {
    data() {
      return {
        timeout: {}
      }
    },
    props: {
      list: { type: Array},
      index: { default: 1 },
      duration: { default: 1000 },
      interval: { default: 2000 },
      outofview: { default: false },
      wrapperStyle: {
          type: Object,
          default: () => ({
            height: 48,
            backgroundColor: 'rgba(229,98,80,0.10)',
            borderRadius: 8,
            paddingLeft: 10,
            paddingRight: 10
          })         
      },
      textStyle: {
          type: Object,
          default: () => ({
            height: "24px",
            color: "#DE3B24",
            fontSize: "24px",
            lineHeight: "24px"
          })  
      }
    },
    created: function () {
      console.log(this.list);
      if(this.list.length == 1 || this.list.length== 0){
        return;
      }
      if (this.interval > 0 && this.step > 0 && this.duration > 0) {
         this.timeout = this.run()
      }
      this._index = this.index;
    },
    data(){
      return {
        height: 24,
        _index: 1,
        // 131271 lighting-ui跑马灯组件在prop属性上使用了计算属性，导致控制台报错
        autoview:false
      }
    },
    computed: {
      step(){
        return this.height * 2;
      }
    },
    methods: {
      run: function () {
        if (this.autoview) {
          return setTimeout(this.run.bind(this), this.interval)
        } else {
          return setTimeout(function () {
            this.animation(this.run.bind(this))
          }.bind(this), this.interval)
        }
      },
      animation: function (cb) {
        var offset = -this.step * this._index;
        //131271 lighting-ui跑马灯组件在prop属性上使用了计算属性，导致控制台报错
        if(!this.$refs.anim) return;
        animation.transition(this.$refs.anim, {
          styles: {
            transform: 'translateY(' + offset + 'px) translateZ(0)'
          },
          timingFunction: 'ease',
          duration: this.duration
        }, function () {
          this._index = (this._index + 1) % (this.list.length);
          this.$emit('marqueeChange', {
            index: this._index,
            count: this.list.length
          });
          cb && cb();
        }.bind(this));
      },
      //131271 lighting-ui跑马灯组件在prop属性上使用了计算属性，导致控制台报错
      appeared: function() {
        this.autoview = false
      },
      disappeared: function() {
        this.autoview = true
      },
      //116015 lc-marquee跑马灯组件添加点击事件
      marqueeClick(i){
        this.$emit('marqueeClick',i)
      }
    },
    watch: {
      outofview (val) {
        this.autoview = val
      },
      
      list (val) {
        if (this.timeout) {
          // clearTimeout(this.timeout)
        }
        this.list = val;
        console.log(this.list);
        if(this.list.length == 1 || this.list.length== 0){
          return;
        }
        if (this.interval > 0 && this.step > 0 && this.duration > 0) {
          // this.timeout = this.run()
        }
        this._index = this.index;
      }
    }
  }
</script>
