<template>
  <view
    class="out-panel"
    :style="{ height: `${height}px` }"
    :class="{ transition_class: isAutoMove }"
  >
    <view class="panel_content" :class="{ search_radius: !isScroll }">
      <view style="height: 100%">
        <view
          class="deep"
          @touchmove.prevent.stop="touchmoveHandle"
          @touchstart="touchstartHandle"
          @touchend.stop="touchendHandle"
        >
          <slot name="header"></slot>
        </view>
        <slot name="fooder"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //初始化是否在中间
    isMiddle: {
      type: Boolean,
      default: true,
    },
    //距离顶部距离 rpx
    topSpac: {
      type: Number,
      default: 0,
    },
    //底部最短高度 rpx
    bottomSpac: {
      type: Number,
      default: 80,
    },
    //中间状态高度 rpx
    middleSpace: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    let info = uni.getSystemInfoSync();
    // console.log(info);
    // console.log(info.windowHeight);

    this.maxHeight = info.windowHeight - uni.upx2px(this.topSpac);
    this.minHeight = uni.upx2px(this.bottomSpac);
    if (this.middleSpace == 0) {
      this.middleHeight =
        (this.maxHeight - this.minHeight) / 2 + this.minHeight;
    } else {
      this.middleHeight = uni.upx2px(this.middleSpace);
    }

    if (this.isMiddle) {
      this.height = this.middleHeight;
      let percent = parseInt(
        ((this.height - this.minHeight) * 100) /
          (this.maxHeight - this.minHeight)
      );
      this.$emit("movePercentage", {
        percent: percent,
        isMiddle: this.height == this.middleHeight,
        isBottom: this.height == this.minHeight,
        middleHeight: this.middleHeight,
        minHeight: this.minHeight,
        isEnd: true,
		height:this.height,
      });
    } else {
      this.height = this.minHeight;
    }
  },
  created() {},
  data() {
    return {
      height: 280,
      lastY: 0,
      up: true,
      direction_flag: true,
      isScroll: false,
      maxHeight: 1000,
      middleHeight: 380,
      minHeight: 220,
      isAutoMove: false,
    };
  },
  methods: {
    moveToBottom() {
      this.isAutoMove = false;
      this.height = this.minHeight;
      this.isAutoMove = true;
    },
    touchstartHandle(event) {
      this.isAutoMove = false;
      this.lastY = event.touches[0].pageY;
    },
    touchendHandle(event) {
      let isMin = false;
      this.isAutoMove = true;
      let bottomMoveHeight = this.middleHeight - this.minHeight;
      let topMoveHeight = this.maxHeight - this.middleHeight;
      if (this.height >= this.maxHeight) {
        this.height = this.maxHeight;
        this.isScroll = true;
      } else if (this.height > this.middleHeight + bottomMoveHeight / 2) {
        this.height = this.maxHeight;
        this.isScroll = true;
      } else if (this.height > this.middleHeight - topMoveHeight / 2) {
        this.height = this.middleHeight;
        this.isScroll = false;
      } else {
        this.height = this.minHeight;
        this.isScroll = false;
        isMin = true;
      }

      this.direction_flag = true;

      let percent = parseInt(
        ((this.height - this.minHeight) * 100) /
          (this.maxHeight - this.minHeight)
      );

      this.$emit("movePercentage", {
        percent: percent,
        isMiddle: this.height == this.middleHeight,
        isBottom: this.height == this.minHeight,
        middleHeight: this.middleHeight,
        minHeight: this.minHeight,
        isEnd: true,
		height:this.height,
      });
    },
    touchmoveHandle(event) {
      let currentY = event.touches[0].pageY;
      let transformHeight = currentY - this.lastY;
      this.height = this.height - transformHeight;
      if (this.height > this.maxHeight) {
        this.height = this.maxHeight;
      }
      if (this.height < this.minHeight) {
        this.height = this.minHeight;
      }
      if (this.direction_flag) {
        this.direction_flag = false;
        if (transformHeight > 0) {
          // 下滑
          this.up = false;
        } else {
          // 上滑
          this.up = true;
        }
      }
      this.lastY = currentY;
      let percent = parseInt(
        ((this.height - this.minHeight) * 100) /
          (this.maxHeight - this.minHeight)
      );
      // this.$emit("movePercentage", {
      // 	percent: percent,
      // 	isEnd: false
      // });
    },
  },

  watch: {
    bottomSpac(newValue) {
      this.minHeight = uni.upx2px(this.bottomSpac);
      this.middleHeight =
        (this.maxHeight - this.minHeight) / 2 + this.minHeight;
      if (!this.isScroll) {
        this.height = this.minHeight;
      }
    },
  },
};
</script>

<style lang="scss">
.out-panel {
  z-index: 900;
  position: fixed;
  z-index: 99999;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.panel_content {
  z-index: 999;
  background-color: #ffffff;
  box-sizing: border-box;
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-start;
  // align-items: center;
  width: 100%;
  height: 100%;
  flex: 1;
}

.search_radius {
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.1);
}

.transition_class {
  transition-property: height;
  transition-duration: 0.3s;
  transition-delay: 0s;
}

.panel_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #ffffff, $alpha: 1);
}
</style>
