<template>
  <div class="jc-component__range">
    <div
      class="jc-range"
      :class="rangeStatus?'success':''"
    >
      <!-- <Icon :type="rangeStatus?successIcon:startIcon" /> -->
      <i
        :class="rangeStatus?successIcon:startIcon"
        @mousedown="rangeMove"
      />
      <span
        v-if="rangeStatus"
        class="animationSuccess"
      >
        {{ successText }}
      </span>
      <span
        v-else
        class="animation"
      >
        {{ startText }}
      </span>
    </div>
  </div>
</template>
<script>

  export default {
    props: {
      // 成功之后的函数
      // eslint-disable-next-line vue/require-default-prop
      successFun: {
        type: Function
      },
      // 成功图标
      successIcon: {
        type: String,
        default: 'icon-success'
      },
      // 成功文字
      successText: {
        type: String,
        default: '验证成功'
      },
      // 开始的图标
      startIcon: {
        type: String,
        default: 'icon-start'
      },
      // 开始的文字
      startText: {
        type: String,
        default: '请按住滑块，拖动到最右边'
      },
      // 失败之后的函数
      // eslint-disable-next-line vue/require-default-prop
      errorFun: {
        type: Function
      },
      // 或者用值来进行监听
      // eslint-disable-next-line vue/require-default-prop
      status: {
        type: String
      }
    },
    data() {
      return {
        disX: 0,
        rangeStatus: false
      };
    },
    methods: {
      // 滑块移动
      rangeMove(e) {
        let ele = e.target;
        let startX = e.clientX;
        let eleWidth = ele.offsetWidth;
        let parentWidth = ele.parentElement.offsetWidth;
        let MaxX = parentWidth - eleWidth;
        if (this.rangeStatus) { // 不运行
          return false;
        }
        document.onmousemove = (e) => {
          let endX = e.clientX;
          this.disX = endX - startX;
          if (this.disX <= 0) {
            this.disX = 0;
          }
          if (this.disX >= MaxX - eleWidth) { // 减去滑块的宽度,体验效果更好
            this.disX = MaxX;
          }
          ele.style.transition = '.1s all';
          ele.style.transform = `translateX(${this.disX}px)`;
          e.preventDefault();
        };
        document.onmouseup = ()=> {
          if (this.disX !== MaxX) {
            ele.style.transition = '.5s all';
            ele.style.transform = 'translateX(0)';
            // 执行成功的函数
            this.errorFun && this.errorFun();
          } else {
            this.rangeStatus = true;
            if (this.status) {
              this.$parent[this.status] = true;
            }
            // 执行成功的函数
            this.successFun && this.successFun();
            setTimeout(()=>{
              if (!this.rangeStatus) {
                ele.style.transition = '.5s all';
                ele.style.transform = 'translateX(0)';
                // 执行成功的函数
                this.errorFun && this.errorFun();
              }
            }, 200);
          }
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
@keyframes mymove
{
	from {background-position:-200px 0px;}
	to {background-position:200px 0px;}
}
.animation{
    width: 100%;
    padding-left:55px ;
    display: inline-block;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #97a8be), color-stop(0.4, #97a8be), color-stop(0.5, #fff), color-stop(0.6, #97a8be), color-stop(1, #97a8be));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: mymove 3s infinite;
    -webkit-text-size-adjust: none;
}
.animationSuccess{
    width: 100%;
    display: inline-block;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #fff), color-stop(0.4, #fff), color-stop(0.5, #97a8be), color-stop(0.6, #fff), color-stop(1, #fff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: mymove 3s infinite;
    -webkit-text-size-adjust: none;
}
.icon-start{
  background-image: url('../../assets/icon/zhixiang-you.png');
  background-size: 40% 50%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
.icon-success{
  background-image: url('../../assets/icon/chenggong.png');
  background-size: 45% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
@mixin jc-flex{
display: flex;
justify-content: center;
align-items: center;
}
.jc-component__range{
.jc-range{
    // box-shadow: 2px 2px 8px 0px #3872C5;
    border-radius: 2px;
    background-color: #F5F5F5;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #97a8be;
    text-align: center;
    line-height: 50px;
    @include jc-flex;
    margin-bottom: 20px;
    font-size: 16px;
    height: 50px; /*no*/
    &.success{
        background-color: #52C41A;
        color: #fff;
    }
    i{
        position: absolute;
        left: 0;
        top: 0px;
        width: 55px;/*no*/
        height: 50px;
        color: #B8B8B8;
        background-color: #fff;
        border-radius: 2px;
        border: 1px solid #DDDDDD;
        cursor: pointer;
        @include jc-flex;
    }
}
}
</style>
