<template>
	<view>
		<scroll-view scroll-y="true" class="itembox" scroll-with-animation @scrolltolower="scrolltolower()" enable-back-to-top>
			<view class="box">
				<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
					<scroll-view class="carditem guodu" @touchend="handleTouchEnd($event,v,index)"
						@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
						:scroll-left="v.scrollleft" @scroll="scroll" >
						<view class="zding" v-if="v.zhiDingId">
							<image src="/static/index/procurement/zd.png" mode="aspectFill"></image>
						</view>
						<view class="speitem guodu" >
							<image :src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
								mode="aspectFill">
							</image>
							<view class="cardp">
								<view v-if="v.materialInfo.categoryName">{{v.materialInfo.categoryName}}</view>
								<view v-if="v.materialInfo.typeName">{{v.materialInfo.typeName}}</view>
							</view>
						</view>
						<view class="msitem guodu" >
							<view>
								<view>{{v.materialInfo.materialName}}</view>
							</view>
							<view>
								<text  style="white-space: nowrap;"> 规格型号: </text>
								<view>{{v.materialInfo.specificationModel}}</view>
							</view>
							<view>
								<view>
									<text>{{v.qlNum?v.qlNum:'--'}}</text>
									<text>退货数量</text>
								</view>
								<view>
									<text>{{v.materialInfo.materialUnits}}</text>
									<text>退货单位</text>
								</view>
							</view>
						</view>
						<view class="add" >
							<view v-if="v.isAdd==1">已添加</view>
							<!-- <image v-if="v.isAdd!=1" :src="'/static/index/procurement/+.png'" mode="aspectFill"></image>
							<image v-if="v.isAdd==1" :src="'/static/index/procurement/-.png'" mode="aspectFill"></image> -->
						</view>
						<view class="zkadd guodu" v-if="status<2">
							<view @click.stop="comfig(v,index,1)" @touchend.stop>
								添加物料
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</scroll-view>
		<taking :show="tuihuoshow" :objtake="tuihuoobj"  @fill="tuihuoshow = false" @right="right"></taking>
		
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick,  watch, reactive } from 'vue';
	import taking from './takeing.vue'
	const props = defineProps({
		InvoicingList: {
			type: Array,
			required: true 
		},
		status: {
			type: String
		} 
	})
	const carnum = ref(0)
	const caigouobj = ref({})
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const emit = defineEmits([ 'scrolltolower' ,'comfig'])
	
	const pageX = ref(0);
	const pageY = ref(0);
	const ones = ref(true)
	const touchstart = (event : any, v : any,i:number) => {
		caigouobj.value = v;
		pageX.value = event.changedTouches[0].pageX;
		pageY.value = event.changedTouches[0].pageY;
		if(ones.value){
			ones.value = false;
			solleft(v, i)
		}
	}
	const tuihuoshow = ref(false)
	const tuihuoobj = ref({})
	const comfig=(v,i,t)=>{
		tuihuoobj.value = v;
		tuihuoshow.value = true;
		
		// emit('comfig',v,i,t)
	}
	const right = (e,v) =>{
		emit('comfig',e,v);
		tuihuoshow.value = false;
	}
	const handleTouchEnd = (event : any, v : any, i : number) => {
		let y = event.changedTouches[0].pageY;
		let x = event.changedTouches[0].pageX;
		let absx = Math.abs(x - pageX.value)
		let absy = Math.abs(y - pageY.value);
		ones.value = true;
		if (absy > 30 && absx+10<absy) {
			caigouobj.value.scrollleft = 0.01
			setTimeout(()=>{
				caigouobj.value.scrollleft = 0
			},20)
			return
		}
		if (absx < 10 && absy < 10) {
			 if(caigouobj.value.zk==false){
				 setTimeout(()=>{
					caigouobj.value.scrollleft = 0
				 },20)
			 }
			return
		}
		if(scrollLeft.value <=40){
			caigouobj.value.scrollleft = scrollLeft.value;
			caigouobj.value.zk = false;
			nextTick(()=>{
				caigouobj.value.scrollleft = 0;
				scrollLeft.value = 0;
			})
		}else{
			scrollLeft.value = 150
			caigouobj.value.scrollleft = scrollLeft.value;
			caigouobj.value.zk = true;
		}
		caigouobj.value.zk = x > pageX.value ? false : true;
		caigouobj.value.scrollleft = caigouobj.value.zk ? 150 : 0;
	}
	const solleft = (v : any, i : number) => { 
		console.log(v)
		props.InvoicingList.forEach((item, k) => {
			if (k != i&&item.zk==true) {
				item.zk = false;
				item.scrollleft = 0; 
			}
		})
	}
	const scrolltolower = () => {
			emit('scrolltolower')
	}
	const scrollLeft = ref(0)
	const scroll = (e)=>{
		scrollLeft.value = e.detail.scrollLeft
		// console.log(e.detail.scrollLeft)
	}
