<template>
	<view>
		<view class="crkcard guodu"  :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
			<view class="titletop">
				出入库
			</view>
			<view class="select">
				<view>
					<text>总计:{{wlobjs.crkzl}}笔</text>
					<text>出库：{{wlobjs.cksl}}</text>
					<text>入库：{{wlobjs.rksl}}</text>
				</view>
				<view>
					<view @click="crflag = !crflag">
						{{crkarr[cr].name}}
						<image src="/static/index/hulilist/xia.png" class="guodu" :style="crflag?'transform: rotate(180deg);':''" mode="aspectFill"></image>
						<view class="mengban" v-if="crflag" @click.stop="crflag = false"></view>
						<view class="tanchu guodu" :style="crflag?'height:15vw ':'height:0vw;'" >
							<view class="gysscrol" v-if="crflag">
								<view v-for="(v,i) in crkarr" :key='i' :class="cr==i?'acts':''" @click.stop="gysid(v,i)">
									<text>{{v.name}}</text>
									<image src="/static/index/procurement/d.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					<view  @click="tive()">
						{{actv?'日期从近到远':'日期从远到近'}}
						<image src="/static/index/hulilist/xia.png" class="guodu" :style="!actv?'transform: rotate(180deg);':''" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="crkscroll" scroll-with-animation @scrolltolower="scrolltolower()">
				<view class="cgrk" v-for="(v,i) in list" :key='i'>
					<view>
						<text>{{v.crkType_dictText}}-{{v.crkStatus_dictText}}</text>
						<text>{{v.content}}</text>
						<text>{{v.createTime}}</text>
					</view>
					<view>
						<text :class="v.crkStatus!=1?'c':'l'">{{v.crkStatus==1?'+':'-'}}{{v.crkNum}}</text>
						<text>库存：{{v.dqkcl}}</text>
						<text> </text>
					</view>
				</view>
				<defaults cont="暂无内容" v-if="list.length == 0 && status == 'nomore'"></defaults>
				<view style="height:2vw;width: 100%;display: flex;align-items: center;justify-content: center;">
					<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="list.length>3" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick ,defineComponent,watch} from 'vue';
	import { queryCrkInfoNumList ,queryCrkInfoList } from '../api/lunpan.js'
	import defaults from './default.vue';
	const props = defineProps({ 
			 wl:{
				 type:Object
			 },
			 show: {
			 	type: Boolean,
			 	default:false,
			 	required: true,
			 },
	})
	const actv = ref(true);
	const tive = ()=>{
		actv.value = !actv.value;
		pageNo.value = 1;
		list.value = [];
		InfoList()
	}
	 const showbox = ref(false)
	 watch(()=>props.show,
	 	()=>{
	 		if(props.show==true){
				InfoNum();
				InfoList();
	 			setTimeout(()=>{
	 				showbox.value = true;
	 			},10)
	 		}else{
				pageNo.value = 1;
				setTimeout(() => {
					showbox.value = false;
					list.value = [];
					crflag.value = false;
				}, 400)
			}
	 	})
	const crkarr = ref([
		{name:'全部',value:''},
		{name:'入库',value:'1'},
		{name:'出库',value:'3'}
	])
	
	const gysid = (v,i) =>{
		cr.value = i;
		crflag.value = false;
		pageNo.value = 1;
		list.value = [];
		InfoList();
	}
	const crflag = ref(false);
	const pageNo = ref(1);
	const cr = ref(0);
	
	const list = ref([])
	const InfoList = () =>{
		let obj = {
			crkStatus:crkarr.value[cr.value].value,
			wlId:props.wl.wlId,
			nuId:props.wl.nuId,
			colomnDesc:actv.value?'desc':'asc',//asc正序，desc倒叙
			pageNo:pageNo.value,
			pageSize:10
		}
		queryCrkInfoList(obj).then(res=>{
			console.log(res.result.records)
			list.value.push(...res.result.records);
			status.value = (res.result.total == list.value.length ? 'nomore' : 'loadmore')
		})
	}
	const status = ref('loadmore')
	const scrolltolower = () =>{
		if (status.value == 'loading' || status.value == 'nomore') { return }
		status.value = 'loading';
		pageNo.value++;
		InfoList()
	}
	const wlobjs = ref({})
	const InfoNum = () =>{
		queryCrkInfoNumList({wlId:props.wl.wlId,nuId:props.wl.nuId}).then(res=>{
			wlobjs.value = res.result;
		})
	}
</script>

