<template>
	<view>
		<view class="purbox guodu" :style="show?'top:6vh':'top:-99vh'">
			<view class="lfitem">
				<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop">
					
					<view class="pls-card" v-for="(v,i) in generatedOrder" :key='i' @click="clickLeftMenu(i)"
						:style="{borderColor: i==lefttarget? ``:`#fff` }">
		
						<view class="pls-card-title">
							<view class="title-left">
								{{v.cgdNo}}
							</view>
							<view class="title-right">
								<text style="position: absolute;bottom: 4rpx;left: -30rpx;">
									￥
								</text>

								<view class="title-right-big">
									{{Number(v.totalPrice).toFixed(2)}}
								</view>
							</view>
						</view>
						<view class="pls-card-middle">
							<view class="middle-heng"></view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									
								</view>
								<view class="middle-heng-father">
									<view class="middle-ball" style="background-color: #1083F8;"></view>
									
								</view>
								<view class="end-font">
									<view>
										采购
									</view>
								
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ Number(v.status)==1 ?``:v.jhTime?.replace(/-/g, '.') }}

								</view>
								<view class="middle-heng-father">
									<view class="middle-ball"></view>
								</view>
								<view class="end-font">
						
									<view>
										拣货
									</view>
									<view v-if="Number(v.status)==1 ">
										[ {{v.jhBy}} ]
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{v.wjTime?.replace(/-/g, '.')}}
								</view>
								<view class="middle-heng-father">
									<view class="middle-ball"></view>
								</view>
								<view class="end-font">
									<view>
										完结
									</view>
									
								</view>
							</view>
						</view>
						<view class="pls-card-end">
							<view class="end-left">
								<image class="end-left-img" src="/static/shili.png" />
								<view class="end-left-font">
									{{v.gysName}}
								</view>
							</view>
		
						</view>
					</view>
					<view class="pls-card-white center" v-if="generatedOrder.length<3">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="pls-card-white center" v-if="generatedOrder.length<2">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<!-- 解决margin重叠的问题
					<view class="nomargin">

					</view> -->
				</scroll-view>
			</view>
			<view class="rigitem">
				<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation enable-back-to-top @scroll="scroll"
					:scroll-top="scrolltoplist">
					<!-- <view style="height:2vw;"></view> -->
					<view class="fler" v-for="(v,index) in generatedOrder[lefttarget]?.cgdInfoList" :key="index">
						<view class="speitem guodu">
							<view class="imghs">
								<image :src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
									mode="aspectFill">
								</image>
							</view>
							<view class="cardp">
								<view v-if="v.categoryName">{{v.categoryName}}</view>
								<view v-if="v.typeName">{{v.typeName}}</view>
								<view v-if="v.medicationName">{{v.medicationName}}</view>
							</view>
						</view>
						<view class="msitem guodu">
							<view>
								<view>{{v.wlName}}</view>
								<text>{{v.wlMaterialNo}}</text>
								<text>￥ <text class="q">{{Number(v.totalPrice).toFixed(2) }}</text></text>
							</view>
							<view style="white-space: nowrap;margin-top: 30rpx;">
								<text style="white-space: nowrap;"> 规格型号: {{v.wlSpecificationModel}}</text>
							</view>
							<view style="margin-top: 3rpx;">
								<text>采购单价:
									￥{{v.arrivalPrice?Number(v.arrivalPrice).toFixed(2) : Number(v.procurementPrice).toFixed(2) }}</text>
								<text>采购单位: {{v.wlUnits}}</text>
							</view>
							<view></view>
							<view>
								<view style="align-items: flex-start;">
									<text style="color: #1083F8;">{{v.purchaseQuantity}}</text>
									<text style="color: #1083F8;">采购数量</text>
								</view>
								<view>
									<text>{{v.kcsl?v.kcsl:'0'}}</text>
									<text>库存数量</text>
								</view>
								<view>
									<text>{{v.wlUpperLimit}}</text>
									<text>物料上限 ↑</text>
								</view>
								<view>
									<text>{{v.wlLowerLimit}}</text>
									<text>↓ 物料下限</text>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 1.5vw;" v-if="generatedOrder[lefttarget]?.cgdInfoList.length>2"></view>
				</scroll-view>
				<view class="anniubtn">
					<view class="gb" @click="emit('cloe')">取消</view>
					<view class="scsgd" @click="connfig">生成采购单</view>
				</view>
				<!--  -->

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, watch } from 'vue';
	import { generatedPurchaseViewOrder, generatedPurchaseOrder } from '../api/lunpan.js'
	const emit = defineEmits(['cloe', 'config'])
	const leftscrolltop = ref(0);
	const scrolltoplist = ref(0);
	const lefttarget = ref(0);

	const form = reactive({
		nuId: '',
		pageNo: 1,
		pageSize: 9,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0,
		canpull: true
	})
	const props = defineProps({
		arrlist: {
			type: Array,
			default: []
		},

		show: {
			type: Boolean,
			default: false
		}
	})
	const generatedOrder = ref([])
	const serverUrl = ref('')
	onMounted(() => {
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
	})
	watch(
		() => props.show,
		() => {
			if (props.show == true) {
				generatedOrder.value = props.arrlist;
			}
		}
	)
	const oldscl = ref(0)
	const scroll = (e) => {
		oldscl.value = e.detail.scrollTop
	}
	const clickLeftMenu = (index : any) => {
		let num = Math.ceil((index + 1))
		leftscrolltop.value = (num - 2) * 188;
		lefttarget.value = index;
		scrolltoplist.value = 0;
		form.cgdId = generatedOrder.value[index].id
		form.pageNo = 1
		form.canpull = true;
		scrolltoplist.value = oldscl.value;
		nextTick(() => {
			scrolltoplist.value = 0
		});
		// console.log("!!!!",form)
	}
	const timerflag = ref(true);
	const connfig = () => {
		if (timerflag.value == false) { return }
		timerflag.value = false;
		generatedPurchaseOrder(generatedOrder.value).then(res => {
			uni.showToast({
				icon: res.success ? 'success' : 'none',
				title: res.message
			})
			setTimeout(() => {
				if (res.success) {
					emit('config')
					timerflag.value = true;
				}
			}, 700)
		})
	}
