<template>
	<view>
		<view class="nolist" v-if="isemity">
			<view class="que">
				<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
				<view>暂无数据</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="itembox" scroll-with-animation @scrolltolower="scrolltolower()"
			v-show="!isemity" enable-back-to-top>
			<view class="box">
				<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
					<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,index)">
					<view class="carditem guodu" :style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }">
						<view class="zding" v-if="v.zhiDingId">
							<image src="/static/index/procurement/zd.png" mode="aspectFill"></image>
						</view>
						<view class="speitem guodu">
							<view class="imgs">
								<image style="border-radius: 1vw;"
									:src="v?.materialImg?serverUrl+v?.materialImg:'/static/index/procurement/k.png'"
									mode="aspectFill">
								</image>
							</view>
							<view class="cardp">
								<view v-if="v.categoryId_dictText">{{v.categoryId_dictText}}</view>
								<view v-if="v.typeId_dictText">{{v.typeId_dictText}}</view>
								<view v-if="v.medicationId_dictText">{{v.medicationId_dictText}}</view>
								<view style="border-color: #fff;" v-if="v.medicationId_dictText"></view>
							</view>
						</view>
						<view class="msitem guodu">
							<view>
								<view>{{v?.materialName}}</view>
							</view>

							<view class="msitem-item">
								<text class="msitem-item-left">
									物料编码:
								</text>
								<text class="msitem-item-right">
									{{ v?.materialNo }}
								</text>
							</view>
							<view class="msitem-item">
								<text class="msitem-item-left">
									规格型号:
								</text>
								<text class="msitem-item-right">
									{{ v?.specificationModel }}
								</text>
							</view>
							<view class="msitem-item">
								<text class="msitem-item-left">
									请领数量:
								</text>
								<text class="msitem-item-right" :style="v.qlNum?{fontWeight:`600`}:{}">
									{{v.qlNum?v.qlNum:'--'}}
								</text>
							</view>
							<view class="msitem-item">
								<text class="msitem-item-left">
									请领单位:
								</text>
								<text class="msitem-item-right">
									{{ v?.twoUnit }}
								</text>
							</view>
							<!-- <view>
								<text  style="white-space: nowrap;"> 规格型号: </text>
								<view>{{v?.specificationModel}}</view>
							</view>
							<view>
								<view>
									<text>{{v.qlNum?v.qlNum:'--'}}</text>
									<text>请领数量</text>
								</view>
								<view>
									<text>{{v.materialUnits}}</text>
									<text>请领单位</text>
								</view>
							</view> -->
						</view>
						<view class="add" @click.stop="comfig(v,index,0)">
							<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">
							<view @click.stop="comfig(v,index,1)" @touchend.stop>
								请领记录
							</view>
							<view @click.stop="comfig(v,index,2)" @touchend.stop>
								物料详情
							</view>
							<view @click.stop="comfig(v,index,3)" @touchend.stop>
								{{v.zhiDingId?'取消置顶':'置 顶'}}
							</view>
						</view>
					</view>
					</view>
				</view>

			</view>
			<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;"
				v-show="!InvoicingList.length">
				<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
			</view>

		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	const props = defineProps({
		InvoicingList: {
			type: Array,
			required: true
		},
		status: {
			type: String
		},
		isemity: {
			type: Boolean
		},
	})
	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 comfig = (v, i, t) => {
		emit('comfig', v, i, t)
	}
	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)
	}
	const startX = ref(0)
	const openwhitchindex = ref(-1)
	const ts = (e) => {
		startX.value = e.touches[0].clientX;
	}
	const canmove = (e : any, index : number) => {
		const moveX = e.touches[0].clientX
		const diff = moveX - startX.value
		// diff 为负值就是向左滑
		if (diff < -40) {  // 👉 60px 阈值，随便改
			openwhitchindex.value = index
		}
		if (diff > 40) {  // 👉 60px 阈值，随便改
			openwhitchindex.value = -1
		}
	}
</script>

