/*
	该步进器可以设置整数是否、最大数、最小数、步进数，支持负数，小数
*/

<template>
	<view class="number-box">
		<view class="minus"  :class="{'disabled':selfValue<=min}">
			<u-icon name="minus"  size="28" @click="minusClick"></u-icon>
		</view>
		<input class="self-input" type="number" v-model="selfValue" @blur="inputValue"/>
		<view class="plus"  :class="{'disabled':selfValue>=max}">
			<u-icon name="plus"  size="28"  @click="plusClick"></u-icon>
		</view>
	</view>
</template>

<script>
	// 这里引入js精度运算方法
	import {numAdd,numSub} from '@/static/common/js/js-calculate.js'
	export default{
		data(){
			return{
				selfValue: 0
			}
		},
		props:{
			// 最小值
			min:{
				type:Number,
				default:-99999
			},
			// 最大值
			max:{
				type:Number,
				default:99999
			},
			// 默认值
			value:{
				type:Number,
				default:0
			},
			// 是否为整数值
			integer: {
				type:Boolean,
				default:true
			},
			// 步长
			step: {
				type:Number,
				default:1
			},
		},
		watch: {
			selfValue() {
				if (this.value != this.selfValue) {
					this.$emit('changeValue', this.selfValue)
				}
			},
			value(){
				if (this.value != this.selfValue) {
					this.selfValue = this.value
				}
			}
		},
		methods:{
			// 输入框变化时
			inputValue(event){
				let val =  event.detail.value;
				if(this.integer){
					val =  val.replace(/[^0-9]/g, '');
				}
				if(val <= this.min){
					val = this.min;
				}
				if (val >= this.max) {
					val = this.max;
				}
				this.$nextTick(() => {
					this.selfValue = val;
				})
				
			},
			// 点击减
			minusClick(){
				console.log(this.selfValue)
				if (this.selfValue <= this.min) {
					this.selfValue = this.min
					return
				}else if (this.selfValue > this.max) {
					this.selfValue = this.max
					return
				}
				this.selfValue = numSub(this.selfValue,this.step);
			},
			// 点击加
			plusClick(){
				if (this.selfValue < this.min) {
					this.selfValue = this.min
					return
				}else if (this.selfValue >= this.max) {
					this.selfValue = this.max
					return
				}
				this.selfValue = numAdd(this.selfValue,this.step);
			},
		}
	}
</script>

<style>
	.number-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.minus,.plus{
		flex: 1;
		height: 100%;
		background: #f5f7fa;
		border: 1px solid #DCDFE6;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.disabled{
		background: #f8f8f8;
		color: #ccc;
	}
	.self-input{
		width: 120rpx;
		height: 100%;
		background: #fff;
		text-align: center;
		line-height: 100%;
		color: #333;
	}
</style>
