<template>
  <div
    ref="dragDiv"
    class="slide-to-check-wrap"
    :class="{ 'slide-ok': confirmSuccess }"
  >
    <div class="drag_bg" />
    <div
      ref="moveDiv"
      class="handler handler_bg"
      :class="{ handler_ok_bg: confirmSuccess }"
      @touchstart="mousedownFn($event)"
    >
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'SlideToCheck',
  data() {
    return {
      beginClientX: 0, // 距离屏幕左端距离
      mouseMoveStata: false, // 触发拖动状态  判断
      maxwidth: '', // 拖动最大宽度，依据滑块宽度算出来的
      confirmSuccess: false // 验证成功判断
    };
  },
  mounted() {
    const htmlEle = document.getElementsByTagName('html')[0];
    this.maxwidth =
      this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth - 4;
    htmlEle.addEventListener('touchmove', this.mouseMoveFn);
    htmlEle.addEventListener('touchend', this.moseUpFn);
  },
  methods: {
    mousedownFn: function (evt) {
      if (!this.confirmSuccess) {
        evt.preventDefault && evt.preventDefault(); // 阻止文字选中等默认事件
        this.mouseMoveStata = true;
        this.beginClientX = evt.changedTouches[0].clientX;
      }
    },

    mouseMoveFn(evt) {
      if (this.mouseMoveStata) {
        const width = evt.changedTouches[0].clientX - this.beginClientX;
        if (width > 0 && width <= this.maxwidth) {
          document.getElementsByClassName('handler')[0].style.left =
            width + 'px';
          document.getElementsByClassName('drag_bg')[0].style.width =
            width + 'px';
        } else if (width > this.maxwidth) {
          this.successHandle();
        }
      }
    },
    successHandle() {
      this.confirmSuccess = true;
      const htmlEle = document.getElementsByTagName('html')[0];
      if (window.addEventListener) {
        htmlEle.removeEventListener('touchmove', this.mouseMoveFn);
        htmlEle.removeEventListener('touchend', this.moseUpFn);
      } else {
        htmlEle.removeEventListener('touchend', () => {});
      }
      document.getElementsByClassName('handler')[0].style.left =
        this.maxwidth + 'px';
      document.getElementsByClassName('drag_bg')[0].style.width =
        this.maxwidth + 'px';

      this.$emit('slideCallback');
    },
    moseUpFn(evt) {
      this.mouseMoveStata = false;
      const width = evt.changedTouches[0].clientX - this.beginClientX;
      if (width < this.maxwidth) {
        document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
      }
    }
  }
};
</script>

<style lang="scss">
.slide-to-check-wrap {
  position: relative;
  background-color: #e7e8e9;
  margin: 0 auto;
  width: 325px;
  height: 40px;
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  &.slide-ok {
    background: #449284;
  }
  .handler {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: move;
    margin: 2px;
  }
  .handler_bg {
    background: url('~@/assets/images/slide-icon.png') no-repeat center;
    background-size: 100% 100%;
  }
  .handler_ok_bg {
    background: url('~@/assets/images/slide-ok.png') no-repeat center;
    background-size: 100% 100%;
  }
  .drag_bg {
    background-color: #449284;
    border-radius: 4px 0 0 4px;
    height: 40px;
    width: 0px;
  }
}
</style>
