<template>
	<view>
		<view class="wuliao guodu" :style="!show?'width: 0;right:-7vw':'width: 52.6vw'">
			<view class="crktop">
				<view class="title">
					<view></view>
					物料信息
				</view>
			</view>

			<view class="xinxi">
				<view class="carditem guodu">
					<view class="cgsl">
						<text>{{ Number(pushcrkitem.kcsl || 0).toFixed(2) }}</text>
						<view>库存数量</view>
					</view>
					<view class="speitem guodu">
						<view class="imghs">
							<image style="border-radius: 1vw;"
								:src="pushcrkitem.materialImg?serverUrl+pushcrkitem.materialImg:'/static/index/procurement/k.png'"
								mode="aspectFill">
							</image>
						</view>
						<view class="cardp">
							<view>{{ pushcrkitem.categoryId_dictText }}</view>
							<view>{{ pushcrkitem.typeId_dictText }}</view>
						</view>
					</view>
					<view class="msitem guodu">
						<view>
							<view>{{ pushcrkitem.materialName }}</view>
						</view>
						<view style="margin-top: 1vw;">
							<text style="white-space: nowrap;"> 物料编码: {{ pushcrkitem.materialName }}</text>
						</view>
						<view>
							<text style="white-space: nowrap;"> 规格型号: {{ pushcrkitem.specificationModel }}</text>
						</view>
						<view>
							<text style="white-space: nowrap;"> 品牌型号：{{ pushcrkitem.brandType }}</text>
						</view>
						<view>
							<text style="white-space: nowrap;"> 生产厂家：{{ pushcrkitem.manufacturer }}</text>
						</view>
						<view>
							<text style="white-space: nowrap;"> 供 应 商 ：{{ pushcrkitem.gysName }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="getMoreArray()"lower-threshold="300" >
				<view class="cgqlpd" v-for="(item,index) in showotherarray" :key="index" >
					<view>
						<text>采购单号：<text class="hei">{{ item.ddNo }}</text></text>
						<text> <text class="rhei">{{ item.crkNum }} </text> <text style="color: #2391FA;" v-if="item.gzsl" > +{{ item.gzsl }}挂 </text> <text style="color: #FF6161;" v-if="item.xzsl">-{{ item.xzsl }}销</text></text>
					</view>
					<view>
						<text>采 购 人 ： {{ item.cgBy }}</text>
						<text></text>
					</view>
					<view>
						<text>采购时间： {{ item.createTime }}</text>
						<view v-if="item.pdType==`1`" class="kui" style="background-color: #2391FA;" >盘盈</view>
						<view v-if="item.pdType==`2`" class="kui">盘亏</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent,watch } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { queryCrkInfoList } from '../api/api.js'

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		pushcrkitem: {
			type: Object
		}
	})
	const serverUrl = uni.getStorageSync('serverUrl') + '/sys/common/static/';
	const pageNo = ref(1);
	const showotherarray = ref([]);
	
	watch(
		() => props.show,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				pageNo.value = 1;
				getmorelock.value = false
				let data = {
					pageNo:pageNo.value,
					wlId:props.pushcrkitem.wlId,
					cgdId:props.pushcrkitem.cgdId,
				}
				queryCrkInfoList(data).then((res:any)=>{
					if (res.success) {
						showotherarray.value = res.result.records
						// console.log("小列表",res.result.records)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none', // 可选值：'success'、'loading'、'none'
							duration: 2000   // 持续时间，单位ms
						})
					}
				})
			}
		}
	)
	const getmorelock = ref(false)
	const getMoreArray = () => {
		if(!getmorelock.value){
			pageNo.value ++;
			let data = {
				pageNo:pageNo.value,
				wlId:props.pushcrkitem.wlId,
				cgdId:props.pushcrkitem.cgdId,
			}
			queryCrkInfoList(data).then((res:any)=>{
				if (res.success) {
					showotherarray.value.push(...res.result.records) 
					if(res.result.records.length!==15){
						getmorelock.value = true;
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none', // 可选值：'success'、'loading'、'none'
						duration: 2000   // 持续时间，单位ms
					})
				}
			})
		}
		
	}
</script>

