<template>
	<view class="flex align-center margin-top-xs font30 height-com">
		<image :src="reduceState === true ? reduceImg : reduceDisableImg" class="i-reduce" @tap="tapReduce"></image>
		<input type="number" style="width: 100rpx;text-align: center;" v-model="number" />
		<image :src="addState === true ? addImg : addDisableImg" class="i-add" @tap="tapAdd"></image>
	</view>
</template>

<script>
	import i_reduce_check from '../static/img/hcdb/i-reduce-check.png'
	import i_reduce from '../static/img/hcdb/i-reduce.png'
	import i_add_check from '../static/img/hcdb/i-add-check.png'
	import i_add from '../static/img/hcdb/i-add.png'
	export default {
		props: {
			inputNum: {
				type: [Number, String],
				default: 0
			},
			index: {
				type: Number
			}
		},
		data() {
			return {
				reduceImg: i_reduce_check,
				reduceDisableImg: i_reduce,
				addImg: i_add_check,
				addDisableImg: i_add,
				minNumber: 0,
				maxNumber: 100000,
				reduceState: false,
				addState: false,
				number: 0
			};
		},
		created() {
			this.number = +this.inputNum;
		},
		watch: {
			// 检测number变化
			number(newVal, oldVal) {
				if (+newVal !== +oldVal) {
					let a = null;
					if (this.index != undefined) {
						a = [this.index, newVal];
					} else {
						a = newVal;
					}
					this.$emit('updateNum', a);
				}
			}
		},
		methods: {
			tapReduce() {
				if (this.number == this.minNumber) {
					return;
				}
				this.number--;
				this.reduceState = true;
				this.addState = false;
			},
			tapAdd() {
				if (this.number == this.maxNumber) {
					return;
				}
				this.number++;
				this.reduceState = false;
				this.addState = true;
			}
		}
	};
</script>

<style lang="less" scoped>
	.i-reduce,
	.i-add {
		width: 44rpx;
		height: 44rpx;
	}
</style>