<template>
	<view>
		<scroll-view scroll-y="true" class="itembox" scroll-with-animation @scrolltolower="scrolltolower()"
			enable-back-to-top enable-flex :scroll-top="scrolltop" @scroll="scroll">
			<view class="items guodu" v-for="(v,i) in list" :key='i' :class="{'itembord0':v.zk==true}">
				<view class="speitem guodu">
					<view class="imgs">
						<image :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>123123123</view>
						<view>1232131212321312</view>
						<view>213213213</view>
					</view>
				</view>
				<view class="wuli">
					<view class="tite">纸尿裤-拉拉裤纸尿裤-拉拉裤</view>
					<view class="cot">
						<text>物料编码：</text>
						040601022
					</view>
					<view class="cot">
						<text>物料单位：</text>
						片
					</view>
					<view class="cot">
						<text>规格型号：</text>
						800mm*680mm
					</view>
					<view class="wltwo">
						<view>
							<view>20</view>
							<text>库存数量</text>
						</view>
						<view class="dot">
							<view style="text-align: right;">15</view>
							<text>盘点数量</text>
						</view>
					</view>
				</view>
				<view class="chae">
					<view :class="{b:i==0,r:i==1}">-5</view>
					<text>差额</text>
				</view>
				<view class="pandian" @click="zhankai(v,i)">
					<image src="/static/index/procurement/pd0.png" mode="aspectFill"></image>
				</view>
				<view class="tan guodu" :class="v.zk?'':'itemhei0'">
					<view class="tbox guodu" :class="v.zk?'':'itemhei0'" :style="v.zk?'':'overflow: hidden'">
						<torytor :show="v.yczk"></torytor>
						<view class="bpq" v-show="v.yczk">
							<view class="bp b" @click="v.bz = !v.bz;v.pz = false">
								<image src="/static/index/procurement/th.png" mode="aspectFill"></image>
								备注
								<text class="r">5</text>
							</view>
							<view class="bp p" @click="v.pz = !v.pz;v.bz = false">

								<image src="/static/index/procurement/xj.png" mode="aspectFill"></image>
								拍照
								<text class="g">5</text>
							</view>
							<view class="qued">
								确定
							</view>
							<view class="triangle-leftbz" v-if="v.bz">
								<image src="/static/index/procurement/jb.png" mode="aspectFill"></image>
							</view>
							<view class="triangle-leftpz" v-if="v.pz">
								<image src="/static/index/procurement/jb.png" mode="aspectFill"></image>
							</view>
							<view class="gray-bgc guodu" :class="v.bz?'':'itemhei0'">
								<view class="textare" v-if="v.bz">
									<textarea v-model="v.model" placeholder="请输入备注" maxlength="200"></textarea>
								</view>
								<view class="submit" v-if="v.bz">
									<view>取消</view>
									<view>确定</view>
								</view>
							</view>
							<view class="gray-pgc guodu" :class="v.pz?'':'itemhei0'">
								<view class="pztit" v-if="v.pz">拍照：</view>
								<view class="zpj" v-if="v.pz">
									<view class="zpk">
										<image :src="'/static/zhanwei.png'" mode="aspectFill" style="width: 2.1vw;height: 2.1vw;">
										</image>
										<view @click.stop="open=1">
											<image src="/static/x.png" mode="aspectFill" style="width: 100%;height: 100%;"></image>
										</view>
									</view>
									<view class="clkpz" >
										<image src="/static/index/procurement/xjpz.png" mode="aspectFill"></image>
										<text>点击拍照上传</text>
									</view>
								</view>
								<view class="submit" v-if="v.pz">
									<view>取消</view>
									<view>确定</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="mengban"  v-if="v.zk" @click="v.zk = false"></view> -->
			</view>
		</scroll-view>
		<tanchuang :show="open==1" font="是否删除此图片" @back="open = 0" @right="del()"> </tanchuang>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryQld } from '../api/lunpan.js'
	import torytor from './torytor.vue'
	const open = ref(0)
	const scrolltop = ref(0)
	const list = ref([]);

	onMounted(() => {
		for (let i = 0; i < 20; i++) {
			list.value.push({ zk: false, yczk: false, bz: false, model: '', pz: false })
		}
	})
	const zhankai = (v, i) => {
		let s = Math.ceil((i + 1) / 3);
		console.log(s)
		scrolltop.value = top.value;
		v.zk = !v.zk;
		if (v.zk) {
			setTimeout(() => {
				v.yczk = v.zk;
			}, 200)
		} else {
			v.yczk = v.zk;
			v.bz = false;
			v.pz = false;
		}

		nextTick(() => {
			scrolltop.value = (top.value > (s - 2) * 182) ? top.value : (s - 2) * 182;
		})
		gb(i)
	}
	const gb = (i) => {
		list.value.forEach((item, k) => {
			if (i != k) {
				item.zk = false;
				item.bz = false;
				item.pz = false;
				item.yczk = false;
			}
		})
	}
	const top = ref(0)
	const scroll = (e) => {
		// console.log(e.detail.scrollTop)
		top.value = e.detail.scrollTop;
	}
	const scrolltolower = () => {

	}