<style scoped lang="less">
	.zkadd {
		width: 12vw;
		height: 100%;
		display: inline-flex;
		justify-content: flex-end;
		// background-color: red;
		// position: absolute;
		// top: 0;
		// right: -12vw;
		// width: 14vw;
		// height: 100%;
		// display: inline-flex;
		// justify-content: flex-end;

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

		>view {
			width: 4vw;
			height: 100%;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			writing-mode: vertical-rl;
			text-orientation: upright;
			letter-spacing: 2px;

			&:nth-child(3) {
				background: rgba(224, 225, 228, .6);
				color: #555555;
			}

			&:nth-child(2) {
				background: rgba(224, 225, 228, .4);
				color: #666666;
			}

			&:nth-child(1) {
				background: rgba(224, 225, 228, .2);
				color: #666666;
			}
		}
	}

	.add {
		width: 5vw;
		height: 13vw;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 0;
		right: 1.5vw;

		>view {
			width: 5vw;
			height: 2.3vw;
			background: #fff;
			border-radius: 1vw;
			border: 1px solid #1083F8;
			font-weight: 400;
			font-size: 1.25vw;
			color: #1083F8;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 1.7vw;
			right: 0vw;
		}

		image {
			width: 2.5vw;
			height: 2.5vw;
			position: absolute;
			bottom: 2vw;
			right: 1vw;

		}
	}

	.msitem {
		width: 24vw;
		height: 100%;
		margin-right: 7vw;
		// position: absolute;
		// top: 0;
		// left: 15vw;
		// background-color: blue;

		.msitem-item {
			width: 24vw;
			margin-top: 10rpx;
			font-size: 33rpx;
			display: flex;

			.msitem-item-left {
				width: 190rpx;
				color: #777777;
			}

			.msitem-item-right {
				display: inline-block;
				/* 或 block，看你布局 */
				width: 400rpx;
				/* 注意：要有固定宽度，max-width 有时不够稳 */
				// box-sizing: border-box;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}


		>view {
			margin-top: 0vw;

			&:nth-child(1) {
				view {
					display: inline-block;
					width: 10vw;
					font-weight: bold;
					font-size: 1.8vw;
					color: #222222;
					padding-top: 1.9vw;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 30rpx;
				}
			}
		}
	}

	.zding {
		width: 6vw;
		height: 6vw;
		position: absolute;
		left: 0vw;
		top: 0vw;
		z-index: 11;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.speitem {
		width: 15vw;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		// position: absolute;
		// top: 0;
		// left: 0;

		.cardp {
			// position: absolute;
			// left: 0;
			// top: 11vw;
			width: 15vw;
			display: flex;
			margin: 0.3vw auto;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			// background-color: red;

			// flex-direction: column;
			view {
				min-width: 6vw;
				height: 2vw;
				border-radius: 0.9vw;
				border: 1px solid #D2D2D2;
				margin: 0.7vw 0.3vw 0 0.3vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 1vw;
				color: #555555;
				padding: 0 0.25vw;
			}
		}

		.imgs {
			width: 12vw;
			height: 12vw;
			// background: #fff;

			border-radius: 1.1vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 1.2vw auto 0;
			// padding: 0.3vw;
			// background-color: red;

			>image {
				width: 100%;
				height: 100%;

			}
		}
	}



	.itembox {
		// width: 100%;
		// height: 66vh;
		padding: 1vw 2vw 0 0;
		width: 90vw;
		height: 64.5vh;
		// background-color: red;

		.box {
			width: 90vw;
			display: grid;
			grid-template-columns: 1fr 1fr;

		}

		.fler {
			width: 44vw;
			height: 20.5vw;
			position: relative;
			// background-color: red;
			
			.fler-view {
				width: 44vw;
				height: 19.5vw;
				background: rgba(255, 255, 255, 1);
				border-radius: 1.6vw;
				position: relative;
				margin-bottom: 1.1vw;
				overflow: hidden;
				white-space: nowrap;
			}

			// margin-bottom: 0.9vw;
			.carditem {
				width: 44vw;
				height: 19.5vw;
				background: rgba(255, 255, 255, 1);
				border-radius: 1.6vw;
				position: relative;
				margin-bottom: 1.1vw;
				display: flex;
				// overflow: hidden;
				justify-content: flex-start;
				white-space: nowrap;
				transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
				will-change: transform;
			}
		}
	}

	.nolist {
		background-color: #fff;
		width: 89vw;
		height: 63.4vh;
		margin: 0 0.5vw;
		margin-top: 1.2vw;
		border-radius: 1.1vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.que {
			width: 10vw;
			height: 10vw;

			image {
				width: 100%;
				height: 100%;
			}

			view {
				margin-top: -40rpx;
				width: 100%;
				text-align: center;
				font-weight: 300;
				font-size: 1.4vw;
				color: #555555;
			}
		}

	}
</style>