<style scoped lang="less">
// 出入库
.unclass {
		opacity: 0 !important;
	}
.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.uncrkcard {
		top: -86vw !important;
	}

	.crkcard {
		width: 36vw;
		height: 85vh;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
		border-radius: 1.6vw;
		position: fixed;
		right: 32vw;
		top: 5vw;
		padding: 1.7vw;
		z-index: 112;
		.titletop{
			width: 100%;
			height: 3.5vw;
			font-weight: bold;
			font-size: 1.8vw;
			color: #333333;
			line-height: 2.5vw;
		}

		.crkscroll {
			width: 100%;
			height: calc(85vh - 15vw);
			margin-top: 1vw;
			.cgrk {
				width: 100%;
				height: 11vw;
				background: rgba(236, 237, 239, 0.4);
				border-radius: 1.6vw;
				margin: 0.8vw auto 0;
				padding: 1.8vw 1.6vw;
				display: flex;
				justify-content: space-between;

				>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&:nth-child(1) {
						text {

							&:nth-child(2),
							&:nth-child(3) {
								font-weight: 400;
								font-size: 1.4vw;
								color: #888888;
							}

							&:nth-child(1) {
								font-weight: bold;
								font-size: 1.5vw;
								color: #333333;
							}
						}
					}

					&:nth-child(2) {
						.c {
							color: #FF6600 !important;
						}

						.l {
							color: #0076D6 !important;
						}

						text {
							font-weight: 400;
							font-size: 1.4vw;
							color: #888888;
							text-align: right;

							&:nth-child(2) {
								font-weight: bold;
								font-size: 1.8vw;
								color: #333333;
							}
						}
					}
				}
			}
		}

		.select {
			width: 100%;
			height: 7vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 1vw 0 0 1.5vw;

			>view {
				display: flex;
				margin-left: 1.5vw;
				&:nth-child(1) {
					justify-content: space-between;

					text {
						font-weight: 400;
						font-size: 1.5vw;
						color: #555555;
					}
				}
				
				&:nth-child(2) {
					justify-content: flex-end;

					>view {
						min-width: 5vw;
						height: 2.6vw;
						border-radius: 1.3vw;
						border: 1px solid #DCDCDC;
						align-items: center;
						display: flex;
						align-items: center;
						margin: 0 0.5vw;
						position: relative;
						padding:  0 1vw;
						>.tanchu{
							width: 10vw;
							max-height: 23vh;
							background: #FFFFFF;
							box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174,175,176,0.35);
							border-radius: 1.1vw;
							padding: 0 1.4vw;
							position: absolute;
							left: -2vw;
							top: 3vw;
							z-index: 211;
							display: flex;
							flex-direction: column;
							.gysscrol{
								width: 100%;
								height: 100%;
								.acts{
									color: #0385FA !important;
									image{
										display: block;
									}
								}
								view{
									display: flex;
									justify-content: space-between;
									align-items: center;
									font-weight: 400;
									font-size: 1.5vw;
									color: #666666;
									height: 7vh;
									position: relative;
									&:nth-child(1){
										// margin-top: 1.2vw;
									}
									image{
										position: absolute;
										right: 0.2vw;
										top: 50%;
										transform: translateY(-50%);
										width: 1vw !important;
										height: 0.7vw !important;
										display: none;
									}
								}
							}
							
						}
						image {
							width: 0.7vw;
							height: 0.5vw;
							margin-left: 0.4vw;
						}

					}
				}
				
				.act{
					background: linear-gradient(to bottom, #00C9FF, #0076FF);
					color: #fff;
				}
			}
		}
		.mengban{
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 210;
		}
		.shopcont {
			width: 100%;
			height: 10vw;
			background: rgba(236, 237, 239, 0.3);
			border-bottom: 1px solid #DCDCDC;
			display: flex;
			align-items: center;

			.cont {
				width: 26vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				position: relative;
				padding: 2vw 0;

				view {
					&:nth-child(4) {
						width: 5vw;
						height: 5vw;
						background: rgba(236, 237, 239, 1);
						border-radius: 1.4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						font-weight: 400;
						font-size: 1vw;
						position: absolute;
						color: #888888;
						top: 2.5vw;
						right: 1.8vw;
						padding: 0.5vw 0;

						text {
							font-weight: bold;
							font-size: 1.8vw;
							color: #555555;
						}
					}

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

					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.4vw;
						color: #212327;
					}
				}
			}

			.img {
				width: 10vw;
				height: 9vw;
			}
		}
	}
</style>
