<style lang="less">
.slider-panel-v2 {
  position: absolute;
  left: 0;
  right: 0;
  padding-top: 30rpx;
  bottom: 0;
  text-align: center;
  background: #f8f8f9;
  border-radius: 32rpx 32rpx 0 0;
  box-shadow: 0px 0px 4px rgba(1, 1, 51, 0.04),
    0px 0px 40px rgba(1, 1, 51, 0.12);
  box-sizing: border-box;
}

.slider-panel-v2 .bar {
  width: 88rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}
</style>

<template>
  <view
    class="slider-panel-v2"
    data-source="slider"
    style="{{'height: '+expandPanelHeight+'rpx;'+ (translateY!==0?'transform:translateY('+translateY+'rpx)':'')}}"
    v-on:touchstart="panelTouchStart"
    v-on:touchmove="panelTouchMove"
    v-on:touchend="panelTouchEnd"
  >
    <view class="bar" v-if="hasTopBar"></view>
    <view class="content-container">
      <slot></slot>
    </view>
  </view>
</template>

<script>
import wepy from '@wepy/core';

// 注意单位都是rpx
// 在收缩/伸展两状态之间切换时至少要滑动的距离
const downTouchSensitivity = 320 * 2;
const upTouchSensitivity = 120 * 2;
let pageTouchStartY = 0;
let touchLength;
// 收缩状态下的卡片的TranslateY
let diffPanelHeight = 0;
let screenInfo = {};
const standHeight = 667;
const shieldHeight = 30; //屏蔽底部30以内面板不滑动，防止全面屏手势导致界面异常

wepy.component({
  props: {
    foldStatus: {
      type: String,
      default: 'fold'
    },
    // 伸展状态下的面板高度
    expandPanelHeight: {
      type: Number,
      default: 399 * 2
    },
    // 收缩状态下的面板高度
    foldPanelHeight: {
      type: Number,
      default: 88 * 2
    },
    isInCustomTopbar: {
      type: Boolean,
      default: false
    },
    canSlide: {
      type: Boolean,
      default: true
    },
    hasTopBar: {
      type: Boolean,
      default: false
    }
  },
  data: {
    translateY: 399*2
  },
  ready() {
    diffPanelHeight = this.expandPanelHeight - this.foldPanelHeight;
    if (this.foldStatus == 'fold') {
      this.translateY = diffPanelHeight;
    } else if (this.foldStatus == 'expand') {
      this.translateY = 0;
    }
  },
  watch: {
    foldStatus: function(newFoldStatus, oldFoldStatus) {
      if (
        oldFoldStatus !== newFoldStatus &&
        (this.translateY == 0 || this.translateY == diffPanelHeight)
      ) {
        if (newFoldStatus === 'fold') {
          this.translateY = diffPanelHeight;
        } else {
          this.translateY = 0;
        }
      }
    }
  },
  methods: {
    getScreenInfo() {
      if (screenInfo && screenInfo.screenWidth && screenInfo.screenHeight) {
        return Promise.resolve(screenInfo);
      }
      return new Promise((resolve, reject) => {
        wx.getSystemInfo({
          success: res => {
            screenInfo.screenHeight = res.screenHeight;
            screenInfo.screenWidth = res.screenWidth;
            resolve({
              screenWidth: res.screenWidth,
              screenHeight: res.screenHeight
            });
          }
        });
      });
    },
    juchageConmove(e) {
      //从长按按钮冒泡上来的
      //   if (e.target.source && e.target.source.indexOf('btn') !== -1) {
      //     return false;
      //   } else {
      //     return true;
      //   }
      return this.canSlide;
    },
    startNotFromBottom(pageStartY) {
      return this.getScreenInfo().then(res => {
        let fullHeight = res.screenHeight;
        let bottomY = fullHeight; //获取屏幕高度
        if (!this.isInCustomTopbar) {
          bottomY = bottomY - 72; //不是自定义高度，判断的时候，pageStartY 范围在screenHeight-72（默认导航栏高度） 到0区间
        }
        if (
          pageStartY <
          bottomY - Number((fullHeight / standHeight) * shieldHeight)
        ) {
          return Promise.resolve();
        } else {
          return Promise.reject();
        }
      });
    },
    panelTouchStart(e) {
      if (!this.juchageConmove(e)) {
        return;
      }
      try {
        let touchY = Number(e.touches[0].pageY); //获取第一个触点
        this.startNotFromBottom(touchY).then(() => {
          //记录触点初始位置
          pageTouchStartY = touchY; //页面触点Y坐标
        });
      } catch (err) {
        console.log(err.message);
      }
    },
    panelTouchMove(e) {
      //   console.log('move control panel', e);
      if (!this.juchageConmove(e)) {
        return;
      }
      if (!pageTouchStartY) {
        return;
      }

      try {
        let touch = e.touches[0], //获取第一个触点
          y = Number(touch.pageY); //页面触点Y坐标
        touchLength = parseInt(y - pageTouchStartY);
        pageTouchStartY = y;
        let newTranslateY = touchLength * 2 + this.translateY;
        if (touchLength == 0) {
          //在停止中不计算并且不做任何处理
          return;
        }
        if (newTranslateY > 0 && newTranslateY < diffPanelHeight) {
          this.translateY = newTranslateY;
        }

        if (newTranslateY > diffPanelHeight) {
          this.foldPanel();
        }

        if (touchLength < 0 || newTranslateY < 0) {
          this.expandPanel();
        }
      } catch (err) {
        console.log(err.message);
      }
    },
    panelTouchEnd(e) {
      if (!pageTouchStartY) {
        return;
      }
      if (touchLength > 0) {
        //下滑到一定距离松手就可以折叠，不够保持展开原装,同时设置位置
        if (this.translateY >= this.expandPanelHeight - downTouchSensitivity) {
          this.foldPanel();
          this.translateY = diffPanelHeight;
        } else {
          this.translateY = 0;
        }
      } else {
        //上滑到一定距离就松手就展开了，不够才折叠，因为一旦上滑就展开，但是偏移量不对，故再次甚至
        if (this.translateY <= this.expandPanelHeight - upTouchSensitivity) {
          // this.expandPanel();
          this.translateY = 0;
        } else {
          this.foldPanel();
          this.translateY = diffPanelHeight;
        }
      }
      touchLength = 0;
      pageTouchStartY = 0;
    },
    foldPanel() {
      this.$emit('component-slider-panel-v2-fold');
    },
    expandPanel() {
      this.$emit('component-slider-panel-v2-expand');
    }
  }
});
</script>