<template>
	<view>
		<view class="mengban" @click="emit('fill')" v-if="show"> </view>
		<view class="takitem guodu"  :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
			<view class="tit">
				请领物料
			</view>
			<view class="cont">
				<view class="zuo">
					<view class="carp">
						<view class="zuoimg tp">
							<image :src="objtake.materialImg?serverUrl+objtake.materialImg:'/static/index/procurement/k.png'" mode="aspectFill"/>
						</view>
						<view class="youcont">
							<view>{{objtake.materialName}}</view>
							<view>
								<view>
									物料编码
									<text>{{objtake.materialNo}}</text>
								</view>
								<view>
									请购单位
									<text>{{objtake.materialUnits}}</text>
								</view>
							</view>
							<view>
								<view>
									规格型号
									<text style="white-space: nowrap;">{{objtake.specificationModel}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="qinggou-font">
						数量 
					</view>
					<view class="stringShow-father">
						<view class="jj" @click="jjnum(-1)" @longpress="handleTouchStart(-1)" @touchend="handleTouchEnd">
							-
						</view>
						<view class="stringShow-kuai">
							<view  v-for="(item,index) in stringShow" :key="index" :style="sx==true?'color: red':''">
								{{item}}
							</view>
								
						</view>
						<view class="jj" @click="jjnum(1)" @longpress="handleTouchStart(1)" @touchend="handleTouchEnd">
							+
						</view>
					</view>
					
				</view>
				<view class="you">
					<view class="calculator-father">
						<view v-for="(item,index) in calculatorArray" :key="index">
							<view  class="calculator-kuai"
								@click="clickKuai(item,index)">
								{{item}}
							</view>
						</view>
					</view>
					<view class="plsbuy-bottom">
						<view class="quxiao"  @click="emit('fill')">
							取消
						</view>
						<view class="plsbuy-bottom-blue" @click="closeIt">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick,  watch, reactive } from 'vue';
	const props = defineProps({
		objtake: {
			type: Object,
			required: true 
		},
		show: {
			type: Boolean
		} 
	})
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const emit = defineEmits([ 'fill' ,'right'])
	const showbox = ref(false)
	watch(()=>props.show,
		()=>{
			if(props.show==true){
				relNumber.value = 1;
				stringShow.value = toFixed4ByPadStart(relNumber.value)
				setTimeout(()=>{
					showbox.value = true
				},50)
			}else{
				showbox.value = false;
				isZero.value = false;
			}
		})
		const sx = ref(false)
		 
		const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "AE"];
		const stringShow = ref("0000");
		const relNumber = ref(1);
		const isZero = ref(false);
		const clickKuai = (item : any, index : number) => {
			if (item == "AC") {
				relNumber.value = 0;
				stringShow.value = "0000";
				return
			}
			if (item == "AE") {
				relNumber.value = Math.trunc(relNumber.value / 10)
				stringShow.value = toFixed4ByPadStart(relNumber.value);
				return
			}
			if(isZero.value == false){
				isZero.value = true;
				relNumber.value = item;
				stringShow.value = toFixed4ByPadStart(relNumber.value);
				return
			}
			if (digitCountByString(relNumber.value) > 3) {
		
			} else {
				if (!relNumber.value) {
					relNumber.value = item
				} else {
					relNumber.value = relNumber.value * 10 + item;
				}
				stringShow.value = toFixed4ByPadStart(relNumber.value)
			}
		}
		const InteroutId = ref(null)
		const handleTouchStart = (e:number)=> {
			Interval(e)
		}
		const handleTouchEnd=()=> {
		  clearInterval(InteroutId.value);
		  // 清除定时器
		}
		const Interval = (e:number)=>{
			InteroutId.value = setInterval(() => {
			  jjnum(e); 
			}, 120); 
		}
		const jjnum = (e:number)=>{
			let num = 9999;
			if(relNumber.value>=num&&e==1){relNumber.value = num; return}
			if(relNumber.value<=1&&e==-1){relNumber.value = 1; return}
			relNumber.value+=e;
			stringShow.value = toFixed4ByPadStart(relNumber.value)
			// emit('jjnum',e)
		}
		const closeIt = () => {
			emit('right', relNumber.value,props.objtake )
		}
		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">
	       .takitem{
			   width: 53.3vw;
			   height: 36vw;
			   background: rgba(255, 255, 255, 0.98);
			   box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163,167,182,0.16);
			   border-radius: 1.6vw;
			   position: fixed;
			   z-index: 100;
			   top: 13vw;
			   right: 23.4vw;
			   padding: 2vw;
			   .you{
				   .plsbuy-bottom {
				   	width: 100%;
				   	margin-top: 3vw;
				   	height: 7vw;
				   	display: flex;
				   	justify-content: flex-end;
				   	font-size: 35rpx;
				   	view{
				   		display: flex;
				   		justify-content: center;
				   		align-items: center;
				   		width: 9.1vw;
				   		height: 3.8vw;
				   		color: rgba(92, 121, 146, 1);
				   		border-radius:1.9vw;
				   		font-size: 1.8vw;
				   		border: 1px solid #EDEDEF;
				   		margin-left: 1vw;
				   	}
				   	.quxiao{
				   		background: #EDEDEF;
				   	}
				   	.plsbuy-bottom-blue {
				   		background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
				   		border: 1px solid rgba(3,133,250,0.34);
				   		color: #0385FA;
				   	}
				   }
				   .calculator-father {
				   	width: 19vw;
				   	height: 20vw;
				   	margin :0 auto 0;
				   	flex-wrap: wrap;
				   	display: grid;
				   	grid-template-columns: 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: 42rpx;
				   		font-weight: 500;
				   		margin: 12rpx 20rpx 0 20rpx;
				   		width: 4.4vw;
				   		height:  4.4vw;
				   	}
				   	.calculator-kuai:active{
				   		background: linear-gradient(to bottom, #00C9FF, #0076FF);
				   		color: #fff;
				   		font-size: 45rpx;
				   		font-weight: 500;
				   		border-radius: 1.6vw;
				   	}
				   }
			   }
			   .stringShow-father {
			   	width: 100%;
			   	height:7vw;
			   	margin-top:0.5vw;
			   	display: flex;
			   	align-items: center;
			   	justify-content: flex-end;
			   	.jj{
			   		width: 5vw;
			   		height: 5vw;
			   		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: 45rpx;
			   		font-size: 42rpx;
			   	}
			   	.jj:active{
			   		background: linear-gradient(to bottom, #00C9FF, #0076FF);
			   		color: #fff;
			   		display: flex;
			   		justify-content: center;
			   		align-items: center;
			   		background-color: #DCDCEE;
			   		border-radius: 45rpx;
			   		font-size: 45rpx;
			   		font-weight: 500;
			   	}
			   	.stringShow-kuai {
			   		display: flex;
			   		align-items: center;
			   		width: 11.5vw;
			   		height: 5vw;
			   		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: 42rpx;
			   			font-weight: 500;
			   			width:2.5vw;
			   			height: 5vw;
			   		} 
			   	}
			   }
			   .qinggou-font {
					font-size: 1.4vw;
					font-weight: 500;
					text-align: center;
				}
				
			   .cont{
				   width: 100%;
				   height: 26.5vw;
				   display: flex;
				   justify-content: space-between;
				   padding-top: 1.7vw;
				   .zuo{
					   width: 27vw;
					   height: 100%;
					   .carp{
						 width: 100%;
						 height: 16vw;
						 display: flex;
						 justify-content: space-between;
						 padding-top: 1.8vw;
						 .youcont{
							 width: 17vw;
							 height: 100%;
							 >view{
								 &:nth-child(2),&:nth-child(3){
									 width: 100%;
									 height: 3.6vw;
									 display: flex;
									 justify-content: space-between;
									 margin-top: 1.8vw;
									 >view{
										 font-weight: 400;
										 font-size: 1.1vw;
										 color: #888888;
										 display: flex;
										 flex-direction: column;
										 justify-content: space-between;
										 text{
											 font-weight: 300;
											 font-size: 1.4vw;
											 color: #222222;
										 }
									 }
								 }
								 &:nth-child(1){
									 width: 17vw;
									 height: 1.8vw;
									 font-weight: bold;
									 font-size: 1.6vw;
									 color: #222222;
									 white-space: nowrap;
									 text-overflow: ellipsis;
									 overflow: hidden;
									 line-height: 1.8vw;
								 }
							 }
						 }
						 .zuoimg{
							 width: 8vw;
							 height: 8vw;
							 image{
								 width: 100%;
								 height: 100%;
							 }
						 }
						 
					   }
				   }
			   }
			   
			   .tit{
				   width: 100%;
				   height: 2.6vw;
				   border-bottom: 1px solid #E5E5E5;
				   font-weight: 400;
				   font-size: 1.6vw;
				   color: #333333;
				   line-height: 2.1vw;
			   }
		   }
	.mengban{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 20;
		top: 0;
		left: 0;
		background: RGBA(239, 240, 244, 0.55);
	}
	.hei0 {
		height: 0 !important;
		view{
			height: 0 !important;
		}
	}
	.unclass {
		opacity: 0 !important;
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch; 
	}
</style>
