const router = global.router;

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

  /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
  properties: {
    show: {
      type: Boolean,
      value: true
    },
    showBackTop: {
      type: Boolean,
      value: false,
      observer: '_showBackTop'
    },
    showCart: {
      type: Boolean,
      value: false
    },
    marginBottom: {
      type: Number,
      value: 100
    },
    showMenu: {
      type: Boolean,
      value: false
    }
  },

  /**
     * 私有数据,组件的初始数据
     * 可用于模版渲染
     */
  data: {
    // 弹窗显示控制
    isShow: true,
    isExpand: false,
    menuOpacity: 0,
    homeAnimation: {},
    shopcartAnimation: {},
    searchAnimation: {},
    indicatorAnimation: {},
    menuAnimation: {},
    isAnimation: false,
  },

  /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
  methods: {
    /*
         * 公有方法
         */
    hide() { // 隐藏
      this.setData({isShow: !this.data.isShow});
    },
    show() { // 展示
      this.setData({isShow: !this.data.isShow});
    },
    switchMenu() {
      if (this.data.isAnimation) {
        return;
      }

      let time = 150;

      if (this.data.isExpand) {
        this.takeback(time);
      } else {
        this.popout(time);
      }

      this.setData({
        isAnimation: true
      });

      let delayTime = this.properties.showCart ? time * 3 : time * 2;

      setTimeout(function() {
        this.setData({
          isAnimation: false
        });
      }.bind(this), delayTime);

      this.setData({
        isExpand: !this.data.isExpand,
      });
    },
    _showBackTop: function(newVal) {
      let animtionIndicator = wx.createAnimation({
        duration: 300,
        timingFunction: 'linear',
      });

      let animtionMenu = wx.createAnimation({
        duration: 300,
        timingFunction: 'linear',
      });

      if (newVal) {
        animtionIndicator.opacity(1).scale(1).step();
        animtionMenu.translateY(-49).step();
      } else {
        animtionIndicator.opacity(0).scale(0).step();
        animtionMenu.translateY(0).step();
      }

      this.setData({
        indicatorAnimation: animtionIndicator.export(),
        menuAnimation: animtionMenu.export()
      });
    },

    // 动画
    popout(time) {
      let animtionHome = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });
      let animationSearch = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });
      let animationShopcart = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });

      if (this.properties.showCart) {
        animationShopcart.opacity(1).translateY(-49).step();
        animationSearch.opacity(1).translateY(-49 * 2).step({duration: time * 2});
        animtionHome.opacity(1).translateY(-49 * 3).step({duration: time * 3});
        this.setData({
          shopcartAnimation: animationShopcart.export(),
          searchAnimation: animationSearch.export(),
          homeAnimation: animtionHome.export()
        });
      } else {
        animationSearch.opacity(1).translateY(-49).step();
        animtionHome.opacity(1).translateY(-49 * 2).step({duration: time * 2});
        this.setData({
          searchAnimation: animationSearch.export(),
          homeAnimation: animtionHome.export()
        });
      }
    },

    takeback(time) {
      let animtionHome = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });
      let animationSearch = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });
      let animationShopcart = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });

      if (this.properties.showCart) {
        animtionHome.opacity(0).translateY(0).step();
        animationSearch.opacity(0).translateY(0).step();
        animationShopcart.opacity(0).translateY(0).step();
        this.setData({
          homeAnimation: animtionHome.export({ duration: time * 3 })
        });
        setTimeout(function() {
          animationSearch.opacity(0).translateY(0).step({ duration: time * 2 });
          this.setData({
            searchAnimation: animationSearch.export()
          });
        }.bind(this), time);

        setTimeout(function() {
          animationShopcart.opacity(0).translateY(0).step({ duration: time });
          this.setData({
            shopcartAnimation: animationShopcart.export()
          });
        }.bind(this), time * 2);
      } else {
        animtionHome.opacity(0).translateY(0).step();
        animationSearch.opacity(0).translateY(0).step();
        this.setData({
          homeAnimation: animtionHome.export({ duration: time * 2 })
        });
        setTimeout(function() {
          animationSearch.opacity(0).translateY(0).step({ duration: time });
          this.setData({
            searchAnimation: animationSearch.export()
          });
        }.bind(this), time);
      }
    },
    jumpToHome() {
      wx.switchTab({
        url: '/pages/index/index',
      });
    },
    jumpToSearch() {
      router.go('productSearch');
    },
    jumpToShopCart() {
    },
    backToTop() {
      this.triggerEvent('backtop');
    }
  }
});