<template>
  <div v-if="canShowTips" class="detail-useage-tips">
    <div :class="['step', 'step-' + tipsStep]" @touchend="changeStep" @touchstart="stopPrevent"></div>
  </div>
</template>

<script>
export default {
  name: 'DetailUseageTips',
  data() {
    return {
      tipsStep: 1,
      canShowTips: 0,
      touchStartY: 0
    };
  },
  activated() {
    this.checkCanShowTips();
  },
  methods: {
    checkCanShowTips() { // 检查localStroage中有没有显示过提示的记录
      let storage = localStorage.getItem('userTipsShow');

      if (storage) {
        this.canShowTips = 0;
      } else {
        this.canShowTips = 1;
      }
    },

    setShowTips() { // 在localStorage中存储一个值，下次打开时不再显示提示
      localStorage.setItem('userTipsShow', 1);
    },

    changeStep(e) {
      if (Math.abs(e.changedTouches[0].pageY - this.touchStartY) < 10) {
        this.tipsStep += 1;
        if (this.tipsStep > 4) {
          this.canShowTips = 0;
          this.setShowTips();
        }
      }
    },

    stopPrevent(e) {
      e.preventDefault();
      this.touchStartY = e.touches[0].pageY;
    }
  }
};
</script>

<style lang="scss" scoped>
  .detail-useage-tips {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);

    .step {
      position: relative;
      width: 100%;
      height: 100%;
      background-size: 100% auto;
      background-position: left center;
    }

    .step-1 {
      background-image: url('~statics/image/product/detail-useage-tips-xs-1.png');
    }

    .step-2 {
      background-image: url('~statics/image/product/detail-useage-tips-xs-2.png');
    }

    .step-3 {
      background-image: url('~statics/image/product/detail-useage-tips-xs-3.png');
    }

    .step-4 {
      background-image: url('~statics/image/product/detail-useage-tips-xs-4.png');
    }

    @media screen and (max-width: 375px) {
      @media screen and (max-height: 812px){
        .step-1 {
          background-image: url('~statics/image/product/detail-useage-tips-xs-1.png');
        }

        .step-2 {
          background-position: left -200px;
          background-image: url('~statics/image/product/detail-useage-tips-xs-2.png');
        }

        .step-3 {
          background-position: left -160px;
          background-image: url('~statics/image/product/detail-useage-tips-xs-3.png');
        }

        .step-4 {
          background-position: left -120px;
          background-image: url('~statics/image/product/detail-useage-tips-xs-4.png');
        }
      }

      @media screen and (max-height: 667px) {
        .step-1 {
          background-image: url('~statics/image/product/detail-useage-tips-1.png');
        }

        .step-2 {
          background-position: left -200px;
          background-image: url('~statics/image/product/detail-useage-tips-2.png');
        }

        .step-3 {
          background-position: left -160px;
          background-image: url('~statics/image/product/detail-useage-tips-3.png');
        }

        .step-4 {
          background-position: left -120px;
          background-image: url('~statics/image/product/detail-useage-tips-4.png');
        }
      }
    }

    @media screen and (max-width: 414px){
      @media screen and (max-height: 812px){
        .step-1 {
          background-image: url('~statics/image/product/detail-useage-tips-xs-1.png');
        }

        .step-2 {
          background-position: left -200px;
          background-image: url('~statics/image/product/detail-useage-tips-xs-2.png');
        }

        .step-3 {
          background-position: left -160px;
          background-image: url('~statics/image/product/detail-useage-tips-xs-3.png');
        }

        .step-4 {
          background-position: left -120px;
          background-image: url('~statics/image/product/detail-useage-tips-xs-4.png');
        }
      }

      @media screen and (max-height: 667px) {
        .step-1 {
          background-image: url('~statics/image/product/detail-useage-tips-1.png');
        }

        .step-2 {
          background-position: left -160px;
          background-image: url('~statics/image/product/detail-useage-tips-2.png');
        }

        .step-3 {
          background-position: left -112px;
          background-image: url('~statics/image/product/detail-useage-tips-3.png');
        }

        .step-4 {
          background-position: left -120px;
          background-image: url('~statics/image/product/detail-useage-tips-4.png');
        }
      }
    }
  }

  @keyframes changeStep {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>