// components/swipeButton/index.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    loading:{
      type:Boolean,
      value:false
    },
    buttonText:{
      type:String,
      value:'我要接单'
    },
    buttonLoadingText:{
      type:String,
      value:'接单中'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    moveEvent:null,
    moveAreaWidth:0,
    moveViewWidth:92,


    textOpacity:1,
    textRight:80,
    moveViewX:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    buttonOnMove(event){
      this.data.moveEvent = event;
      if(!this.data.moveAreaWidth){
        this.createSelectorQuery().select('#moveArea'+index).boundingClientRect((res)=>{
          this.data.moveAreaWidth = res.width;
        }).exec();
      }
      let x = this.data.moveEvent.detail.x;
      let opacity = 1 - x/(this.data.moveAreaWidth - this.data.moveViewWidth);
      let right = opacity*80;
      this.setData({
        textOpacity:opacity,
        textRight:right
      })
    },
    buttonMoveCancel(event){
      const x = this.data.moveEvent.detail.x;
      //给 10 像素边界
      //moveAreaWidth - this.data.moveViewWidth - 10 <= x
      let viewX = 0,loading = false;
      if((this.data.moveAreaWidth - this.data.moveViewWidth)/3*2 < x){
        viewX = this.data.moveAreaWidth - this.data.moveViewWidth;
        loading = true;
      }
      this.setData({
        moveViewX:viewX,
        loading:loading
      });
      if(loading){
        this.triggerEvent('done');
      }
    }
  },

  lifetimes:{
    attached(){
      this.createSelectorQuery().select('#moveArea').boundingClientRect((res)=>{
        this.data.moveAreaWidth = res.width;
      }).exec();
    }
  },
  observers:{
    "loading"(l){
      if(!l){
        this.setData({
          moveViewX:0,
        });
      }
    }
  }
})