<template>
	<view>
		<view class="jsuq guodu" v-if="show">
			<view class="leftsa">
				<view class="shu">数量</view>
				<view class="stringShow-kuai">
					<view v-for="(item,index) in stringShow" :key="index">
						{{item}}
					</view>
				</view>
				<view class="jiajian">
					<view class="jj" @click="jjnum(-1)" @touchstart="handleTouchStart(-1)" @touchend="handleTouchEnd">
						-
					</view>
					<view class="jj" @click="jjnum(1)" @touchstart="handleTouchStart(1)" @touchend="handleTouchEnd">
						+
					</view>
				</view>
			</view>
			<view class="rigsbt">
				<view class="calculator-father">
					<view v-for="(item,index) in calculatorArray" :key="index">
						<view class="calculator-kuai" v-if="item==`AC`" @click="clickKuai(item,index)">
							<image src="/static/cleanone.png" mode="aspectFill"
								style="width: 50%;height: 50%;margin-left: -5rpx;"></image>

						</view>
						<view class="calculator-kuai" v-else-if="item==`AE`" style="font-size: 1.2vw;color: #0385FA;"
							@click="clickKuai(item,index)">
							同步
						</view>
						<view class="calculator-kuai" v-else @click="clickKuai(item,index)">
							{{item}}
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryQld } from '../api/lunpan.js'
	const stringShow = ref("0000");
	const relNumber = ref(0);
	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "AC", "AE"];
	const props = defineProps({
		show: {
			type: Boolean
		},
		tb: {
			type: Number
		},
		idex: {
			type: Number
		},
		pdsl: {
			type: Number
		},
		pddType: {
			type: String
		}
	});
	watch(() => props.show,
		() => {
			if (props.show == true) {
				relNumber.value = props.pdsl ? props.pdsl : 0;
				stringShow.value = toFixed4ByPadStart(relNumber.value);
				isZero.value = false
			} else {
				relNumber.value = 0;
				stringShow.value = toFixed4ByPadStart(relNumber.value)
			}
		})
	const emit = defineEmits(['pddjjnum'])
	const isZero = ref(false);
	const clickKuai = (item : any, index : number) => {
		if (props.pddType != '1') { return }
		if (item == "AE") {
			relNumber.value = props.tb;
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			emit('pddjjnum', relNumber.value, props.idex);
			return
		}
		if (item == "AC") {
			relNumber.value = Math.trunc(relNumber.value / 10)
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			emit('pddjjnum', relNumber.value, props.idex);
			return
		}
		if (isZero.value == false) {
			isZero.value = true;
			relNumber.value = item;
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			emit('pddjjnum', relNumber.value, props.idex);
			return
		}
		if (digitCountByString(relNumber.value) > 3) {

		} else {
			if (!relNumber.value) {
				relNumber.value = item
			} else {
				relNumber.value = relNumber.value * 10 + item;
			}
			emit('pddjjnum', relNumber.value, props.idex);
			stringShow.value = toFixed4ByPadStart(relNumber.value)
		}

	}
	const InteroutId = ref(null)
	let longPressTimer = null;
	let longPressed = false;
	const handleTouchStart = (e : number) => {
		if (props.pddType != '1') { return }
		longPressed = false;
		if (longPressTimer) {
			clearTimeout(longPressTimer);
			longPressTimer = null;
		}
		longPressTimer = setTimeout(() => {
			longPressTimer = null;
			longPressed = true;
			Interval(e)
		}, 800); // 1000ms = 1s
	}
	const handleTouchEnd = () => {
		if (longPressTimer) {
			clearTimeout(longPressTimer);
			longPressTimer = null;
			// console.log('未达到 1 秒：取消长按');
			return;
		}

		// 如果已经触发过长按
		if (longPressed) {
			// console.log('长按已触发，用户放手');
			clearInterval(InteroutId.value);
			longPressed = false; // 重置状态（按需）
		} else {
			console.log('无效状态（通常不会到这）');
		}
	}
	const Interval = (e : number) => {
		InteroutId.value = setInterval(() => {
			jjnum(e);
		}, 120);
	}
	const jjnum = (e : number) => {
		if (props.pddType != '1') { return }
		let num = 9999;
		if (num <= relNumber.value && e == 1) { relNumber.value = num; return }
		if (relNumber.value <= 0 && e == -1) { relNumber.value = 0; return }
		relNumber.value += e;
		stringShow.value = toFixed4ByPadStart(relNumber.value)
		emit('pddjjnum', relNumber.value, props.idex)
	}
	function digitCountByString(n) {
		const s = Math.abs(n).toString();
		return s.length;
	}
	function toFixed4ByPadStart(n) {
		const intPart = Math.floor(Math.abs(n));
		return String(intPart).padStart(4, '0');
	}
</script>

<style scoped lang="less">
	.jsuq {
		width: 44.4vw;
		display: flex;
		height: 16vw;
		justify-content: space-between;
		// background-color: red;
		margin-top: -2vw;

		.rigsbt {
			width: 19vw;
			height: 100%;
			margin-right: 8vw;
			// background-color: blue;

			.calculator-father {
				width: 23vw;
				height: 90%;
				margin: 0 auto 0;
				flex-wrap: wrap;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;


				.calculator-kuai {
					display: flex;
					justify-content: center;
					align-items: center;
					background: url('/static/index/procurement/bt.png') no-repeat;
					background-size: 100% 100%;
					font-size: 1.5vw;
					font-weight: 500;
					width: 5vw;
					height: 4vw;
				}

				.calculator-kuai:active {
					background: linear-gradient(to bottom, #00C9FF, #0076FF);
					color: #fff !important;
					font-weight: 500;
					border-radius: 1.5vw;
					display: flex;
					justify-content: center;
					align-items: center;
					background-size: 100% 100%;
					font-size: 1.5vw;
					width: 5vw;
					height: 4vw;
				}
			}
		}

		.leftsa {
			width: 12vw;
			height: 80%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			padding: 0 1.5vw;
			margin-left: 2.5vw;

			.shu {
				font-weight: 400;
				font-size: 1.2vw;
				color: #222222;
			}

			.stringShow-kuai {
				display: flex;
				align-items: center;
				width: 9vw;
				height: 3.4vw;
				background: #F3F5F9;
				border-radius: 1vw;
				border: 1px solid #CBCFD0;
				justify-content: space-around;
				box-shadow: 0rpx 0.1vw 0.3vw 0rpx rgba(140, 143, 153, 0.17) inset;

				view {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 1.7vw;
					font-weight: 500;
					width: 2.2vw;
					height: 3.4vw;
				}
			}

			.jiajian {
				display: flex;
				justify-content: space-between;

				.jj {
					width: 4.2vw;
					height: 4.2vw;
					margin: 0 1vw;
					display: flex;
					justify-content: center;
					align-items: center;
					background: url('/static/index/procurement/bt.png') no-repeat;
					background-size: 100% 100%;
					border-radius: 25rpx;
					font-size: 36rpx;
				}

				.jj:active {
					background: linear-gradient(to bottom, #00C9FF, #0076FF);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #DCDCEE;
					font-weight: 500;
				}
			}

		}
	}
</style>