<template>
	<view class="m-slider" ref="slider" :style="{width: width + 'px'}">
		<view class="u-slider-rail"></view>
		<view class="u-slider-track" :style="{left: left +'px', width: (right - left) +'px'}"></view>
		<view style=" transform: translateX(-50%); " class="u-slider-handle" ref="right"
			@touchstart.stop.prevent="onRightMouseDown" @touchmove.stop.prevent="onRightMouseMove"
			:style="{left: right +'px'}">
			<view style="color: #F29F3D; font-size: 28upx;"> {{defalutFilletData}} </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'NumSlider',
		props: {
			min: { //滑动输入条最小值
				type: Number,
				default: 0
			},
			max: { //滑动输入条最大值
				type: Number,
				default: 100
			},
			initialMin: { //滑动输入条初始最小值，默认在最左侧
				type: Number,
				default: 0
			},
			width: { //滑动输入条在页面中的宽度
				type: Number,
				default: 600
			},
			disabled: { //是否禁用
				type: Boolean,
				default: false
			},
			range: { //是否双滑块模式
				type: Boolean,
				default: false
			},
			leftX: {
				type: Number,
				default: 120
			},
			defalutFillet: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				left: '', // 左滑块距离滑动条左端的距离
				right: '', // 右滑动距离滑动条左端的距离
				defalutFilletData: 0,
				initialMax: 0,
				filletScale: 1,
			}
		},
		computed: {
			scale() {
				return this.width / (this.max - this.min)
			},
			low() {
				return Math.round(this.left / this.scale + this.min)
			},
			high() {
				return Math.round(this.right / this.scale + this.min)
			}
		},
		watch: {
			low(to) {
				this.$emit('lowChange', to) // 左滑块对应数字回调
			},		 
			high(to) {
				this.defalutFilletData = Math.floor(to * this.filletScale);
				this.$emit('highChange', to)
			}
		},
		mounted() {
			this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
			this.right = (this.initialMax - this.min) * this.scale
		},
		methods: {
			//初始化默认圆角
			initFilletRadius(filletRadius, filletScale) {
				this.initialMax = filletRadius
				this.filletScale = filletScale
				this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
				this.right = (this.initialMax - this.min) * this.scale
				this.defalutFilletData =  Math.floor(filletRadius * filletScale)
			},

			onRightMouseMove(e) {
				var moveX = e.changedTouches[0].pageX - this.leftX
				if (moveX > this.width) {
					this.right = this.width
				} else if (moveX <= this.left) {
					this.right = this.left
				} else {
					this.right = moveX
				}
			},

			onRightMouseDown(e) { // 在滚动条上拖动右滑块
				e.preventDefault();
				var moveX = e.changedTouches[0].pageX - this.leftX
				if (moveX > this.width) {
					this.right = this.width
				} else if (moveX <= this.left) {
					this.right = this.left
				} else {
					this.right = moveX
				}
			},

			init() {
				this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
				this.right = (this.initialMax - this.min) * this.scale
			},

		},
	}
</script>
<style lang="less" scoped>
	@themeColor: #F29F3D;

	.m-slider {
		display: inline-block;
		height: 4px;
		padding: 6px 0;
		position: relative;
		z-index: 9;

		.u-slider-rail {
			position: absolute;
			z-index: 99;
			height: 4px;
			width: 100%;
			background: #f5f5f5;
			border-radius: 2px;
		}

		.u-slider-track {
			position: absolute;
			z-index: 99;
			background: #F29F3D;
			border-radius: 4px;
			height: 4px;
		}

		.u-slider-handle {
			//滑块
			position: absolute;
			z-index: 999;
			width: 25px;
			height: 25px;
			line-height: 27px;
			text-align: center;
			top: -8px;
			background: #fff;
			border: 4px solid #F29F3D;
			border-radius: 50%;
		}
	}

	.disabled {}
</style>
