<style lang="less">
@keyframes opacity_processing {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, 0.4);
  }
}

@keyframes hoverbar_opacity_hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes hoverbar_opacity_show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hoverbar_width_show {
  from {
    width: 80rpx;
  }
  to {
    width: 100%;
  }
}

@keyframes hoverbar_width_hide {
  from {
    width: 100%;
  }
  to {
    width: 80rpx;
  }
}
.component-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 29; //因为导航栏的z-index 为11 故为了遮住导航栏
  animation: opacity_processing 0.3s linear;
  .panel-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    animation: slideUp 0.3s linear;
    animation-fill-mode:forwards;
    display: flex;
    flex-direction: column;
    .content-area-wrapper {
      flex: 1;
      box-shadow: 0px -4px 12px rgba(1, 1, 51, 0.03),
        0px 0px 4px rgba(1, 1, 51, 0.03);
      background-color: white;
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
    }
    .slider-icon {
      margin: 15px auto 0;
      width: 44px;
      height: 4px;
      border-radius: 4px;
      background-color: rgba(2, 2, 82, 0.12);
    }
    .icon-close {
      position: absolute;
      top: 32rpx;
      right: 32rpx;
      width: 48rpx;
      height: 48rpx;
      z-index: 2;
    }
    .hover-bar-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      padding: 0 50rpx;
      box-sizing: border-box;
      margin: 0 auto;
      overflow: hidden;
      animation: hoverbar_opacity_show 0.4s ease-in-out;
      &.hide {
        opacity: 0;
        animation: hoverbar_opacity_hide 0.4s ease-in-out;
        .hover-bar {
          width: 80rpx;
          animation: hoverbar_width_hide 0.3s ease-in-out;
        }
      }
      .hover-bar {
        width: 80rpx;
        animation: hoverbar_width_show 0.3s ease-in-out 0.2s;
        animation-fill-mode:forwards;
      }
    }
  }
}
.component-container-hidden {
  height: 0;
}
</style>

<template>
  <div
    class="component-container"
    v-on:touchstart="pageTouchStart"
    v-on:touchmove.stop="pageTouchMove"
    v-on:touchend="pageTouchEnd"
    v-on:click="hidePanel"
    :style="{'background': maskBackground}"
  >
    <div
      class="panel-container"
      style="{{(top?('top:'+(top+'rpx;')):'') + (height?('height:'+(height+'rpx;')):'') +'animation-fill-mode:' + (animationDone?'none;': 'forwards;')+(animationDone?('transform:translateY('+translateY+'px)'):'')}}"
      v-on:click.stop="stopPropagation"
    >
      <div
        class="hover-bar-wrapper"
        v-if="hasHoverBar"
        :class="{'hide': translateY>hideHoverBarTranslateY || !showHoverBar}"
      >
        <div class="hover-bar">
          <slot name="hover"></slot>
        </div>
      </div>
      <div class="content-area-wrapper">
        <div class="slider-icon" v-if="showSliderIcon"></div>
        <image
          v-if="showClose"
          class="icon-close"
          src="{{h5StaticPath}}/static/icon-close.svg"
          @click="hidePanel"
        />
        <div class="content-container">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

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

let pageTouchStartY = 0;
let isPageTouchStart = false;
let componentTop = 0;
let HideHoverBarTranslateY = 300;
wepy.component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  props: {
    // 注意同一个页面使用多个该组件时该值是否要保持唯一
    slidDoneEmitId: String,
    top: String,
    height: String,
    showClose: {
      type: Boolean,
      default: false
    },
    hasHoverBar: {
      type: Boolean,
      default: false
    },
    showHoverBar: {
      type: Boolean,
      default: false
    },
    hideTovebarEmitId: {
      type: String,
      default: ''
    },
    showSliderIcon: {
      type: Boolean,
      default: true
    }
  },
  ready() {
    // 当动画执行完毕, 进行标记,更改样式, 此时才使用滑动的transform, 本是0.3s担心动画性能慢,跑的慢了点故加长时间为350s
    setTimeout(() => {
     this.animationDone = true;
    }, 350);
  },
  attached() {
    //获取内容高度
    let selector = this.$wx
      .createSelectorQuery()
      .select('.component-container .content-area-wrapper')
      .boundingClientRect()
      .exec(ret => {
        this.modelHeight = ret[0].height;
      });
  },
  data: {
    hideHoverBarTranslateY: HideHoverBarTranslateY,
    translateY: 0,
    h5StaticPath: config.h5StaticPath,
    maskBackground: 'rgba(0, 0, 0, 0.4);',
    modelHeight: 400, //整个模态框的高度
    animationDone: false
  },
  methods: {
    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;
          let opacity =
            1 - Math.abs(this.translateY) / parseInt(this.modelHeight);
          this.maskBackground = `rgba(0, 0, 0, ${0.4 * opacity});`;
        }

        if (touchLength > HideHoverBarTranslateY) {
          this.$emit(this.hideTovebarEmitId, true);
        } else {
          this.$emit(this.hideTovebarEmitId, false);
        }
      } catch (err) {
        console.log(err.message);
      }
    },
    pageTouchEnd(e) {
      if (this.translateY >= 200) {
        this.hidePanel();
      } else {
        this.emitHideToverBar(false);
      }
      this.translateY = 0;
      this.maskBackground = 'rgba(0, 0, 0,0.4)';
    },
    hidePanel() {
      if (this.slidDoneEmitId) {
        this.$emit(this.slidDoneEmitId);
      }

      this.emitHideToverBar(true);
    },
    emitHideToverBar(hideStatus) {
      if (!this.hideTovebarEmitId) {
        return;
      }
      this.$emit(this.hideTovebarEmitId, hideStatus);
    },
    stopPropagation() {
      // 空方法，阻止冒泡用
    }
  }
});
</script>