</script>

<style scoped lang="less">
	.zkadd {
		width: 9vw;
		height: 100%;
		display: inline-flex;
		justify-content: flex-end;
		position: absolute;
		top: 0;
		right: -9vw;
		view:active{
			background:rgba(85, 166, 249, 1) !important;
			color: #FFFFFF !important;
		}
		>view {
			width: 3.6vw;
			height: 100%;
			font-weight: 400;
			font-size: 1.3vw;
			display: flex;
			justify-content: center;
			align-items: center;
			writing-mode: vertical-rl;
			text-orientation: upright;
			letter-spacing:2px;
			background:rgba(85, 166, 249, 1) !important;
			color: #FFFFFF !important;
		}
	}
	
	.add {
		width:5vw;
		height: 13vw;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top:0;
		right:0.8vw;
		>view {
			width: 4.5vw;
			height: 1.8vw;
			background: #E3EEF7;
			border-radius: 0.9vw;
			border: 1px solid rgba(3, 133, 250, 0.34);
			font-weight: 400;
			font-size: 1.1vw;
			color: #1083F8;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0.8vw;
			right: 0vw;
		}
	
		image {
			width: 3vw;
			height: 3vw;
			position: absolute;
			bottom: 0.8vw;
			right: 0vw;
		}
	}
	.msitem {
		width: 11.5vw;
		height: 100%;
		position: absolute;
		top:0;
		left: 10vw;
		>view {
			margin-top: 0.25vw;
	
			&:nth-child(3) {
				width: 100%;
				height: 3.4vw;
				display: flex;
				justify-content: space-between;
				>view {
					width: 50%;
					height: 100%;
					display: flex;
					flex-direction: column;
					position: relative;
					margin-top:1vw;
					white-space: nowrap;
					&:nth-child(1){
						padding-right: 1.7vw;
						align-items: flex-start;
					}
					&:nth-child(2){
						padding-left: 1.7vw;
						align-items: flex-start;
					}
					&:nth-child(1)::after {
						content: '';
						position: absolute;
						right: 0;
						width: 100%;
						height: 2.2vw;
						border-right: 1px solid #C9C9C9;
						top: 0.6vw;
					}
	
					text {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.7vw;
							color: #555555;
						}
	
						&:nth-child(2) {
							font-weight: 400;
							font-size: 1.1vw;
							color: #999999;
							white-space: nowrap;
						}
					}
				}
			}
	
			&:nth-child(2)  {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-top: 0.1vw;
				view{
					font-size: 1.4vw;
					color: #888888;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
	
				text {
					font-weight: 400;
					font-size: 1.1vw;
					color: #777777;
					margin-top: 0.25vw;
				}
			}
	
			&:nth-child(1) {
				view{
					display: inline-block;
					width: 10vw;
					font-weight: bold;
					font-size: 1.6vw;
					color: #222222;
					height: 3vw;
					padding-top: 1.3vw;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}
	.zding{
		width: 4.6vw;
		height: 4.6vw;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 11;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.speitem {
		width: 10vw;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		position: absolute;
		top:0;
		left: 0;
		.cardp {
			width:8vw;
			height: 4vw;
			display: flex;
			margin: 0 auto;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			view {
				min-width: 5.5vw;
				height: 1.8vw;
				border-radius: 0.9vw;
				border: 1px solid #D2D2D2;
				margin: 0.5vw 0 0 0.5vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 1vw;
				color: #555555;
				padding: 0 0.25vw;
			}
		}
	
		>image {
			width: 8.5vw;
			height: 7.5vw;
			margin: 1.7vw auto 0.25vw;
		}
	}
	
	
	
	.itembox{
		width: 100%;
		height: calc(100vh - 22vw);
		padding:1vw 2vw 0 0;
		background: #fff;
		.box{
			width: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		.fler{
			width: 30.4vw;
			height: 13vw;
			margin-bottom: 0.9vw;
			margin-left: 1.7vw;
			.carditem{
				width: 30.4vw;
				height: 13vw;
				background: rgba(245, 246, 248, 1);
				border-radius: 1.1vw;
				position: relative;
				overflow: hidden;
			}
		}
	}       
</style>
