<!-- 出入库 -->
<template>
	<view class="draw-all">
		<view class="draw-title">
			<view class="draw-flex">
				<view class="draw-title-gun"></view>
				<view class="draw-title-font">出入库</view>
			</view>
		</view>
		<view class="draw-contain">
			<view class="swiper-card">
				<view class="swiper-card-top">
					<image class="swiper-card-top-img" :src="`/static/index/project3.png`" />
					<view class="swiper-card-top-card">
						<view class="swiper-card-top-card-weight">
							<view class="weight-left">
								纸尿裤-拉拉裤
							</view>
							<view class="weight-right" style="margin-right: 30rpx;">
								当前库存：96
							</view>
						</view>
						<view class="swiper-card-top-card-noral" style="margin-top: 20rpx;">
							<view class="swiper-all-flex">
								<view class="swiper-gray">
									物料编码：
								</view>
								<view class="swiper-black">
									ZHYP044
								</view>
							</view>
						</view>
						<view class="swiper-card-top-card-noral" style="margin-top: 20rpx;">
							<view class="swiper-all-flex">
								<view class="swiper-gray">
									规格型号：
								</view>
								<view class="swiper-black">
									800mm*690mm
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="select-width">
				<view class="select-blue" @click="blueshow = !blueshow">
					<image class="select-blue-img" src="/static/index/warehouseCard/selectblue.png" />
					<view class="select-blue-font">
						{{blueValue}}
					</view>
					<div class="triangle-down"></div>
					<!-- 下拉列表：用 open/close 类触发动画 -->
					<view class="dropdown-list" v-show="blueshow" :class="blueshow ? 'open' : 'close'" @click.stop>
						<view v-for="(item, i) in bluelist" :key="i" class="dropdown-item"
							:class="item.label == blueValue ? 'active' : ''"
							@click="blueValue = item.label;blueshow=false">
							{{ item.label }}
						</view>
					</view>
				</view>
				<view class="select-white" @click="whiteshow = !whiteshow">
					<image class="select-blue-img" src="/static/index/warehouseCard/selectwhite.png" />
					<view class="select-blue-font">
						{{whiteValue}}
					</view>
					<div class="triangle-down"></div>
					<view class="dropdown-list" v-show="whiteshow" :class="whiteshow ? 'open' : 'close'" @click.stop>
						<view v-for="(item, i) in whitelist" :key="i" class="dropdown-item"
							:class="item.label == whiteValue ? 'active' : ''"
							@click="whiteValue = item.label;whiteshow=false">
							{{ item.label }}
						</view>
					</view>
				</view>
			</view>
			<view class="scroll-view">
				<view class="scroll-view-title">
					<view class="amount">
						总计:100笔
					</view>
					<view class="outhouse">
						<image class="outhouse-img" src="/static/index/warehouseCard/orangeicon.png" />
						<view class="outhouse-left">
							出库:
						</view>
						<view class="outhouse-right">
							50笔
						</view>
					</view>
					<view class="inhouse">
						<image class="inhouse-img" src="/static/index/warehouseCard/blueicon.png" />
						<view class="inhouse-left">
							出库:
						</view>
						<view class="inhouse-right">
							50笔
						</view>
					</view>
				</view>
				<scroll-view scroll-y :scroll-top="topNumber" @scroll="movedown" style="height: 730rpx;margin-top: 2%;"
					:show-scrollbar="false">
					<view class="swiper-flex">
						<view v-for="(item,index) in manyCard" :key="index">
							<view class="swiper-card-spec">
								<view class="swiper-card-top">
									<view class="swiper-card-top-card">
										<view class="swiper-card-top-card-weight">
											<view class="weight-left">
												{{item.name}}
											</view>
											<view class="weight-right" style="color: #59657A ;font-weight: 400;">
												摘要:服务指令
											</view>
										</view>
										<view class="swiper-card-top-card-noral">
											<view class="swiper-all-flex">
												<view class="swiper-gray">
													服务指令:生活用品请领
												</view>

											</view>
											<view class="swiper-all-flex">
												<view class="swiper-gray" :style="item.add<0?{color:`#FF6600`}:{color:`#008AFF`}"
													style="font-weight: 700;font-size: 35rpx;">
													{{item.add >0 ? "+" + item.add : item.add }}
												</view>

											</view>
										</view>
										<view class="swiper-card-top-card-noral">
											<view class="swiper-all-flex">
												<!-- <view class="swiper-gray">
													采购单位：
												</view> -->
												<view class="swiper-black">
													2025-02-13 17:29:18
												</view>
											</view>
											<view class="swiper-all-flex">
												<view class="swiper-black">
													库存：
												</view>
												<view class="swiper-black">
													96
												</view>
											</view>
										</view>

									</view>
								</view>
								<view class="swiper-card-down">
									<view class="down-left">
										<view class="down-left-weight">
											供应商：
										</view>
										<view class="down-left-font">
											长春市永佳利商贸有限公司1
										</view>
									</view>
									<image class="delete-img" :src="`/static/index/deleteIt.png`" />
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="down-contain">
					<image class="down-contain-img" src="/static/index/warehouseCard/arrow.png" @click="movedownone" />
				</view>
			</view>
		</view>
	</view>
	<!-- 	<u-select v-model="blueshow" :list="bluelist" @confirm="blueconfirm"></u-select>
	<u-select v-model="whiteshow" :list="whitelist" @confirm="whiteconfirm"></u-select> -->
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
	const note = ref("");
	const topNumber = ref(0);
	const topNumberSave = ref(0);
	const blueshow = ref(false);
	const whiteshow = ref(false);
	const blueValue = ref("全部");
	const whiteValue = ref("日期从近到远");
	const bluelist = ref([{
		value: 0,
		label: '全部'
	},
	{
		value: 1,
		label: '出库'
	},
	{
		value: 2,
		label: '入库'
	},
	])
	const whitelist = ref([{
		value: 0,
		label: '日期从近到远'
	},
	{
		value: 1,
		label: '日期从远到近'
	},
	])
	const manyCard = ref([
		{
			name:'生活用品请领',
			add:-20
		},
		{
			name:'采购入库',
			add:10
		},
		{
			name:'生活用品请领',
			add:-20
		},
		{
			name:'生活用品请领',
			add:20
		},
		{
			name:'生活用品请领',
			add:-20
		},
		{
			name:'生活用品请领',
			add:100
		},
		{
			name:'生活用品请领',
			add:9999
		},
	])
	const blueconfirm = (res) => {
		// console.log("????",res)
		blueValue.value = res[0].label
	}
	const whiteconfirm = (res) => {
		// console.log("????",res)
		whiteValue.value = res[0].label
	}
	const movedown = (res) => {
		topNumberSave.value = res.detail.scrollTop.toFixed(2)
	}

	const movedownone = () => {
		topNumberSave.value = Number(topNumberSave.value) + 115;
		topNumber.value = topNumberSave.value
	}
