<style lang="less">
.component-panel-can-close-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
}
.component-panel-can-close {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  box-shadow: 0px 0px 4px rgba(1, 1, 51, 0.02),
    0px 0px 40px rgba(1, 1, 51, 0.08);
  border-radius: 32rpx 32rpx 0 0;
  min-height: 400rpx;
  animation: slideUp 0.3s linear;
  -webkit-animation: slideUp 0.3s linear;
  background-color: #fff;
}

.component-panel-can-close .content {
  position: relative;
}

.component-panel-can-close .closed-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 112rpx;
  height: 112rpx;
  z-index: 3;
}

.component-panel-can-close .closed {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  background: rgba(2, 2, 82, 0.03);
  width: 48rpx;
  height: 48rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.icon-close-image {
  width: 20rpx;
  height: 20rpx;
  display: block;
}
</style>

<template>
  <div
    class="component-panel-can-close-wrapper"
    style="{{'display:'+ (show?'block;': 'none;')}}"
    v-if="show"
  >
    <div
      class="component-panel-can-close"
      style="{{('transform:translateY('+translateY+'px)'+';')}}"
      v-on:touchmove.stop="pageTouchMove"
      v-on:touchstart="pageTouchStart"
      v-on:touchend="pageTouchEnd"
    >
      <div class="content">
        <div class="closed-wrapper" v-on:click="closePanel">
          <div class="closed">
            <image class="icon-close-image" :src="h5StaticPath+'/icon_close_gray.png'" />
          </div>
        </div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import wepy from '@wepy/core';
import config from '@/config';
let pageTouchStartY = 0;
wepy.component({
  data: {
     h5StaticPath: config.h5StaticPath,
    showPanel: false,
    translateY: 0
  },
  props: {
    show: Boolean,
    containerId: String
  },
  watch:{
     show: function(newShow, oldShow) {
      if (oldShow !== newShow) {
        this.show = newShow;
      }
    }
  },
  methods: {
    closePanel() {
     this.show = false;
     this.$emit('compnent-panel-close-close');
    },
    pageTouchStart(e) {
      try {
        let touch = e.touches[0]; //获取第一个触点
        //记录触点初始位置
        pageTouchStartY = Number(touch.pageY); //页面触点Y坐标
      } catch (err) {
        console.log(err.message);
      }
    },
    pageTouchMove(e) {
      try {
        let touch = e.touches[0], //获取第一个触点
          y = Number(touch.pageY); //页面触点Y坐标
        let touchLength = parseInt(y - pageTouchStartY);
        // 下滑
        if (touchLength >= 0) {
         this.translateY =  touchLength;
        }
      } catch (err) {
        console.log(err.message);
      }
    },
    pageTouchEnd(e) {
      if (this.translateY >= 200) {
        this.closePanel();
      }
      this.translateY =  0;
    },
    stopPropagation() {
      // 空方法，阻止冒泡用
    }
  }
});
</script>