<style lang="less" scoped>
.box {
    position: relative;
}
.line {
    position: absolute;
    width: 335px;
    height: 32px;
    background: linear-gradient(
        90deg,
        #ffc079 0%,
        #ffe7d1 43.1%,
        #f1efff 74.36%,
        #c8d6ff 100%
    );
    border-radius: 16px;
}
.line_bg {
    background: rgba(232, 236, 240, 1);
}
.active_line {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 335px;
    height: 32px;
    border-radius: 16px 0 0 16px;
    background: rgba(61, 203, 204, 0.3);
}
.btn {
    box-sizing: border-box;
    position: absolute;
    width: 38px;
    height: 38px;
    left: 0px;
    top: -3px;
    border-radius: 50%;
    background: #f6f9fe;
    border: 2px solid #ffffff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 0px 8px rgba(0, 0, 0, 0.1);
}
.text_box {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30rpx;
    align-items: center;

}
.text{
    font-family: PingFang SC;
    font-size: 36rpx;
    font-weight: 400;
    line-height: 50rpx;
    color: rgba(27, 33, 41, 1); 
}
.text_num{
    font-family: Montserrat;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 48rpx;
    color: rgba(27, 33, 41, 1);
}
.posi_text{
    position: absolute;
    left: 8px;
    top: 0px;
    color: #1B2129;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
}
.posi_text_right{
    position: absolute;
    right: 8px;
    top: 0px;
    color: #1B2129;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
}
</style>
<template>
    <div style="padding-top: 18rpx; width: 335px;">

        <div class="box">
            <div
                v-if="onlyLine"
                class="line"
                bindtap="touchmove"
            ></div>
            <div
                v-if="!onlyLine"
                :class="{'line':true,'line_bg':true}"
                bindtap="touchmove"
            ></div>
            <div
                v-if="!onlyLine"
                class="active_line"
                bindtap="touchmove"
                style="width:{{progress+19}}px;"
            ></div>
            <span class="posi_text">关</span>
            <span class="posi_text_right">开</span>
            <div
                class="btn"
                style="left:{{buttonLeft}}px;"
                bind="mousedown"
                bindtouchstart="touchstart"
                bindtouchmove="touchmove"
                bindtouchend="touchend"
            ></div>
        </div>
    </div>

</template>
<script>
import wepy from '@wepy/core'
// import config from '@/config';
const max = 335 - 38
wepy.component({
  name: 'Slider',
  props: {
    typeName: String,
    type: String,
    typeValue: Number,
    onlyLine: {
      type: Boolean,
      defaulf: true
    }
  },
  data: {
    progress: 0,
    buttonLeft: 0,
    precent: 0,
    min: 0,
    max,
    startPoint: 0
        // h5StaticPath: config.h5StaticPath + '/page-officehome/',
  },
  watch: {
    typeValue(val) {
      this.buttonLeft = parseInt(val / 100 * this.max)
      this.progress = this.buttonLeft
      this.precent = val
    }
  },
  methods: {
    touchstart(ev) {
      this.startPoint = ev.touches[0]
    },
    touchmove(e) {
      var endPoint = e.touches[e.touches.length - 1]
      var translateX = endPoint.clientX - this.startPoint.clientX
      this.startPoint = endPoint
      var buttonLeft = this.buttonLeft + translateX
      if (buttonLeft > this.max) {
                // 滑动位置大于进度条最大宽度的时候让它为最大宽度
        buttonLeft = this.max
      }
      if (buttonLeft < this.min) {
                // 滑动位置小于进度条最大宽度的时候让它为最小宽度
        buttonLeft = this.min
      }
      this.buttonLeft = buttonLeft
      this.progress = buttonLeft
      this.precent = parseInt((buttonLeft / this.max) * 100)
    //   this.$emit('silder-percent-value', {'value': this.precent, 'type': this.type})
    },
    touchend() {
      this.$emit('silder-mouseEnd', {'value': this.precent, 'type': this.type})
    }
  }
})
</script>