</script>

<style lang="less" scoped>
	// 抽屉的css
	.draw-all {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: url("/static/index/pink.png") center/cover, rgba(255, 255, 255, 0.2);
		background-blend-mode: screen;
		isolation: isolate;
		/* 白色背景透明度为 10% */
		// background-image: url('/static/index/mountain.png');
		// background-blend-mode: screen;
		// background-position: 30% 50%;
		border-top-left-radius: 80rpx;
		border-bottom-left-radius: 80rpx;
		overflow: hidden;

		.draw-flex {
			display: flex;
		}

		// position: relative;
		.draw-title {
			width: 100%;
			height: 140rpx;
			display: flex;
			justify-content: space-between;
			padding-top: 68rpx;

			.draw-title-gun {
				margin-left: 60rpx;
				margin-right: 20rpx;
				width: 13rpx;
				height: 50rpx;
				background: linear-gradient(to bottom, #04BCED, #0160CE);
				border-radius: 10rpx;
			}

			.draw-title-font {
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		.draw-contain {
			width: 100%;
			height: calc(100vh - 140rpx);
		}
	}

	/* 弹窗遮罩层 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	/* 弹窗内容，宽高占屏幕70% */
	.modal-content {
		width: 80vw;
		height: 80vh;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	.draw-blue {
		color: #0090FF;
		font-size: 30rpx;
		margin-right: 45rpx;
		margin-top: 15rpx;
	}

	.swiper-card {
		margin: 0 0 30rpx 30rpx;
		margin-left: 40rpx;
		width: 960rpx;
		height: 250rpx;
		border: 2rpx solid #fff;
		border-radius: 30rpx;
		background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
		background-blend-mode: screen;
		isolation: isolate;
		box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
		overflow: hidden;

		.swiper-card-top {
			width: 100%;
			height: 270rpx;
			display: flex;

			.swiper-card-top-img {
				width: 250rpx;
				height: 200rpx;
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-right: 20rpx;
			}

			.swiper-card-top-card {
				// background-color: #fff;
				margin-left: 40rpx;
				width: calc(100% - 40rpx);
				height: 100%;

				.swiper-card-top-card-weight {
					display: flex;
					justify-content: space-between;
					margin-top: 35rpx;

					.weight-left {
						font-weight: 700;
						font-size: 35rpx;
					}

					.weight-right {
						color: #008AFF;
						font-weight: 700;
						font-size: 30rpx;
					}
				}

				.swiper-card-top-card-noral {
					display: flex;
					justify-content: space-between;
					margin-top: 15rpx;
				}
			}
		}

	}

	.swiper-card-spec {
		margin: 0 0 30rpx 30rpx;
		margin-left: 40rpx;
		width: 890rpx;
		height: 200rpx;
		border: 2rpx solid #fff;
		border-radius: 30rpx;
		background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
		background-blend-mode: screen;
		isolation: isolate;
		box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
		overflow: hidden;

		.swiper-card-top {
			width: 100%;
			height: 270rpx;
			display: flex;

			.swiper-card-top-img {
				width: 200rpx;
				height: 200rpx;
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-right: 20rpx;
			}

			.swiper-card-top-card {
				// background-color: #fff;
				// margin-left: 40rpx;
				width: 100%;
				height: 100%;

				.swiper-card-top-card-weight {
					width: 100%;
					display: flex;
					padding: 0 40rpx;
					// justify-content: space-between;
					justify-content: space-between;
					margin-top: 15rpx;

					// background-color: #fff;
					.weight-left {
						font-weight: 700;
						font-size: 35rpx;
					}

					.weight-right {
						color: #008AFF;
						font-weight: 700;
						font-size: 30rpx;
					}
				}

				.swiper-card-top-card-noral {
					display: flex;
					justify-content: space-between;
					width: 100%;
					padding: 0 40rpx;
					margin-top: 15rpx;
				}
			}
		}

	}

	.swiper-flex {
		display: flex;
		flex-wrap: wrap;
		margin-left: 0rpx;


	}

	.swiper-all-flex {
		display: flex;
	}

	.swiper-gray {
		color: #596278;
		font-size: 32rpx;
	}

	.swiper-black {
		font-size: 32rpx;
	}

	.delete-img {
		width: 40rpx;
		height: 45rpx;
		margin-right: 40rpx;
	}


	.scroll-view {
		height: 930rpx;
		width: calc(100% - 80rpx);
		margin-left: 40rpx;
		border-radius: 40rpx;
		border: 2rpx solid #fff;
		box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
		overflow: hidden;
	}

	.scroll-view-title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background: linear-gradient(to right, #E3EAFF, #F4ECFF, #DCE4FF);
		font-size: 30rpx;
		font-weight: 500;

		.amount {
			// font-weight: 500;
		}

		.outhouse {
			display: flex;

			.outhouse-img {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
				margin-top: -6rpx;
			}

			.outhouse-left {
				color: #FF6600;
			}

			.outhouse-right {
				margin-left: 7rpx;

			}
		}

		.inhouse {
			display: flex;

			.inhouse-img {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
				margin-top: -2rpx;
			}

			.inhouse-left {
				color: #008FFF;
			}

			.inhouse-right {
				margin-left: 7rpx;
				// font-weight: 500;
			}
		}
	}

	.select-width {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;

		.select-blue {
			border: 1rpx solid #fff;
			width: 180rpx;
			height: 70rpx;
			background: linear-gradient(to bottom, #00C9FF, #0076FF);
			border-radius: 15rpx;
			margin-right: 20rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			position: relative;

			.select-blue-img {
				width: 27rpx;
				height: 27rpx;
			}

			.select-blue-font {
				color: #fff;
			}

			/* 定义一个向下的小三角 */
			.triangle-down {
				width: 0;
				/* 元素本身无宽高 */
				height: 0;
				/* 元素本身无宽高 */

				/* 左右边框透明，形成斜边 */
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;

				/* 顶部边框着色，形成底边，三角指向下 */
				border-top: 8rpx solid #fff;
				/* 这里的 #000 可替换成任何颜色 */
			}
		}

		.select-white {
			border: 1rpx solid #fff;
			width: 280rpx;
			height: 70rpx;
			background: linear-gradient(to bottom, #EEF5FF, #D4DEFC);
			border-radius: 15rpx;
			margin-right: 40rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			position: relative;

			.select-blue-img {
				width: 27rpx;
				height: 27rpx;
				margin-left: 10rpx;
			}

			.select-blue-font {
				color: #19233B;
			}

			/* 定义一个向下的小三角 */
			.triangle-down {
				width: 0;
				/* 元素本身无宽高 */
				height: 0;
				/* 元素本身无宽高 */

				/* 左右边框透明，形成斜边 */
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;

				/* 顶部边框着色，形成底边，三角指向下 */
				border-top: 8rpx solid #19233B;
				/* 这里的 #000 可替换成任何颜色 */
			}
		}

	}

	.down-contain {
		width: 100%;
		height: 75rpx;
		// background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		.down-contain-img {
			height: 30rpx;
			width: 30rpx;
		}
	}

	/* 列表定位和初始样式 */
	.dropdown-list {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		overflow: hidden;
		background: #fff;
		border: 2rpx solid #ccc;
		box-sizing: border-box;
		max-height: 0;
		z-index: 999;
		border-radius: 15rpx;
		/* 初始收起 */
	}

	/* 列表项默认与选中样式 */
	.dropdown-item {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		color: #000;
	}

	.dropdown-item.active {
		color: #016AD1;
		background-color: #c9e8ff;
	}

	/* 定义下拉动画：从 max-height:0 到 300px */
	@keyframes slideDown {
		from {
			max-height: 0;
		}

		to {
			max-height: 600rpx;
		}
	}

	/* 定义收起动画：与 slideDown 相反 */
	@keyframes slideUp {
		from {
			max-height: 600rpx;
		}

		to {
			max-height: 0;
		}
	}

	/* 根据 show 状态触发动画 */
	.open {
		animation: slideDown 0.3s ease forwards;
	}

	.close {
		animation: slideUp 0.3s ease forwards;
	}
</style>