<style lang="less" scoped>
.card_silder{
    padding-top: 18rpx;
    width: 582rpx;
}
.box {
    position: relative;
    height: 22px;
}
.line {
    position: absolute;
    width: 582rpx;
    height: 22px;
    background: linear-gradient(
        270deg, #FFBAB6 0%, #FFE7D1 29.05%, #F1EFFF 62%, #C8D6FF 100%
    );
    border-radius: 16px;
    // 最大最小值
    font-family: Montserrat;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
    color: #626C78;
    .min_l{
        position: absolute;
        left: 8px;
        top:4px;
    }
    .max_r{
        position: absolute;
        right: 8px;
        top:4px;
    }
}
.btn {
    box-sizing: border-box;
    position: absolute;
    height: 32px;
    width: 32px;
    left: 0px;
    top: -5px;
    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);
    .value{
        position: absolute;
        top:-36rpx;
        left: 0;
        font-family: Montserrat;
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        color: #626C78;
    }
}
.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);
}
</style>
<template>
    <div class="card_silder" style="{{ 'width:'+cardWidth+'px' }}">
        <div class="box" id="cardSilder">
            <div
                class="line"
                bindtap="touchmove"
                style="{{ 'width:'+cardWidth+'px' }}"
            >
               <div class="min_l">{{ minValue }}</div>
               <div class="max_r">{{maxValue}}</div>
            </div>
            <div
                class="btn"
                style="left:{{buttonLeft}}px;"
                bind="mousedown"
                bindtouchstart="touchstart"
                bindtouchmove="touchmove"
                bindtouchend="touchend"
            >
            <div class="value">
            {{precent}}℃
            </div>
            </div>
        </div>
    </div>

</template>
<script>
import wepy from '@wepy/core';
// import config from '@/config';
wepy.component({
  name: 'CardSlider',
  props: {
    cardWidth: Number,
    typeName: String,
    type: String,
    typeValue: Number,
    minValue: Number,
    maxValue: Number
  },
  data: {
    progress: 0,
    buttonLeft: 0,
    precent: 0,
    min: 0,
    max: 0,
    startPoint: 0
  },
  watch: {
    cardWidth: {
      handler(val) {
        if (val) {
          const btnWidth = 32;
          this.max = this.cardWidth - btnWidth;
        }
      },
      immediate: true
    },
    typeValue: {
      handler(val) {
        if (!val) val = this.minValue;
        this.buttonLeft = parseInt((val - this.minValue) / (this.maxValue - this.minValue) * this.max);
        this.progress = this.buttonLeft;
        this.precent = val;
      },
      immediate: true
    }

  },

  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.maxValue - this.minValue) / this.max + this.minValue);
    },
    touchend() {
      this.$emit('silder-mouseEnd', this.precent)
    }
  }
})
</script>