</script>

<style scoped lang="less">
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.itembox {
		width: 100%;
		height: 50vw;
		display: flex;

		.itembord0 {
			border-radius: 1.6vw 1.6vw 0 0 !important;
			z-index: 25 !important;
		}

		.itemhei0 {
			height: 0vw !important;
			z-index: 27 !important;
		}

		.items {
			width: 31.5vw;
			height: 16vw;
			background: #FFFFFF;
			border-radius: 1.6vw;
			display: inline-block;
			margin: 0 0.8vw 0.5vw 0;
			position: relative;
			z-index: 20;

			.tan {
				position: absolute;
				width: 31.5vw;
				height: 17vw;
				background: #fff;
				top: 15.5vw;
				left: 0;
				z-index: 27;
				border-radius: 0 0 1.6vw 1.6vw;

				.submit {
					width: 100%;
					height: 3.2vw;
					margin-top: 0.9vw;
					padding-right: 2vw;
					display: flex;
					justify-content: flex-end;

					view {
						display: flex;
						justify-content: center;
						align-items: center;

						&:nth-child(1) {
							width: 5.7vw;
							height: 2.3vw;
							background: #F8F8F8;
							border-radius: 1.2vw;
							border: 1px solid #E5E5E5;
							font-weight: 400;
							font-size: 1.2vw;
							color: #555555;
						}

						&:nth-child(2) {
							width: 5.7vw;
							height: 2.3vw;
							background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
							border-radius: 1.2vw;
							border: 1px solid rgba(3, 133, 250, 0.34);
							font-weight: 400;
							font-size: 1.2vw;
							color: #1083F8;
							margin-left: 0.7vw;
						}
					}
				}

				.bpq {
					width: 31vw;
					height: 2.6vw;
					position: absolute;
					display: flex;
					bottom: 0.7vw;
					left: 0;
					.triangle-leftpz {
						width: 2vw;
						height: 1.5vw;
						position: absolute;
						bottom: 2.2vw;
						left: 11vw;
						z-index: 30;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.triangle-leftbz {
						width: 2vw;
						height: 1.5vw;
						position: absolute;
						bottom: 2.2vw;
						left: 4vw;
						z-index: 30;
						image {
							width: 100%;
							height: 100%;
						}
					}

					.gray-pgc {
						background: #fff;
						width: 29vw;
						height: 27vw;
						border-radius: 2vw;
						box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(116, 141, 164, 0.22);
						position: absolute;
						bottom: 3.6vw;
						left: 1vw;
						overflow: hidden;

						.zpj {
							width: 100%;
							height: 20vw;
							display: flex;
							justify-content: space-between;
							padding: 0 1.6vw;
							flex-wrap: wrap;

							.zpk {
								width: 12.6vw;
								height: 6.4vw;
								margin-top: 0.3vw;
								border-radius: 1.1vw;
								position: relative;
								display: flex;
								justify-content: center;
								align-items: center;
								background: #F9F9F9;
								view {
									width: 1.6vw;
									height: 1.6vw;
									z-index: 20;
									position: absolute;
									right: 0.1vw;
									top: 0.1vw;
									background: rgba(255, 255, 255, 0.7);
									display: flex;
									justify-content: center;
									align-items: center;
								} 
							}

							.clkpz {
								width: 12.6vw;
								height: 6.4vw;
								background: #FAFDFF;
								border-radius: 1.1vw;
								border: 1px solid #DDEFFF;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-top: 0.3vw;
								flex-direction: column;

								text {
									font-weight: 400;
									font-size: 0.7vw;
									color: #78B1EB;
								}

								image {
									width: 2.3vw;
									height: 2.3vw;
								}
							}

						}

						.pztit {
							font-weight: 400;
							font-size: 1.2vw;
							color: #888888;
							margin: 1.6vw auto 0;
							width: 100%;
							padding-left: 2.4vw;
						}

						
					}

					.gray-bgc {
						background: #fff;
						width: 28vw;
						height: 12vw;
						border-radius: 2vw;
						box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(116, 141, 164, 0.22);
						position: absolute;
						bottom: 3.6vw;
						left: 1vw;
						overflow: hidden;

						.triangle-left {
							width: 2vw;
							height: 1.5vw;
							position: absolute;
							top: 99.5%;
							left: 3vw;

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

						.textare {
							width: 26vw;
							height: 6.5vw;
							background: #F5F5F5;
							border-radius: 1vw;
							margin: 1.6vw auto 0;
							padding: 1vw;

							textarea {
								width: 100%;
								height: 100%;
								font-weight: 400;
								font-size: 1.1vw;
								color: #999999;
							}
						}

					}

					.qued {
						width: 6vw;
						height: 2.6vw;
						background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
						border-radius: 1.3vw;
						border: 1px solid rgba(3, 133, 250, 0.34);
						right: 1.4vw;
						top: 0;
						position: absolute;
						font-weight: 400;
						font-size: 1.4vw;
						color: #0385FA;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.bp {
						width: 5vw;
						height: 2.6vw;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 1.2vw;
						color: #555555;
						margin-left: 1.5vw;
						white-space: nowrap;
						position: relative;

						>text {
							min-width: 1vw;
							height: 1vw;
							border-radius: 0.5vw;
							font-weight: 400;
							font-size: 0.8vw;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 0.4vw;
							position: absolute;
							right: -0.5vw;
							top: 0;
						}

						.g {
							background: #0385FA;
							border: 1px solid #0385FA;
						}

						.r {
							background: #FF5757;
							border: 1px solid #FF5757;

						}

						image {
							width: 1.8vw;
							height: 1.8vw;
							margin-right: 0.4vw;
						}
					}
				}

				.tbox {
					width: 100%;
					height: 16vw;
					position: absolute;
					top: 1vw;
					z-index: 28;
					left: 0;

				}
			}

			.chae {
				width: 4vw;
				height: 4vw;
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 1vw 2vw 0 0;

				view {
					font-weight: bold;
					font-size: 1.8vw;
				}

				text {
					font-weight: 400;
					font-size: 1vw;
					color: #888888;
				}

				.r {
					color: #FF5757;
				}

				.b {
					color: rgba(16, 131, 248, 1);
				}
			}

			.pandian {
				width: 3.3vw;
				height: 3.3vw;
				position: absolute;
				right: 0;
				bottom: 0;

				image {
					width: 1.7vw;
					height: 1.7vw;
				}
			}

			.wuli {
				width: 18vw;
				height: 100%;
				overflow: hidden;
				position: absolute;
				left: 12vw;
				top: 0;

				.wltwo {
					width: 11vw;
					height: 3.7vw;
					display: flex;
					margin-top: 1.2vw;
					justify-content: space-between;

					>view {
						// min-width: 5vw;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						position: relative;
						align-items: left;
						padding: 0 1vw;

						view {
							font-weight: bold;
							font-size: 1.7vw;
							color: #555555;
						}

						text {
							font-weight: 400;
							font-size: 1.2vw;
							color: #999999;
							white-space: nowrap;
							display: block;
						}

					}

					.dot::after {
						content: '';
						width: 1px;
						height: 3.3vw;
						position: absolute;
						left: 0;
						bottom: 0;
						border-right: 1px solid rgba(230, 230, 230, 1);
					}
				}

				.cot {
					width: 18vw;
					font-weight: 400;
					font-size: 1.3vw;
					color: rgba(85, 85, 85, 1);
					margin-top: 0.2vw;

					text {
						color: rgba(153, 153, 153, 1);
						font-size: 1.2vw;
						font-weight: 300;
					}
				}

				.tite {
					width: 13vw;
					font-weight: bold;
					font-size: 1.6vw;
					color: #222222;
					height: 2vw;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					margin: 1.3vw 0 1.2vw 0;
				}

			}

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

				.cardp {
					width: 12vw;
					height: 4vw;
					display: flex;
					flex-wrap: wrap;
					margin: 0 auto;
					align-items: center;

					view {
						min-width: 3.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: 0.8vw;
						color: #555555;
						padding: 0 0.25vw;

						&:nth-child(1),
						&:nth-child(2) {
							max-width: 5.5vw;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							display: block;
							line-height: 1.8vw;
							text-align: center;
						}
					}
				}

				.imgs {
					width: 9.8vw;
					height: 9.8vw;
					background: #F8F8F8;
					border-radius: 1.1vw;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0.8vw auto 0;

					>image {
						width: 8.8vw;
						height: 7.5vw;
					}
				}

			}
		}
	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 21;
		background: RGBA(239, 240, 244, 0);
	}
</style>