<template>
  <view class="fj-slider-box" :style="{opacity:lading?1:0}">
    <view class="fj-slider">
      <view class="fj-value">
        <view class="fj-v-l">{{sMinValue}}</view>
        <view class="fj-v-r">{{sMaxValue}}</view>
      </view>
      <view
        class="fj-touch-left"
        @touchstart.stop="touchstart($event, 'min')"
        @touchmove.stop="touchmove($event, 'min')"
        @touchend.stop="touchend($event, 'min')"
        :style="{
        left:`${minLeft}px`,
        background: styleMainColor
      }"
      ></view>
      <view
        class="fj-touch-right"
        @touchstart.stop="touchstart($event, 'max')"
        @touchmove.stop="touchmove($event, 'max')"
        @touchend.stop="touchend($event, 'max')"
        :style="{
        left:`${maxLeft}px`,
        background: styleMainColor
      }"
      ></view>
      <view
        class="tip"
        :style="{
          left:`${tipLeft}px`,
          transform: `translateX(${(type === 'min'?'-': '')}24%)`,
          display: tipShow ? 'block' : 'none'
        }"
      >{{curValue + fillMinValue}}
      </view>
      <view
        class="fj-line-pull"
        :style="{
          left: `${minLeft + touchWidth}px`,
          width:`${maxLeft - (minLeft + touchWidth)}px`,
          background: styleMainColor
        }"
      ></view>
      <view class="fj-line" id="fj-line">
        <view v-if="lading" class="fj-line-left-b" style="left: -30rpx"></view>
        <view v-if="lading" class="fj-line-right-b" style="right: -30rpx"></view>
      </view>
    </view>
  </view>
</template>


