<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" style="width: 75%;">
						<view class="popup-font-left">
							规格型号：
						</view>
						<view class="popup-font-right">
							800mm*690mm
						</view>
					</view>
					<view class="popup-right-font-contain">
						<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" style="width: 75%;">
						<view class="popup-font-left">
							库存上限：
						</view>
						<view class="popup-font-right">
							1000
						</view>
					</view>
					<view class="popup-right-font-contain">
						<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 :scroll-top="moveTop" style="height: 100%;width: 1150rpx;" :show-scrollbar="true">
				<view v-for="(item, index) in shopArray" :key="index" class="plsbuy-card-heng"
					:class="{ 'slide-out': item.sliding }">
					<view class="card-flex">
						<image class="plsbuy-card-img" src="/static/index/subtract.png" @click="startRemove(index)" />
						<view class="plsbuy-weight">供应商：</view>
						<view class="plsbuy-font-right">{{ item.name }}</view>
					</view>
					<view class="card-flex">
						<view class="plsbuy-right-weight">采购数量</view>
						<view :class="item.change===1?`plsbuy-jian-target`:`plsbuy-jian`" @click="subtractNumber(item)">
							-</view>
						<view :class="saveIndex==index ? `plsbuy-number-target` :`plsbuy-number`" @click="openRightCal(item.many,index)">{{ item.many }}</view>
						<view :class="item.change===2?`plsbuy-jia-target`:`plsbuy-jia`" @click="addNumber(item)">+
						</view>
					</view>
				</view>
			</scroll-view>
		</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" @click="addNewShop">
				新增供应商
			</view>
			<view class="plsbuy-bottom-blue" @click="closeIt">
				确认
			</view>
			<view class="plsbuy-bottom-white" @click="closeIt">
				取消
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		computed,
		nextTick,
		defineProps,
		watch
	} from 'vue';
	const emit = defineEmits(['closeIt', 'openRight', 'closeRight'])
	const props = defineProps({
		saveIndex: {
			type: Number,
			required: true,
		},
		changeNumber: {
			type: Number,
			required: true,
		},
	});
	watch(
		() => props.changeNumber,
		() => {
			shopArray.value[props.saveIndex].many = props.changeNumber;
		}
	)
	const calNumber = ref(50);
	const moveTop = ref(0);
	const shopName = ref({
		name: "长春市永佳利商贸有限公司",
		many: 0,
		change: 0
	})
	const shopArray = ref([{
		name: "长春市永佳利商贸有限公司",
		many: 9999,
		change: 0
	},
	{
		name: "长春市永佳利商贸有限公司",
		many: 0,
		change: 0
	},
	{
		name: "长春市永佳利商贸有限公司",
		many: 0,
		change: 0
	},
	]);
	const subtractNumber = (item) => {
		closeRight()
		item.many && item.many--
		item.change = 1
		setTimeout(() => {
			item.change = 0
		}, 300)
	}
	const addNumber = (item) => {
		closeRight()
		item.many < 9999 && item.many++
		item.change = 2
		setTimeout(() => {
			item.change = 0
		}, 300)
	}
	const addNewShop = () => {
		closeRight()
		if (canDo.value) {
			shopArray.value.push(JSON.parse(JSON.stringify(shopName.value)))
			//他的破组件是监听实现的，所以不这样写，他第二次不刷新
			moveTop.value = 998;
			nextTick(() => {
				moveTop.value = 999;
			})
		}
	}
	const closeIt = () => {
		closeRight()
		emit('closeIt')
	};
	const closeRight = () => {
		emit('closeRight')
	}
	const openRightCal = (num : number, index : number) => {
		emit('openRight', num, index)
	}
	const canDo = ref(true);
	/** 点击「删除」按钮，只把 sliding 设为 true，触发动画 */
	function startRemove(idx) {
		closeRight()
		if (canDo.value) {
			canDo.value = false;
			shopArray.value[idx].sliding = true; // 数据驱动触发动画 :contentReference[oaicite:0]{index=0}
			setTimeout(() => {
				shopArray.value.splice(idx, 1);
				canDo.value = true;
			}, 400)
		}
	}
</script>

<style lang="less" scoped>
	::v-deep ::-webkit-scrollbar {
		/* 滚动条整体样式 */
		display: block !important;
		width: 7rpx;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		/* 滚动条里面小方块 */
		border-radius: 5rpx !important;
		box-shadow: inset 0 0 1rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #CCCCCC !important;
	}

	.plsbuy-contain {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: url("/static/index/newpink.png") center/cover;

		.plsbuy-title {
			background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.8);
			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-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);
				z-index: 2;
				pointer-events: none;
			}

			.plsbuy-card-heng {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;

				.plsbuy-card-img {
					width: 40rpx;
					height: 40rpx;
					margin: 0 20rpx;
				}
			}

		}
	}

	.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;
		// justify-content: space-around;
		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-jian-target {
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		color: #fff;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-left: 30rpx;
		border: 1rpx solid #fff;
		font-size: 35rpx;
	}

	.plsbuy-number {
		border: 1rpx solid #313A4E;
		// padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		margin: 0 10rpx;
		// margin: 0 20rpx;
		width: 90rpx;
		height: 70rpx;
	}
	.plsbuy-number-target {
		color:#0076FF;
		border: 1rpx solid #0076FF;
		// padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		margin: 0 10rpx;
		// margin: 0 20rpx;
		width: 90rpx;
		height: 70rpx;
	}
	.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;
		margin-right: 5rpx;
	}

	.plsbuy-jia-target {
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		color: #fff;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #fff;
		font-size: 35rpx;
		margin-right: 5rpx;
	}

	.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);
		}
	}

	.card-flex {
		display: flex;
		align-items: center;
	}

	@keyframes slide-out {
		to {
			transform: translateX(100%);
			opacity: 0;
		}
	}

	/* 给添加了 .slide-out 的卡片触发动画 */
	.plsbuy-card-heng.slide-out {
		animation: slide-out 0.3s forwards;
		/* 0.3s 动画，结束后保持最终状态 :contentReference[oaicite:3]{index=3} */
	}
</style>