<style lang="less">
.component-step-panel-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
}
.component-step-panel-content {
  position: absolute;
  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;
  background: #fff;
  &.hasAnimation {
    transition: transform 0.3s ease-out;
  }
}

.component-step-panel {
  position: relative;
}
.component-step-panel .pre-step-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 112rpx;
  width: 112rpx;
  z-index: 3;
}
.component-step-panel .step-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow-x: hidden;
  transition: transform 0.3s ease-out;
}

.component-step-panel .step-item {
  overflow: hidden;
  display: block;
}

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

.component-step-panel .pre-step .icon-arrow {
  width: 16rpx;
  height: 24rpx;
}

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

.component-step-panel .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%;
}

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

<template>
  <div
    class="component-step-panel-mask"
    v-if="show"
    v-on:touchmove="stopPropagation"
    v-on:touchstart="stopPropagation"
    v-on:touchend="stopPropagation"
  >
    <div
      class="component-step-panel-content"
      :class="{'hasAnimation': hasAnimation}"
      style="{{('transform:translateY('+translateY+')'+';')}}"
      v-on:touchmove="pageTouchMove"
      v-on:touchstart="pageTouchStart"
      v-on:touchend="pageTouchEnd"
    >
      <div class="component-step-panel">
        <div class="pre-step-wrapper" v-on:click.stop="goPreStep" v-if="step!=1">
          <div class="pre-step">
            <image class="icon-arrow" :src="h5StaticPath+'/icon_back_gray_weight.png'" />
          </div>
        </div>
        <div class="closed-wrapper" @click="closePanel">
          <div class="closed">
            <image class="icon-close-image" :src="h5StaticPath+'/icon_close_gray.png'" />
          </div>
        </div>
        <div
          class="step-content"
          :style="{width:(screenWidth*steps+'px'),transform:('translate('+(-(step-1)*screenWidth)+'px,'+(0)+'px)')}"
        >
          <div
            v-for="(item, index) in stepsArr"
            :key="index"
            class="{{'step-item '+(item)}}"
            style="{{'width:'+screenWidth+'px'}}"
          >
            <slot :name="item"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wepy from '@wepy/core';
import config from '@/config';
let pageTouchStartY = 0;
let moveY = 0;
wepy.component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  data: {
    h5StaticPath: config.h5StaticPath,
    stepsArr: [],
    stepHeights: [],
    contanierHeight: 0,
    translateY: '100%',
    translateX: 0,
    screenWidth: 375,
    oldStep: 0,
    hiddenOldStep: false,
    hasAnimation: false
  },
  props: {
    steps: Number,
    step: Number,
    panelHeightHasChange: Boolean,
    show: Boolean,
    containerId: String
  },
  ready() {
    this.generateStepArrar();
    // 防止内部元素未加载完毕
    setTimeout(() => {
      this.getStepHieght();
    }, 20);
    this.setStepContanierWidth();
  },
  watch: {
    step: function(newStep, oldStep) {
      if (oldStep !== newStep) {
        //更新时候重新设置值
        // 当首次更改的时候，第一次设置值，此时元素还未加载完，故加上延迟
        if (!oldStep) {
          setTimeout(() => {
            this.getStepHieght();
          }, 200);
        } else {
          this.getStepHieght();
        }
      }
    },
    panelHeightHasChange: function(newPanelHeightChange, oldPanelHeightChange) {
      if (oldPanelHeightChange == false && newPanelHeightChange == true) {
        this.getStepHieght(); //更新时候重新设置值
      }
    },
    show: function(newShow, oldShow) {
      if (oldShow !== newShow) {
        this.show = newShow;
        // 当首次更改的时候，第一次设置值，此时元素还未加载完，故加上延迟
        if (oldShow == null) {
          setTimeout(() => {
            this.getStepHieght();
          }, 200);
        } else {
          this.getStepHieght();
        }

        if (!oldShow && newShow) {
          this.hasAnimation = true;
          setTimeout(() => {
            this.hasAnimation = false;
          }, 300);
        }
      }
    }
  },
  methods: {
    generateStepArrar() {
      const { steps } = this;
      let stepsArr = [];
      for (let i = 1; i <= steps; i++) {
        let stepClassName = 'step' + i;
        stepsArr.push(stepClassName);
      }
      this.stepsArr = stepsArr;
    },
    getStepHieght() {
      const { show, step } = this;
      if (!show) {
        return;
      }
      this.setStepTranslste();
    },
    setStepTranslste() {
      const { step, containerId } = this;
      if (!this.stepsArr.length) {
        this.generateStepArrar();
      }
      let { stepsArr } = this;
      let selector = this.$wx
        .createSelectorQuery()
        .select('.step-content')
        .boundingClientRect();
      let stepClassName = stepsArr[step - 1];
      selector = selector.select(`.${stepClassName}`).boundingClientRect();

      selector.exec(ret => {
        this.translateY = ret[0].height - ret[1].height + 'px';
      });
    },
    setStepContanierWidth() {
      wx.getSystemInfo({
        success: res => {
          let screenWidth = res.screenWidth;
          this.screenWidth = screenWidth;
        }
      });
    },
    goPreStep() {
      this.$emit('component-panel-step-back');
    },
    closePanel() {
      this.show = false;
      this.$emit('component-panel-step-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);
        pageTouchStartY = y;
        moveY = moveY + touchLength;
        // 下滑
        let oldTranslateY = parseInt(
          this.translateY.substring(0, this.translateY.length - 2)
        );
        if (touchLength > 0) {
          this.translateY = oldTranslateY + touchLength + 'px';
        } else {
          // 重新计算，防止下滑后再上滑，更改了值
          // this.getStepHieght();
        }
      } catch (err) {}
    },
    pageTouchEnd(e) {
      if (!moveY) {
        return;
      }
      if (moveY >= 200) {
        this.closePanel();
      } else {
        this.getStepHieght();
      }
      moveY = 0;
    },
    stopPropagation() {
      // 空方法，阻止冒泡用
    }
  }
});
</script>