<script type="javascript">
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';
  /**
   * XdRangeSlider 范围滑动选中值
   * @description 带加减按钮的数字输入框
   * @property {Number} fillValue 填充的值
   * @property {Number} fillMaxValue 填充的最大值
   * @property {Number} fillMinValue 填充的最小值
   * @property {Number} minValue 选中最小值
   * @property {Number} maxValue 选中最大值
   * @property {Number} step 每次滑动1%对应的增加减少的间隔值
   * @event {Function} start 触发touchstart方法 返回了原有的event信息, 并添加了custom对象
   * @event {Function} move 触发touchmove方法 返回了原有的event信息, 并添加了custom对象
   * @event {Function} end 触发touchend方法 返回了原有的event信息, 并添加了custom对象 获取值
   */

  export default {
  name:'XdRangeSlider',
  props: {
    fillMaxValue: {
      type: Number,
      default: 1000,
    },
    fillMinValue: {
      type: Number,
      default: 18,
    },
    minValue: {
      type: Number,
      default: 30,
    },
    maxValue: {
      type: Number,
      default: 888,
    },
    step: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    minValue(newVal){
      this.sMinValue = (newVal < this.fillMinValue ? this.fillMinValue: newVal);
      this.minLeft = this.sMinValue / this.percentage;
    },
    maxValue(newVal){
      this.sMaxValue = (newVal > this.fillMaxValue ? this.fillMaxValue : newVal);
      this.maxLeft = this.sMaxValue / this.percentage;
    }
  },
  data() {
    return {
      type: null,
      lading: false,
      fillValue: null, //区间之间最大值
      fillLeftMarginValue: null, //区间距离左边距占比
      tipShow:false, //显示提示框
      tipLeft:0, //提示框距离左侧距离

      minLeft: 0, //左滑动块距离左侧距离
      maxLeft: 0, //右滑动块距离左侧距离

      touchWidth:50, //点击图表宽度

      lineWidth:0, //线宽度
      lineLeft:0, //线距离左边框的距离

      curValue:0, //当前选中值
      sMinValue:0, //对应范围最小值
      sMaxValue:0, //对应范围最大值
      percentage: 0, //百分百比重
      movedisX: 0,
  
      styleMainColor: '', //插件主题风格样式

    };
  },
  
  async created() {
    this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
  },

  mounted(){
    setTimeout(()=>{
        this.fillValue = this.fillMaxValue - this.fillMinValue;
        this.touchWidth = this.touchWidth * this.$rpxNum;
        this.$xdUniHelper.getWindowHeight(['#fj-line'], this)
          .then((res) => {
            //fj-line
            let line = res['#fj-line'];
            this.lineWidth = line.width;
            this.lineLeft = line.left;
            this.maxLeft = this.lineWidth;
            this.percentage = this.fillValue / this.lineWidth;

            //输入选中值边界处理
            this.sMinValue = this.minValue < this.fillMinValue ? this.fillMinValue : this.minValue;
            this.sMaxValue = this.maxValue > this.fillMaxValue ? this.fillMaxValue : this.maxValue;

            this.minLeft = (this.sMinValue - this.fillMinValue) / this.percentage;
            this.maxLeft = (this.sMaxValue - this.fillMinValue) / this.percentage + this.touchWidth;
            this.lading = true
          }).catch()
    }, 500)
  },

  methods: {
    touchstart(e, type) {
      this.type = type;
      this.$emit('start', {
        ...e,
        custom:{
          type,
          minValue: this.sMinValue,
          maxValue: this.sMaxValue
        }
      })
    },
    touchmove(e, type) {
      const disX = this.movedisX =  e.touches[0].clientX - this.lineLeft;

      //左滑块
      if(type === 'min'){
        this.minLeft = Math.floor(disX);
        //计算相关数值
        if(this.minCount()) return;
      }

      //右滑块
      if(type === 'max'){
        this.maxLeft =  Math.ceil(disX);
        //计算相关数值
        if(this.maxCount()) return;
      }

      this.tipShow = true;
      this.tipLeft = Math[type === 'min' ? 'floor': 'ceil'](this.curValue / this.percentage);



      this.$emit('move', {
        ...e,
        custom:{
          type,
          minValue: this.sMinValue,
          maxValue: this.sMaxValue,
          curValue: this.curValue,
        }
      })
    },
    touchend(e, type) {
      console.log(e,'dadsadweweqw')
      //const disX = e.changedTouches[0].clientX - this.lineLeft;
      const disX = this.movedisX;
      if(type === 'min') {
        this.minCount(); //计算相关数值

        /**
         * @description 计算对应的最小值
         */
        const stepnum = Math.floor(((this.minLeft) * this.percentage) / this.step);
        this.sMinValue = stepnum * this.step + this.fillMinValue;

      }

      //右滑块
      if(type === 'max') {
        this.maxLeft = Math.ceil(disX);
        this.maxCount(); //计算相关数值
        this.tipShow = true;
        this.tipLeft = Math.ceil(this.curValue / this.percentage);

        /**
         * @description 计算对应的最大值
         */
        const stepnum = Math.ceil(((this.maxLeft - this.touchWidth) * this.percentage) / this.step);
        let sMaxValue = stepnum * this.step;
        if (this.fillValue - sMaxValue < this.step) {
          sMaxValue = this.fillValue
        }
        this.sMaxValue = sMaxValue + this.fillMinValue;
      }

      this.tipShow = false;

      let value = [this.sMinValue, this.sMaxValue];
      this.$emit('end', {
        ...e,
        value: value,
        custom:{
          type,
          minValue: this.sMinValue,
          maxValue: this.sMaxValue
        }
      });

      this.$emit('input', value);
    },

    /**
     * @description 左滑块计算位置
     */
    minCount() {
      if (this.minLeft < 0) {
        this.minLeft = 0;
        this.curValue = Math.floor(this.minLeft * this.percentage);
        return true;
      }
      if (this.maxLeft - this.minLeft <= this.touchWidth) {
        this.minLeft = this.maxLeft - this.touchWidth;
        this.curValue = Math.floor(this.minLeft * this.percentage);
        return true;
      }
      this.curValue = Math.floor(this.minLeft * this.percentage);
      return  false
    },

    /**
     * @description 右滑块计算位置
     */
    maxCount(){
      //右滑块滑到右边界
      if (this.maxLeft > (this.lineWidth + this.touchWidth)) {
        this.maxLeft = this.lineWidth + this.touchWidth;
        this.curValue = Math.ceil((this.maxLeft - this.touchWidth) * this.percentage);
        return true;
      }

      //右滑块滑到左边界
      if (this.maxLeft - this.minLeft <= this.touchWidth) {
        this.maxLeft = this.minLeft + this.touchWidth;
        this.curValue = Math.ceil((this.maxLeft - this.touchWidth) * this.percentage);
        return true;
      }
      this.curValue = Math.ceil((this.maxLeft - this.touchWidth) * this.percentage);
      return false
    }
  },
};
</script>


<style lang="scss" scoped>
$touchWidth: 50rpx; /** circle的宽度 */
view {
  box-sizing: border-box;
}
.fj-slider-box{
  padding-top:40rpx;


  .fj-v-l,.fj-v-r{position: absolute;font-size: 24rpx;top:-40rpx;}
  .fj-v-l{left:0}
  .fj-v-r{right:0}
}
.fj-slider {
  position: relative;
  height: $touchWidth;
  .fj-touch-left,
  .fj-touch-right {
    opacity: 1;
    position: absolute;
    height: $touchWidth;
    width: $touchWidth;
    border-radius: 25rpx;
    z-index: 201;
  }
  .tip{
    display: block;
    position: absolute;
    padding:10rpx 20rpx;
    background: rgba(0,0,0,0.6);
    color:#fff;
    top:-80rpx;
    border-radius: 10rpx;
    min-width:100rpx;
    text-align: center;
  }

  .fj-line ,.fj-line-pull {
    height: 6rpx;
    background: #999;
    margin-top: -5rpx;
    position: absolute;
    top: 50%;
    left: $touchWidth;
    right: $touchWidth;
    z-index:200;
  }
  .fj-line-pull{
    z-index: 202;
  }

  .fj-line-left-b, .fj-line-right-b {
    height: 100%;
    background: #999;
    position: absolute;
    top: 0;
    width: 100rpx;
  }
}
</style>




