<template>
	<view>
		<view class="mengban" v-if="show" @click="emit('close')"></view>
		<view class="box guodu"  :class="show?'':'unclass'" :style="showbox?'z-index:999':'z-index:-2'">
			<view class="left-selecttype">
				<view :class="selectType===index?`selecttype-target`: `selecttype`"
					v-for="(item,index) in tagsarray" @click="changetype(index)">
					{{ item }}
				</view>
				<view class="heng-blue" :style="{ left: `${selectType === 0 ? 18 : 18 + selectType * 30}%` }">
				</view>
			</view>
			<scroll-view scroll-y="true" class="scol"  @scrolltolower="scrolltolower()" enable-back-to-top enable-flex :scroll-top="scrolltop" @scroll="scroll">
				<view>
					<view class="items guodu" v-for="(v,i) in pddlist" :key='i' :class="{'itembord0':v.zk==true,'dczk':v.dczk==true&&v.zk==true}">
						<view class="speitem guodu">
							<view class="imgs">
								<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="wuli">
							<view class="tite">{{v?.materialName}}</view>
							<view class="cot">
								<text>物料编码：</text>
								{{v?.materialNo}}
							</view>
							<view class="cot">
								<text>物料单位：</text>
								{{v?.materialUnits}}
							</view>
							<view class="cot" style="white-space: nowrap;display: block;overflow: hidden;text-overflow: ellipsis;height: 1.5vw;">
								<text style="display: inline-block;">规格型号：</text>{{v?.specificationModel}}
							</view>
							<view class="wltwo">
								<view>
									<view>{{v?.dqkcsl}}</view>
									<text>库存数量</text>
								</view>
								<view class="dot">
									<view style="text-align: right;">{{v?.pdsl?v?.pdsl:'--'}}</view>
									<text>盘点数量</text>
								</view>
							</view>
						</view>
						<view class="chae">
							<!-- pdType 1:b/ 2:r -->
							<view :class="{b:v?.pdType==1,r:v?.pdType==2&&v?.cesl>0}">{{v?.pdType==2&&v?.cesl>0?'-':''}}{{v?.cesl!=null?v?.cesl:'--'}}</view>
							<text>差额</text>
						</view>
						 
					</view>
				</view>
			</scroll-view>
			<view class="submit">
				<view>取消</view>
				<view @click="subits">确定</view>
			</view>
		</view>
		<errorshow :show="openerror" :font="errmsg" @close="openerror=false"  />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryPddInfoList,editPddInfo,submitPddMain } from '../api/lunpan.js'
	const selectType = ref(0);
	const scrolltop = ref(0);
	const tagsarray = ref(["全部", "盘盈", "盘亏"]);
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/');
	const emit = defineEmits([ 'close' , 'tabitem' ,'right' ]);
	const errmsg = ref('');
	const openerror = ref(false)
	const props = defineProps({
		show: {
			type: Boolean 
		},
		pddobj:{
			type:Object
		}
	});
	const showbox = ref(false)
	watch(
		()=>props.show,
		()=>{
			if(props.show){
				pandian();
				setTimeout(()=>{
					showbox.value = true;
				},50)
	}else{
		setTimeout(() => {
			showbox.value = false;
		}, 400)
	}})
	const pageNo = ref(1);
	const pddlist = ref([]);
	const status = ref('loadmore');
	const pandian = ()=>{
		let obj = {
			pddId:props.pddobj.id,
			paramType:selectType.value==0?'':selectType.value,
			pageNo:pageNo.value,
			pageSize:10
		}
		queryPddInfoList(obj).then(res=>{
			pddlist.value.push(...res.result.records);
			status.value = (res.result.total == pddlist.value.length ? 'nomore' : 'loadmore');
		})
	}
	const changetype = (index : number) => {
		if (selectType.value == index ) {
			return
		}
		scrolltop.value = top.value;
		setTimeout(() => {
			scrolltop.value = 0
		}, 50)
		selectType.value = index;
		
		pageNo.value = 1;
		pddlist.value = [];
		pandian();
	}
	const top = ref(0)
	const scroll = (e) => {
		top.value = e.detail.scrollTop;
	}
	const scrolltolower = () => {
		 if(status.value == 'loading' || status.value == 'nomore'){return}
		 status.value = 'loading'
		 pageNo.value++;
		 pandian()
	}
	const subits = ()=>{
		submitPddMain({id:props.pddobj.id}).then(res=>{
			if(res.success){
				uni.showToast({
					icon:'success',
					title:res.message
				})
				emit('close');
				setTimeout(()=>{
					uni.navigateBack()
				},800)
			}else{
				errmsg.value = res.message;
				openerror.value = true;
			}
		})
	}
</script>

