// components/Dialog/dialog.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
    isShowIndicator: {  //是否展示返回顶部按钮
      type: Boolean,
      value: false,
      observer: "_indicatorChange"
    },

    isShowShopCart: { //是否展示购物车
      type: Boolean,
      value: true
    },

    marginBottom: {   //底部边距
      type: Number,
      value: 100
    },

    isShowMenu: { 
      type: Boolean,
      value: true
    }
  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  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;
      }
      var time = 150;
      if(this.data.isExpand){
        this.takeback(time);
      }else {
        this.popout(time);
      }

      this.setData({
        isAnimation: true
      });

      var delayTime = this.properties.isShowShopCart ? time*3 : time*2;
      setTimeout(function () {
        this.setData({
          isAnimation: false
        })
      }.bind(this), delayTime);


      this.setData({
        isExpand: !this.data.isExpand,
      })
    },

    _indicatorChange: function(newVal, oldVal) {
      var animtionIndicator = wx.createAnimation({
        duration: 300,
        timingFunction: 'linear',
      });
      
      var animtionMenu = wx.createAnimation({
        duration: 300,
        timingFunction: 'linear',
      });

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

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

    // 动画
    popout(time) {
      var animtionHome = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out' 
      });
      var animationSearch = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out' 
      });
      var animationShopcart = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out' 
      });
      if (this.properties.isShowShopCart){
        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) {
      var animtionHome = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });
      var animationSearch = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });
      var animationShopcart = wx.createAnimation({
        duration: time,
        timingFunction: 'ease-in-out'
      });

      if (this.properties.isShowShopCart) {
        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() {
      wx.navigateTo({
        url: '/pages/product/search/search',
      })
    },

    jumpToShopCart() {
      wx.switchTab({
        url: '/pages/shopCart/shopCart',
      })
    },

    backToTop() {
      this.triggerEvent("backToTop");
    }
  }
})