<template>
	<view class="warpper">
		<view class="minus-box" @tap="minusTap">
			－
		</view>
		<view class="" style="padding: 0rpx 4rpx;">
			<uni-easyinput 
			:inputBorder="false" 
			class="quantity-input" 
			type="number" 
			:value="value" 
			placeholder="请输入"
			 @blur="blur"
			@confirm="confirm"
			></uni-easyinput>
		</view>
		<view class="minus-box" @tap="addTap">
			<uni-icons size="16" type="plusempty" color="#007AFF"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
			}
		},
		methods: {
			blur(e) {
				 this.$emit('change', e.detail.value)
			},
			confirm(value) {
				if (value.trim()) {
				  this.$emit('change', value)
				}
			},
			minusTap() {
				if(this.value == 0){
					return
				}
				this.value--
			},
			addTap() {
				this.value++
			}
		}
	}
</script>

<style lang="scss">
	.warpper{
		display: flex;
		flex-direction: row;
		align-items: center;
		.minus-box {
			width: 64rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #F2F3F5;
			border-radius: 8rpx;
			color: #007AFF;
		}
		.quantity-input {
			width: 120rpx;
			height: 64rpx;
			background: #F2F3F5;
			
		}
	}
</style>