</script>

<style scoped lang="less">
	.anniubtn {
		width: 100%;
		height: 7vw;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.gb {
			width: 10vw;
			background: #EDEDEF;
			color: #888888;
		}

		.scsgd {
			width: 12vw;
			background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
			border: 1px solid rgba(3, 133, 250, 0.34);
			color: #0385FA;
		}

		view {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 1.5vw;
			border-radius: 1.6vw;
			font-weight: 400;
			font-size: 1.6vw;
			height: 3.8vw;
		}
	}

	.purbox {
		width: 83vw;
		height: 90vh;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(136, 141, 153, 0.26);
		border-radius: 1.6vw;
		position: fixed;
		top: 6vh;
		left: 8.5vw;
		z-index: 133;
		display: flex;
		overflow: hidden;

		.lfitem {
			width: 33vw;
			height: 100%;
			background: #EFF0F4;
		}

		.rigitem {
			width: 50vw;
			height: 100%;
			background: #fff;


			.crdcroll {
				width: 100%;
				height: calc(90vh - 9.5vw);
				margin-top: 1.5vw;
			}

			.actve {
				border: 2px solid #1083F8 !important;
			}

			.fler {
				width: 47vw;
				height: 15.5vw;
				border-radius: 1.6vw;
				border: 1rpx solid #c9c9c9;
				background: #fff;
				position: relative;
				margin: 0 auto 1.2vw;
				display: flex;
				overflow: hidden;
				justify-content: flex-start;
				white-space: nowrap;

				.zkf {
					width: 7vw;
					right: -7vw;
				}


				.msitem {
					width: 25vw;
					height: 100%;
					padding: 0.5vw 1vw 1vw;
					display: inline-block;

					>view {
						margin-top: 0.8vw;

						&:nth-child(5) {
							
							width: 30vw;
							height: 3.4vw;
							display: flex;
							justify-content: space-between;
							position: relative;
							left: 0;

							>view {
								// margin-top: 10rpx;
								width: 25%;
								height: 100%;
								display: flex;
								flex-direction: column;
								position: relative;
								align-items: center;
								// background-color: red;

								&:nth-child(1) {
									text-align: left;

								}

								&:nth-child(2),
								&:nth-child(3),
								&:nth-child(4) {
									text-align: center;
									
								}

								text {
									&:nth-child(1) {
										font-weight: bold;
										font-size: 1.7vw;
										color: #555555;
									}

									&:nth-child(2) {
										font-weight: 400;
										font-size: 1.1vw;
										color: #999999;
									}
								}
							}
						}

						&:nth-child(2),
						&:nth-child(3),
						&:nth-child(4) {
							display: flex;
							justify-content: space-between;
							

							text {
								font-weight: 400;
								font-size: 1.4vw;
								color: #757575;
							}
						}

						&:nth-child(1) {
							width: 28vw;
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 2vw;
							margin-top: 1vw;
							white-space: nowrap;
							flex: auto;

							>view {
								width: 13vw;
								height: 2vw;
								font-weight: bold;
								font-size: 1.6vw;
								color: #222222;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}

							text {
								min-width: 3vw;
								font-weight: 400;
								font-size: 1.4vw;
								color: #222222;
								white-space: nowrap;
								text-align: right;

								.q {
									color: #555555;
									font-size: 1.6vw;
									font-weight: 800;
									width: 100%;
									text-align: right;
								}
							}
						}
					}
				}

				// .spleft{
				// 	margin-left: -15vw !important;
				// }
				.speitem {
					width: 15vw;
					height: 100%;
					display: flex;
					flex-direction: column;
					position: relative;

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

						view {
							min-width: 5.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: 1vw;
							color: #555555;
							padding: 0 0.5vw;

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

					.imghs {
						width: 10vw;
						height: 9vw;
						margin: 0.8vw auto 0.25vw;
						padding: 0.2vw;
						background: #fff;

						>image {
							border-radius: 1vw;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.left-menu-scroll {
		height: 98%;
		margin-top: 4.8%;
		width: 100%;
		// background-color: red;
		
		.pls-card-white{
			width: 30vw;
			height: 182px;
			border: #fff 3rpx solid;
			background-color: #fff;
			border-radius: 40rpx;
			// margin: 0 auto 1.2vw auto;
			margin: 0 auto;
			margin-bottom: 1.2vw;
			// margin-bottom: 1.2vw;
			
			padding: 0 30rpx;
			position: relative;
		}

		.pls-card {
			width: 30vw;
			height: 182px;
			border: #0f9fff 3rpx solid;
			background-color: #fff;
			border-radius: 40rpx;
			// margin: 0 auto 1.2vw auto;
			margin: 0 auto;
			// margin-top: 1.2vw;
			margin-bottom: 1.2vw;

			padding: 0 30rpx;
			position: relative;

			.pls-card-title {
				height: 5.5vh;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.title-left {
					font-weight: 600;
					font-size: 32rpx;
				}

				.title-right {
					display: flex;
					align-items: flex-end;
					font-size: 30rpx;
					position: relative;

					.title-right-big {
						font-weight: 600;
						font-size: 40rpx;
					}

					.title-right-img {
						position: absolute;
						right: -10rpx;
						bottom: 6rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.pls-card-middle {
				width: 100%;
				height: 11vh;
				margin-top: 1vw;
				position: relative;
				display: flex;

				.middle-heng {
					position: absolute;
					left: 4%;
					top: 35%;
					transform: translateY(-35%);
					width: 92%;
					height: 2px;
					/* 虚线粗细 */
					background-image: repeating-linear-gradient(to right,
							#E5E5E5 0,
							#E5E5E5 6px,
							transparent 6px,
							transparent 10px);

				}

				.pls-card-middle-one {
					width: 33.3%;
					height: 100%;

					// background-color: yellow;
					.middle-title {
						width: 100%;
						height: 2vh;
						// background-color: #007CFF;
						color: #888888;
						text-align: center;
						font-size: 25rpx;
					}

					.middle-heng-father {
						width: 100%;
						height: 4vh;
						position: relative;

						.middle-ball-img {
							width: 35rpx;
							height: 35rpx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}

						.middle-ball {
							width: 20rpx;
							height: 20rpx;
							background-color: #EEEEEE;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							border-radius: 50%;
						}
					}

					.end-font {
						width: 100%;
						height: 6vh;
						text-align: center;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 25rpx;
					}
				}
			}

			.pls-card-end {
				width: 100%;
				height: 7vh;
				margin-top: 0.5vw;
				display: flex;
				justify-content: space-between;
				position: relative;

				.end-left {
					height: 100%;
					display: flex;
					align-items: center;

					.end-left-img {
						width: 30rpx;
						height: 30rpx;
					}

					.end-left-font {
						margin-top: 3rpx;
						width: 500rpx;
						// background-color: #007CFF;
						// font-size: 26rpx;
						color: #666666;
						margin-left: 10rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.tag-fail {
					width: 120rpx;
					height: 50rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #FDEBEC;
					color: #FF5757;
					position: absolute;
					right: -5rpx;
					bottom: 20rpx;
				}

				.tag-success {
					width: 120rpx;
					height: 50rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ECF6FF;
					color: #1083F8;
					border: 1rpx solid #1083F8;
					position: absolute;
					right: -5rpx;
					bottom: 20rpx;
				}
			}
		}
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.nomargin {
		height: 0.6vw;
	}

	.que {
		width: 10vw;
		height: 10vw;
		// margin: auto;

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

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

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
		// border-color: #fff;
	}
</style>