<style scoped lang="less">
	.wuliao {
		height: 100vh;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 105;
		border-radius: 3vw 0 0 3vw;
		padding: 0 3.5vw;
		overflow: hidden;

		.cgqlpd {
			width: 100%;
			height: 13.35vw;
			border-bottom: 1px solid #DCDCDC;
			padding: 3.2vw 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			view {
				width: 100%;
				display: flex;
				justify-content: space-between;
				height: 2vw;
				align-items: center;
			}

			.hui {
				font-size: 1.4vw;
				color: #777777;

			}

			.hei {
				font-weight: bold;
				font-size: 1.4vw;
			}

			.rhei {
				font-size: 1.9vw;
				font-weight: bold;
			}

			.rxiao {
				font-size: 1.2vw;
				font-weight: bold;
			}

			.rjian {
				font-weight: bold;
				font-size: 19px;
				color: #FD3F3F;
			}

			.rjia {
				font-weight: bold;
				font-size: 1.9vw;
				color: #0384F8;
			}

			.kui {
				width: 3.3vw;
				height: 1.6vw;
				background: #FD3F3F;
				border-radius: 0.3vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.1vw;
				color: #FFFFFF;
			}

			.ying {
				width: 3.3vw;
				height: 1.6vw;
				background: #0384F8;
				border-radius: 0.3vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.1vw;
				color: #FFFFFF;
			}

		}

		.xinxi {
			width: 45vw;
			height: 15.6vw;
			border-bottom: 1px solid #DCDCDC;
			position: relative;

			.carditem {
				height: 100%;
				display: flex;
				transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
				will-change: transform;
				position: relative;

				.cgsl {
					position: absolute;
					width: 5vw;
					height: 4.5vw;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					right: 2vw;
					top: -4vw;

					text {
						font-weight: bold;
						font-size: 2.3vw;
						color: #222222;
						font-style: normal;
						text-transform: none;
						margin: 0.6vw 0;
					}

					view {
						font-size: 1.3vw;
						color: #777777;
						white-space: nowrap;
					}
				}



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

				.add {
					width: 4.5vw;
					height: 100%;
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					top: 50%;
					transform: translateY(-50%);
					// top: 0.8vw;
					right: 16vw;
					// background-color: red;

					>view {
						width: 5.5vw;
						height: 2.2vw;
						background: #fff;
						border-radius: 0.9vw;
						border: 1px solid #1083F8;
						font-weight: 400;
						font-size: 1.4vw;
						color: #1083F8;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: 2.3vw;
						right: 0.8vw;
					}

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

				.msitem {
					min-width: 22vw;
					height: 14vw;
					margin-right: 4.2vw;
					position: relative;

					>view {

						&:nth-child(2),
						&:nth-child(3),
						&:nth-child(4),
						&:nth-child(6),
						&:nth-child(5) {
							margin-top: 0.25vw;
							max-width: 25vw;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;

							text {
								font-weight: 400;
								font-size: 1.3vw;
								color: #777777;
								margin-top: 0.25vw;
							}
						}

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

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

							text {
								width: 6vw;
								font-weight: 300;
								font-size: 1.4vw;
								color: #222222;
							}
						}
					}

					>.wlsy {
						width: 100%;
						height: 3.4vw;
						display: flex;
						justify-content: space-between;
						margin-top: 0vw;

						>view {
							width: 33.3%;
							height: 100%;
							display: flex;
							flex-direction: column;
							position: relative;
							margin-top: 1vw;

							&:nth-child(1) {
								width: 30%;
								align-items: left;
							}

							&:nth-child(2) {
								width: 40%;
								align-items: center;
							}

							&:nth-child(3) {
								width: 30%;
								text-align: right;
								align-items: right;
							}

							&:nth-child(2)::after {
								content: '';
								position: absolute;
								right: 0;
								width: 100%;
								height: 2.2vw;
								border-left: 1px solid #C9C9C9;
								border-right: 1px solid #C9C9C9;
								top: 0.6vw;
							}

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

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

				// .spleft{
				// 	margin-left: -15vw !important;
				// }
				.speitem {
					min-width: 14.8vw;
					height: 14vw;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.cardp {
						width: 12.5vw;
						height: 4vw;
						display: flex;
						flex-wrap: wrap;
						margin: 0 auto;
						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.25vw;

							&: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;
							}

							&:nth-child(3) {
								max-width: 11.5vw;
								padding: 0 0.8vw;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								display: block;
								line-height: 1.8vw;
								text-align: center;
							}
						}
					}

					.imghs {
						width: 10vw;
						height: 10vw;
						margin: 1vw auto 0.25vw;
						padding: 0.2vw;
						background: #fff;
						border-radius: 1.1vw;

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

				}
			}
		}

		.crktop {
			width: 100%;
			height: 6vw;
			display: flex;
			align-items: center;

			.title {
				font-size: 1.7vw;
				color: #222222;
				display: flex;
				align-items: center;

				view {
					width: 0.5vw;
					height: 1.4vw;
					background: radial-gradient(0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
					border-radius: 0.2vw;
					margin-right: 1vw;
				}
			}
		}
	}

	.guodu {
		transition: .3s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	
	.scroll-view{
		width: 100%;
		height: 40vw;
		
	}
</style>