<template>
	<view class="plsbuy-contain">
		<view class="plsbuy-title">
			<image class="plsbuy-title-img" :src="`/static/index/project3.png`" />
			<view class="plsbuy-title-font">
				<view class="plsbuy-title-weight">纸尿裤-拉拉裤</view>
				<view class="plsbuy-title-flex">
					<view class="popup-right-font-contain">
						<view class="popup-font-left">
							规格型号：
						</view>
						<view class="popup-font-right">
							800mm*690mm
						</view>
					</view>
					<view class="popup-right-font-contain" style="margin-left: 40rpx;">
						<view class="popup-font-left">
							采购单位：
						</view>
						<view class="popup-font-right">
							片
						</view>
					</view>
				</view>
				<view class="plsbuy-title-flex">
					<view class="popup-right-font-contain">
						<view class="popup-font-left">
							库存上限：
						</view>
						<view class="popup-font-right">
							1000
						</view>
					</view>
					<view class="popup-right-font-contain" style="margin-left: 40rpx;">
						<view class="popup-font-left">
							库存下限：
						</view>
						<view class="popup-font-right">
							10
						</view>
					</view>
				</view>
				<view class="plsbuy-title-flex">
					<view class="popup-right-font-contain">
						<view class="popup-font-left">
							库存数量：
						</view>
						<view class="popup-font-right">
							50
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="plsbuy-card">
			<scroll-view scroll-y style="height: 100%;" :show-scrollbar="true">
				<view class="" v-for="(item,index) in [0,1,2,3,3,4]" :key="index">
					<view class="plsbuy-card-heng">
						<view class="plsbuy-weight">供应商：</view>
						<view class="plsbuy-font-right">长春市永佳利商贸有限公司1</view>
						<view class="plsbuy-right-weight">采购数量</view>
						<view class="plsbuy-jian" @click="calNumber--">-</view>
						<view class="plsbuy-number">{{calNumber}}</view>
						<view class="plsbuy-jia" @click="calNumber++">+</view>
					</view>
				</view>
			</scroll-view>
			<!-- <div class="blur-overlay"></div> -->
		</view>
		<view class="plsbuy-amount">
			<view class="plsbuy-amount-font">
				合计：
			</view>
			<view class="plsbuy-amount-red">
				100
			</view>
		</view>
		<view class="plsbuy-bottom">
			<view class="plsbuy-bottom-blue">
				新增供应商
			</view>
			<view class="plsbuy-bottom-blue">
				确认
			</view>
			<view class="plsbuy-bottom-white" @click="closeIt">
				取消
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		computed,
		nextTick,
		defineProps,
		watch
	} from 'vue';
	const emit = defineEmits(['closeIt'])	
	const calNumber = ref(50);
	const closeIt = () =>{
		emit('closeIt')
	}
</script>

<style lang="less" scoped>
	.plsbuy-contain {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.plsbuy-title {
			background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.5);
			background-blend-mode: screen;
			isolation: isolate;
			width: 1120rpx;
			height: 250rpx;
			margin-top: 50rpx;
			border-radius: 30rpx;
			box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
			display: flex;

			.plsbuy-title-img {
				height: 220rpx;
				width: 220rpx;
				margin-top: 10rpx;
				margin-left: 20rpx;
				margin-right: 80rpx;
			}

		}

		.plsbuy-card {
			margin-top: 20rpx;
			margin-left: 35rpx;
			margin-right: 35rpx;
			width: calc(100% - 70rpx);
			border-radius: 30rpx;
			position: relative;
			height: 300rpx;

			/* 虚化覆盖层 */
			.blur-overlay {
				position: absolute;
				bottom: 0rpx;
				left: 0;
				width: 100%;
				height: 40rpx;

				/* 背景模糊效果 */
				backdrop-filter: blur(3rpx);
				-webkit-backdrop-filter: blur(3rpx);

				/* 可选：为了更明显的虚化效果，可加个半透明背景 */
				// background-color: rgba(255, 255, 255, 0.2);

				/* 层级关系：确保覆盖在背景内容之上 */
				z-index: 2;

				/* 如果页面使用 flex 布局或其他定位方式，根据需要进行调整 */
				pointer-events: none;
				/* 如果不希望干扰下面内容的点击，可加上此属性 */
			}

			.plsbuy-card-heng {
				display: flex;
				align-items: center;
				height: 100rpx;
			}

		}
	}

	.plsbuy-title-font {
		height: 100%;
		width: 820rpx;

		.plsbuy-title-weight {
			font-size: 35rpx;
			font-weight: 700;
			width: 100%;
			margin: 20rpx 0;
		}

		.popup-right-font-contain {
			display: flex;
			width: 50%;
			align-items: center;
		}

		.popup-font-left {
			font-size: 30rpx;
			line-height: 30rpx;
			color: #646464;
		}

		.popup-font-right {
			font-size: 30rpx;
			line-height: 30rpx;

		}
	}

	.plsbuy-title-flex {
		display: flex;
		width: 100%;
		margin-bottom: 20rpx;
	}

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

	.plsbuy-right-weight {
		font-weight: 700;
		font-size: 35rpx;
		margin-left: 140rpx;
	}

	.plsbuy-font-right {
		font-size: 30rpx;
		line-height: 30rpx;
	}

	.plsbuy-jian {
		background-color: #D3E7FF;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-left: 30rpx;
		border: 1rpx solid #313A4E;
		font-size: 35rpx;
	}

	.plsbuy-number {
		font-weight: 700;
		margin: 0 20rpx;
		width: 40rpx;
	}

	.plsbuy-jia {
		background-color: #D3E7FF;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #313A4E;
		font-size: 35rpx;
	}

	.plsbuy-amount {
		width: 100%;
		justify-content: end;
		display: flex;
		font-size: 35rpx;
		margin-top: 20rpx;

		.plsbuy-amount-font {
			font-weight: 700;
		}

		.plsbuy-amount-red {
			font-weight: 700;
			color: red;
			margin-right: 60rpx;
		}
	}

	.plsbuy-bottom {
		width: 100%;
		margin-top: 30rpx;
		height: 70rpx;
		// background-color: #fff;
		display: flex;
		justify-content: center;
		font-size: 35rpx;
		.plsbuy-bottom-blue {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 230rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background: linear-gradient(to right bottom, #00c9ff, #0076ff);
			color: #fff;
			border: 1rpx #fff solid;
			margin-right: 20rpx;
			box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
		}

		.plsbuy-bottom-white {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 230rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
			// color: #fff;
			border: 1rpx #fff solid;
			margin-right: 20rpx;
			box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
		}
	}
</style>