<template>
  <div class="jc-component__range">
    <div v-loading="loading" class="jc-range" :class="rangeStatus ? 'success' : ''">
      <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
      {{ rangeStatus ? successText : startText }}
    </div>
  </div>
</template>

<script>
import * as login from '@/api/login'
export default {
  props: {
    // 成功之后的函数
    successFun: {
      type: Function,
    },
    //成功图标
    successIcon: {
      type: String,
      default: 'el-icon-check',
    },
    //成功文字
    successText: {
      type: String,
      default: '验证成功',
    },
    //开始的图标
    startIcon: {
      type: String,
      default: 'el-icon-right',
    },
    //开始的文字
    startText: {
      type: String,
      default: '请按住滑块，拖动到最右边',
    },
    //失败之后的函数
    errorFun: {
      type: Function,
    },
    //或者用值来进行监听
    status: {
      type: String,
    },
  },
  data () {
    return {
      loading: false,
      disX: 0,
      rangeStatus: false,
      str: {},
    }
  },
  methods: {
    moveFn (e) {
      let ele = e.target
      ele.style.transition = '.5s all'
      ele.style.transform = 'translateX(0)'
      this.rangeStatus = false
      // 执行成功的函数
      this.errorFun()
    },
    //滑块移动
    rangeMove (e) {
      this.str = 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.background = 'red!important'
        ele.style.transform = 'translateX(' + this.disX + 'px)'
        e.preventDefault()
      }

      document.onmouseup = async () => {

        if (this.disX !== MaxX) {
          ele.style.transition = '.5s all'
          ele.style.transform = 'translateX(0)'
          // 执行成功的函数
          this.errorFun && this.errorFun()
        }
        else {
          this.successFun && this.successFun()
          this.rangeStatus = true
          this.loading = true
          if (this.status) {
            this.$parent[this.status] = true
          }
        }
        document.onmousemove = null
        document.onmouseup = null
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin jc-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jc-component__range {
  .jc-range {
    background-color: #F7FAFE;
    border: 1px solid #D8E0E9;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #9B9B9B;
    display: flex;
    // justify-content: center;
    padding-left: 50px;
    align-items: center;
    height: 40px;

    /*no*/
    &.success {
      background-color: #D2F5EF;
      color: #4caf50;
      border: 1px solid #99D5D0;
      font-size: 16px;
      justify-content: center;
      padding-left: 0px;

      i {
        color: #ffffff;
        background-color: #51CCBF;
      }
    }

    i {
      position: absolute;
      left: 0;
      width: 38px;
      /*no*/
      height: 40px;

      background-color: #fff;
      border: 1px solid #d8d8d8;
      cursor: pointer;
      font-size: 14px;
      color: #829ABA;
      @include jc-flex;
    }
  }
}
</style>
<style lang="scss" scoped>
/deep/.el-loading-spinner {
  top: 62%;

  .circular {
    height: 35px !important;
    width: 30px !important;
  }
}

/deep/.el-loading-mask {
  background-color: rgba(255, 255, 255, 1);
}
</style>