<style scoped lang="less">
	.unclass {
		opacity: 0 !important;
	}
	.submit{
		width: 100%;
		height: 3.2vw;
		margin-top: 0.4vw;
		padding-right: 2vw;
		display: flex;
		justify-content: flex-end;
		view{
			display: flex;
			justify-content: center;
			align-items: center;
			&:nth-child(1){
				width: 7.1vw;
				height: 3.2vw;
				background: #F8F8F8;
				border-radius: 1.6vw;
				border: 1px solid #E5E5E5;
				font-weight: 400;
				font-size: 1.4vw;
				color: #555555;
			}
			&:nth-child(2){
				width: 7.1vw;
				height: 3.2vw;
				background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
				border-radius: 1.6vw;
				border: 1px solid rgba(3,133,250,0.34);
				font-weight: 400;
				font-size: 1.4vw;
				color: #1083F8;
				margin-left: 0.7vw;
			}
		}
	}
	.scol{
		width: 102%;
		height: 33.4vw;
		display: flex;
		margin-top: 0.6vw;
		.items {
			width: 30.5vw;
			height: 16vw;
			background: rgba(249, 249, 249, 1);
			border-radius: 1.6vw;
			display: inline-block;
			margin: 0 0.8vw 0.5vw 0;
			position: relative;
			z-index: 20;
			top: 0;
		
		
			.chae {
				width: 4vw;
				height: 4vw;
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 1vw 2vw 0 0;
		
				view {
					font-weight: bold;
					font-size: 1.8vw;
				}
		
				text {
					font-weight: 400;
					font-size: 1vw;
					color: #888888;
				}
		
				.r {
					color: #FF5757;
				}
		
				.b {
					color: rgba(16, 131, 248, 1);
				}
			}
		
			.pandian {
				width: 3.3vw;
				height: 3.3vw;
				position: absolute;
				right: 0;
				bottom: 0;
		
				image {
					width: 1.7vw;
					height: 1.7vw;
				}
			}
		
			.wuli {
				width: 18vw;
				height: 100%;
				overflow: hidden;
				position: absolute;
				left: 12vw;
				top: 0;
		
				.wltwo {
					width: 11vw;
					height: 3.7vw;
					display: flex;
					margin-top: 1.2vw;
					justify-content: space-between;
		
					>view {
						// min-width: 5vw;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						position: relative;
						align-items: left;
						padding: 0 1vw;
		
						view {
							font-weight: bold;
							font-size: 1.7vw;
							color: #555555;
						}
		
						text {
							font-weight: 400;
							font-size: 1.2vw;
							color: #999999;
							white-space: nowrap;
							display: block;
						}
		
					}
		
					.dot::after {
						content: '';
						width: 1px;
						height: 3.3vw;
						position: absolute;
						left: 0;
						bottom: 0;
						border-right: 1px solid rgba(230, 230, 230, 1);
					}
				}
		
				.cot {
					width: 18vw;
					font-weight: 400;
					font-size: 1.3vw;
					color: rgba(85, 85, 85, 1);
					margin-top: 0.2vw;
		
					text {
						color: rgba(153, 153, 153, 1);
						font-size: 1.2vw;
						font-weight: 300;
					}
				}
		
				.tite {
					width: 13vw;
					font-weight: bold;
					font-size: 1.6vw;
					color: #222222;
					height: 2vw;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					margin: 1.3vw 0 1.2vw 0;
				}
		
			}
		
			.speitem {
				width: 12vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				position: absolute;
				left: 0;
				top: 0;
		
				.cardp {
					width: 12vw;
					height: 4vw;
					display: flex;
					flex-wrap: wrap;
					margin: 0 auto;
					align-items: center;
					view {
						min-width: 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: 0.8vw;
						color: #555555;
						padding: 0 0.25vw;
		
						&:nth-child(1),
						&:nth-child(2) {
							max-width: 5.5vw;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							display: block;
							line-height: 1.8vw;
							text-align: center;
						}
					}
				}
		
				.imgs {
					width: 9.8vw;
					height: 9.8vw;
					background: #F8F8F8;
					border-radius: 1.1vw;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0.8vw auto 0;
		
					>image {
						width: 8.8vw;
						height: 7.5vw;
					}
				}
		
			}
		}
		
		
	}
	.left-selecttype {
		width: 450rpx;
		height: 70rpx;
		border-radius: 40rpx;
		display: flex;
		padding-right: 30rpx;
		padding-left: 15rpx;
		position: relative;
		left: -2vw;
	
		.heng-blue {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 25rpx;
			height: 8rpx;
			border-radius: 10rpx;
			background-color: #1083F8;
			transition: 0.3s all ease;
	
		}
	
		.selecttype {
			width: 33.3%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999999;
			font-size: 31rpx;
			position: relative;
	
		}
	
		.selecttype-target {
			width: 33.3%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #222222;
			font-size: 31rpx;
			font-weight: 600;
			position: relative;
		}
	}
	.box{
		width: 66.2vw;
		height: 43.5vw;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(163,167,182,0.16);
		border-radius: 16rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 999;
		padding:1.5vw 2vw;
	}
	.mengban{
		width: 100vw;
		height: 100vh;
		background: #EFF0F4;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0.6;
		z-index: 200;
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>
