// packageH/deposit_group/component/progress/progress.js
Component({
  properties: {
    //设置当前完成步数
    steps: {
      type: Number,
      value: 0
    },
    stepsList: {
      type: Array,
    }
  },

  data: {
    percent: 50, // 进度条基础百分之五十
    number: -1,
    progressList: [],
    bubbleList: []
  },
  lifetimes: {
    attached () {
      this.randomColor();
      this.timerAni();
      let background = wx.getStorageSync('backgroundRGB');
      if (!background) {
        background = [254, 196, 0];
      }
      this.setData({
        backgroundRGB: background
      });
    }
  },
  pageLifetimes: {
    show () {
      this.timerAni();
    },
    hide () {
      clearInterval(this.timer);
    }
  },
  observers: {
    'stepsList': function (newVal) {
      this.setProgress();
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    setProgress () {
      let arr = this.data.stepsList;
      let reStepsList = [];
      let reSteps = 0;
      if (arr.length <= 2) {
        this.setData({
          percent: 100
        });
      } else {
        this.setData({
          percent: 50
        });
      }
      if (arr.length <= 3) {
        reStepsList = arr;
        reSteps = this.data.steps;
      } else if ((this.data.steps < arr.length - 1) && this.data.steps == 0) {
        reStepsList.push(arr[0],  arr[0 + 1], arr[arr.length - 1]);
      } else if ((this.data.steps < arr.length - 1) && this.data.steps > 0){
        reStepsList.push(arr[0], arr[this.data.steps], arr[arr.length - 1]);
        reSteps = 1;
      } else {
        reStepsList.push(arr[0], arr[Math.round(arr.length / 2)], arr[arr.length - 1]);
        reSteps = 2;
      }
      this.setData({
        steps: reSteps,
        progressList: reStepsList
      });
    },
    
    // 冒泡动画
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10);
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      default:
        return 0;
      }
    },
    randomColor () {
      var color="#";
      for(var i=0;i<6;i++){
        color += (Math.random()*16 | 0).toString(16);
      }
      return {color,};
    },


    timerAni () {
      for(var i = 0; i < 8; i++){
        let color = this.randomColor();
        this.setData({
          [`bubbleList[${i}]`]: color
        });
        this.data.bubbleList.push(color);
      }
      this.timer = setInterval(() => {
        this.translate();
      }, 1500);
    },

    translate() {
      let randomNumX = this.randomNum(-20, 20);
      this.setData({
        number: this.data.number + 1
      }, () => {
        if (this.data.number > 7) {
          this.setData({
            number: -1
          });
        }
      });
      // .active 是选择器
      this.animate('.active', [{
        opacity: 1,
        translateY: 0,
      },
      {
        opacity: 1,
        translate:[randomNumX, this.randomNum(-5, -20)]
      },
      {
      // opacity: 0,
        translate: [randomNumX, -200]
      },
      ], 1500, function () {
      //动画完成后的回调函数
      }.bind(this));
    },
  }
});