<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="speitem guodu">
							<view class="imge">
								<image
									:src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
									mode="aspectFill">
								</image>
							</view>

							<view class="cardp">
								<view v-if="v.materialInfo?.categoryName">{{v.materialInfo?.categoryName}}</view>
								<view v-if="v.materialInfo?.typeName">{{v.materialInfo?.typeName}}</view>
								<view v-if="v.materialInfo?.medicationName">{{v.materialInfo?.medicationName}}</view>
							</view>
						</view>
						<view class="right-one-right">
							<view class="right-title">
								{{ v?.materialInfo.materialName }}
							</view>
							<view style="display: flex;margin-top: 10rpx;">
								<view class="right-setting">
									规格编号：
								</view>
								<view class="right-mm">
									{{ v?.materialInfo.materialNo }}
								</view>
							</view>
							<view style="display: flex;margin-top: 10rpx;">
								<view class="right-setting">
									规格型号：
								</view>
								<view class="right-mm">
									{{ v?.materialInfo.specificationModel }}
								</view>
							</view>
						
							<view class="right-down">
								<view class="">
									<view class="right-first-num">
										{{ v?.qlNum }}
									</view>
									<view class="right-first-type">
										请领数量
									</view>
								</view>
								<view class="right-shu"></view>
								<view class="">
									<view class="right-first-num" style="font-weight: 500;">
										{{ v?.materialInfo.materialUnits }}
									</view>
									<view class="right-first-type">
										请领单位
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="msitem guodu">
							<view>
								<view>{{v.materialInfo?.materialName}}</view>
							</view>
							<view>
								<text style="white-space: nowrap;"> 规格型号: </text>
								<view style="color: black;">{{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" @click.stop="del(v,i)" v-if="status=='3'">
							
							<image :src="'/static/index/procurement/-.png'" mode="aspectFill"></image>
						</view>
						<view class="zkadd guodu" v-if="status=='3'">
							<view @click.stop="comfig(v,index,1)" @touchend.stop>
								编辑
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="right-one-white center" v-if="InvoicingList.length<2&&InvoicingList.length">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="right-one-white center" v-if="InvoicingList.length<3&&InvoicingList.length">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="right-one-white center" v-if="InvoicingList.length<4&&InvoicingList.length">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="right-one-white center" v-if="InvoicingList.length<5&&InvoicingList.length">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="right-one-white center" v-if="InvoicingList.length<6&&InvoicingList.length">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<defaultr cont="暂无数据" v-if="InvoicingList.length==0 "
					style="position: absolute;width: 10vw;height: 10vw;"></defaultr>
			</view>
		</scroll-view>
		<taking :show="tuihuoshow" :objtake="tuihuoobj.materialInfo" :num="tuihuoobj.qlNum" @fill="tuihuoshow = false"
			@right="right"></taking>
		<tanchuang @back="delshow = false" :show="delshow" font="确定将该物料从本次请领清单中移除吗？" @right="dell"></tanchuang>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import taking from './takeing.vue'
	import defaultr from '../common/default.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', 'del'])
	const delshow = ref(false)
	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 dell = () => {
		emit('del', tuihuoobj.value);
		delshow.value = false;
	}
	const del = (v, i) => {
		tuihuoobj.value = v;
		delshow.value = true;
	}
	const right = (e, v) => {
		emit('comfig', e, tuihuoobj.value);
		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) => {
		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: 9.3vw;
		height: 100%;
		display: inline-flex;
		justify-content: flex-end;
		position: absolute;
		top: 0;
		right: -9.3vw;
		// background-color: blue;

		view:active {
			background: rgba(85, 166, 249, 1) !important;
			color: #FFFFFF !important;
		}

		>view {
			width: 4vw;
			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;
		// background-color: red;

		>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: 2.4vw;
			height: 2.4vw;
			position: absolute;
			top: 100%;
			// transform: translateY(-50%);
			right: 0.4vw;
		}
	}

	.msitem {
		width: 11.5vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: 10vw;

		>view {
			margin-top: 0vw;

			&: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.3vw;
					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: 13vw;
					font-weight: 800;
					font-size: 1.6vw;
					color: #222222;
					height: 3vw;
					padding-top: 1vw;
					margin-top: 0.25vw;
					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: 35.5vw;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;

		.cardp {
			width: 10vw;
			// height: 4.7vw;
			// background-color: red;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			view {
				// width: 5.5vw;
				// height: 1.5vw;
				// border-radius: 0.9vw;
				// border: 1px solid #D2D2D2;
				// margin: 0vw 0 0.3vw 1.5vw;
				// text-align: center;
				// // display: flex;
				// // justify-content: center;
				// // align-items: center;
				// font-weight: 400;
				// font-size: 1vw;
				// color: #555555;
				// // padding: 0 0.25vw;
				// white-space: nowrap;
				// /* 不换行 */
				// overflow: hidden;
				// /* 隐藏溢出部分 */
				// text-overflow: ellipsis;
				// /* 显示省略号 */
				margin-bottom: 5rpx;
				width: 140rpx;
				// height: 36rpx;
				border-radius: 30rpx;
				color: #555555;
				border: 1rpx solid #D2D2D2;
				margin-top: 5rpx;
				font-size: 22rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				text-align: center;
				line-height: 34rpx;
			}
		}

		.imge {
			width: 7vw;
			height: 7vw;
			// margin: 0.3vw auto 0.25vw;
			margin-top: 2vw;
			margin-bottom: 0.8vw;
			margin-left: 1.2vw;
			background: red;
			// padding: 0.2vw;
			// padding: 0.5vw;
			// margin: 0.7vw auto 0.3vw;

			border-radius: 1.1vw;

			>image {
				width: 100%;
				height: 100%;
				border-radius: 1.1vw;
			}
		}

	}

	.itembox {
		width: 60vw;
		height: calc(100vh - 8vw);
		padding: 1.5vw 0.5vw 0vw 0.8vw;
		// background-color: blue;

		.box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			// display: grid;
			// grid-template-columns: 1fr 1fr;
		}

		.fler {
			width: 615rpx;
			height: 365rpx;
			margin-left: 20rpx;
			margin-bottom: 23rpx;


			.carditem {
				width: 615rpx;
				height: 365rpx;
				background: #fff;
				border-radius: 30rpx;
				position: relative;
				overflow: hidden;
				border: 1rpx solid #c9c9c9;
			}
		}
	}
	.right-one-right {
		height: 100%;
		width: 60%;
		// margin-left: 39%;
		position: absolute;
		left: 39%;
		top: 0;
		
		.right-title {
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 40rpx;
			color: #222222;
			width: 300rpx;
			overflow: hidden;
			/* 必须 */
			white-space: nowrap;
			/* 强制单行 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}
	
		.right-setting {
			color: #888888;
			margin-top: 5rpx;
			font-size: 28rpx;
		}
	
		.right-mm {
			color: #555555;
			font-size: 30rpx;
			width: 200rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	
		.right-down {
			display: flex;
			margin-top: 50rpx;
	
			.right-first-num {
				font-size: 38rpx;
				color: #555555;
				font-weight: 600;
			}
	
			.right-first-type {
				color: #888888;
				font-size: 26rpx;
			}
	
			.right-shu {
				width: 2rpx;
				height: 50rpx;
				background-color: #C9C9C9;
				margin: 0 30rpx;
				margin-top: 10rpx;
			}
		}
	}
	// width: 592rpx;
	// height: 365rpx;
	// margin-left: 20rpx;
	// margin-bottom: 15rpx;
	.right-one-white{
		width: 615rpx;
		height: 365rpx;
		border: 1rpx solid #c9c9c9;
		background-color: #fff;
		border-radius: 30rpx;
		margin-left: 20rpx;
		margin-bottom: 23rpx;
		padding: 0 30rpx;
		position: relative;
		// background-color: red;
		// background-color: #fff;
	}
	
	.que {
		width: 10vw;
		height: 10vw;
		// margin: auto;
	
		image {
			width: 100%;
			height: 100%;
		}
	
		view {
			margin-top: -30rpx;
			width: 100%;
			text-align: center;
			font-weight: 300;
			font-size: 1.2vw;
			color: #555555;
		}
	}
	
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>