<template>
	<view class="plsbuy-contain" v-if="show">
		<view class="gys">
			<view class="tlt">供应商</view>
			<view class="gssel" @click="gysflag = true">
				<view>
					{{gysarr[gysidnum]?.name}}
				</view>
				<text  @click.stop="gysflag = !gysflag">调整</text>
			</view>
			<view class="tanchu" v-if="gysflag">
				<scroll-view scroll-y="true" class="gysscrol">
					<view v-for="(v,i) in gysarr" :key='i' :class="gysidnum==i?'acts':''" @click="gysid(i)">
						<text>{{v.name}}</text>
						<image src="/static/index/warehouse/procurement/d.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="calculator-father">
			<view v-for="(item,index) in calculatorArray" :key="index">
				<view :class="blueNumber == index ? `calculator-kuai-target` : ``" class="calculator-kuai"
					@click="clickKuai(item,index)">
					{{item}}
				</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" >
					{{item}}
				</view>
					
			</view>
			<view class="jj"  @click="jjnum(1)" @longpress="handleTouchStart(1)" @touchend="handleTouchEnd">
				+
			</view>
		</view>
		<view class="plsbuy-bottom">
			<view class="quxiao"  @click="colse">
				取消
			</view>
			<view class="plsbuy-bottom-blue" @click="closeIt">
				确定
			</view>
			
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		computed,
		nextTick,
		watch
	} from 'vue';
	const emit = defineEmits(['right','colse','jjnum'])
	const blueNumber = ref(-1);
	const gysflag = ref(false)
	const gysarr = ref([])
	const gysidnum = ref(0)
	const props = defineProps({
		doOnce: {
			type: Number,
			required: true,
		},
		translateNumber: {
			type: Number,
			required: true,
		},
		show: {
			type: Boolean,
			default:false,
			required: true,
		},
		caigouobj:{
			type:Object,
			required: true,
		}
	});

	watch(
		() => props.doOnce,
		() => {
			relNumber.value = props.translateNumber
			stringShow.value = toFixed4ByPadStart(relNumber.value)
		}
	)
	watch(
		()=>props.show,
		()=>{
			if(props.show){
				console.log(props.caigouobj)
				let n = [];
				let id = [];
				gysarr.value = [];
				n = props.caigouobj.suppliers_dictText.split(/[, ]+/);
				id = props.caigouobj.suppliers.split(/[, ]+/);
				n.forEach((item,i)=>{
					gysarr.value.push({'name':item,'id':id[i]})
				})
			}else{
				gysflag.value = false;
			}
	})
	const gysid = (e:number)=>{
		gysidnum.value = e;
		gysflag.value = false;
	}
	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "CE"];
	const stringShow = ref("0000");
	const relNumber = ref(0);
	// const isZero = ref(false);
	const clickKuai = (item : any, index : number) => {
		blueNumber.value = index;
		setTimeout(() => {
			blueNumber.value = -1
		}, 300)
		if (item == "AC") {
			relNumber.value = 0;
			stringShow.value = "0000"
			return
		}
		if (item == "CE") {
			relNumber.value = Math.trunc(relNumber.value / 10)
			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)=>{
		emit('jjnum',e)
	}
	const closeIt = () => {
		emit('right', relNumber.value,gysarr.value[gysidnum.value])
	}
	const colse = ()=>{
		emit('colse')
	}
	// 这个方法是查看数字有多少位
	function digitCountByString(n) {
		// 先处理负数
		const s = Math.abs(n).toString();
		// 若不想统计小数点，可去掉小数点后再取长度：
		// return s.replace('.', '').length;
		return s.length;
	}
	// 这个方法是将Number转为String
	function toFixed4ByPadStart(n) {
		// 1. 取绝对值并向下取整，防止小数和负号影响
		const intPart = Math.floor(Math.abs(n));
		// 2. 转字符串并 padStart 到长度 4，不足时前面补 '0'
		return String(intPart).padStart(4, '0');
	}
</script>

<style lang="less" scoped>
	.gys{
		width: 100%;
		height: 8vw;
		position: relative;
		>.tanchu{
			width: 25vw;
			height: 7vw;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174,175,176,0.35);
			border-radius: 1.1vw;
			padding: 0 1.4vw;
			position: absolute;
			right: 7.2vw;
			top: 7vw;
			.gysscrol{
				width: 100%;
				height: 7vw;
				.acts{
					color: #0385FA !important;
					image{
						display: block;
					}
				}
				view{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 400;
					font-size: 1vw;
					color: #666666;
					margin-bottom: 0.9vw;
					&:nth-child(1){
						margin-top: 0.9vw;
					}
					image{
						width: 1vw !important;
						height: 0.7vw !important;
						display: none;
					}
				}
			}
			
		}
		.gssel{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 1vw;
			text{
				width: 7.1vw;
				height: 3.3vw;
				background: linear-gradient(-45deg, rgba(223, 244, 252, 0.43), rgba(204, 228, 249, 0.43));
				border-radius: 1.65vw;
				border: 1px solid #1083F8;
				font-weight: 400;
				font-size: 1.5vw;
				color: #1083F8;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			>view{
				width: 22vw;
				height: 3.3vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 400;
				font-size: 1.6vw;
				color: #555555;
				line-height: 3.3vw;
			}
		}
		.tlt{
			font-weight: bold;
			font-size: 1.8vw;
			color: #333333;
		}
	}
	.plsbuy-contain {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 36vw;
		height: 90vh;
		background: rgba(250, 251, 252, 1);
		overflow: hidden;
		box-shadow: 0rpx 0rpx 1.6vw 0rpx rgba(136,141,153,0.28);
		border-radius: 2.2vw;
		top: 5vw;
		left: 32vw;
		position: fixed;
		z-index: 200;
		padding: 2.8vw;
	}


	.plsbuy-bottom {
		width: 90%;
		margin-top: 4.5vw;
		height: 70rpx;
		display: flex;
		justify-content: flex-end;
		font-size: 35rpx;
		view{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 9vw;
			height: 3.8vw;
			color: rgba(92, 121, 146, 1);
			border-radius:1.6vw;
			font-size: 1.8vw;
			border: 1px solid #A2B4CF;
			margin-left: 1vw;
		}
		.quxiao{
			background: #FFFFFF;
		}
		.plsbuy-bottom-blue {
			background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
			border: 1px solid rgba(3,133,250,0.34);
			background: linear-gradient(-61deg, #EAF5FF, #CBE7FF);
		}
	}

	.calculator-father {
		width: 24vw;
		height: 57%;
		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%;
			border-radius: 25rpx;
			font-size: 42rpx;
			font-weight: 500;
			margin: 15rpx 20rpx 0 20rpx;
			width: 6.1vw;
			height:  6.1vw;
		}
		.calculator-kuai:active{
			background: linear-gradient(to bottom, #00C9FF, #0076FF);
			color: #fff;
			font-size: 45rpx;
			font-weight: 500;
		}
	}

	.stringShow-father {
		width: 100%;
		height: 70rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		.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: 25rpx;
			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: 25rpx;
			font-size: 45rpx;
			font-weight: 500;
		}
		.stringShow-kuai {
			display: flex;
			align-items: center;
			width: 18.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:3.5vw;
				height: 5vw;
			} 
		}
	}

	.qinggou-font {
		font-size: 27rpx;
		font-weight: 500;
		margin: 1.4vw auto;

	}
</style>