<template>
	<!-- <u-navbar title="备货列表" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
	<u-navbar title="备货列表"
	 bgColor='#D3832A' leftIconColor='#ffffff'
	titleStyle='color:#ffffff' placeholder 
	:autoBack="true" leftIconSize='35'></u-navbar>
	<view class="head">
		<view class="type1">
			<view>客户：{{user.consignee}}</view>
			<view>备货区域：{{user.goodsAreaName}}</view>
		</view>
		<view class="type1">
			<view>计划件数：{{user.planNum}}</view>
			<view>扫码件数：{{user.scanNum}}</view>
		</view>
	</view>
	<view class="tabtip">
		<view @click="setorderStatus(1)">
			<view :class="orderStatus==1?'xz':''">定制品</view>
		</view>
		<view @click="setorderStatus(2)">
			<view :class="orderStatus==2?'xz':''">库存品</view>
		</view>
	</view>
	<scroll-view scroll-y="true" class="scvew">
		<view class="mabx">
			<view class="item" v-if="orderStatus==1" v-for="item in orderList">
				<view class="toptitl">
					<view class="toplft">
						库位号：{{item.allocation}}
					</view>
					<view class="tis bf">
						按件扫描
					</view>
				</view>
				<view class="boxcontt">
					<view>
						<view><text style="color: #90A0AF;">托盘号：</text>{{item.pallet}}</view>
						<view><text style="color: #90A0AF;">订单自编码：</text>{{item.orderCode}}</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">计划件数：</text>{{item.planNum}}</view>
						<view><text style="color: #90A0AF;">扫描件数：</text>{{item.scanNum}}</view>
					</view>
				</view>
				<view class="buttts">
					<view class="antu" v-if="item>1">
						整托备货扫码
					</view>
					<view class="anj" @click="godetails(item)">
						按件备货扫码
					</view>
				</view>
			</view>
			<view class="item" v-if="orderStatus==2" v-for="item in stockList">
				<!-- <view class="toptitl">
					<view class="toplft">
						库位号：{{item.allocation}}
					</view>
					<view :class="item==3?'tis bf':'tis'">
						整托备货
					</view>
				</view> -->
				<view class="boxcontt">
					<view>
						<view><text style="color: #90A0AF;">货位：</text>{{item.allocation}}</view>
						<view><text style="color: #90A0AF;">物品：</text>{{item.materialName}}</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">SKU：</text>{{item.sku}}</view>
						<view><text style="color: #90A0AF;">规格：</text>{{item.cargoNorms}}</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">计划数量：</text>{{item.planNum}}</view>
						<view><text style="color: #90A0AF;">单位：</text>{{item.cargoUnit}}</view>
					</view>
				</view>
				<view class="buttts">
					<view class="anj" @click="goBarCode(item)">
						配置包条码
					</view>
					<!-- <view class="anj">
						拆包
					</view> -->
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { detailType } from '@/interfaces/pagesHome/StockUplist'
	import { distributionStockuporderList } from '@/api/user.js'
	import { reactive, toRefs } from "vue";
	let details=reactive<detailType>({
		reservationId:'',
		orderList:[],
		orderStatus:1,
		user:{
			consignee:'',
			goodsAreaName:'',
			planNum:'',
			scanNum:'',
		},
		stockList:[]
	})
	onLoad((op)=>{
		details.reservationId=op.id
		// details.user.goodsAreaName=op.stockupArea
		// details.reservationId='1682676882390781953'
		initpage()
	})
	async function initpage(){
		let data={
			orderStatus:details.orderStatus,
			reservationId:details.reservationId
		}
		details.orderList=[]
		let response=await distributionStockuporderList(data)
		console.log(response);
		details.user.consignee=response.data.consignee
		details.user.goodsAreaName=response.data.goodsAreaName
		details.user.planNum=response.data.planNum
		details.user.scanNum=response.data.scanNum
		details.orderList=response.data.orderList
		details.stockList=response.data.stockList
	}
	function godetails(item:any){
		uni.navigateTo({
			url:'/pagesHome/pages/StockUplistScandetails/StockUplistScandetails?stockArticleId='
			+(item.stockArticleId||'')+
			'&orderStatus='+
			details.orderStatus+'&reservationId='+details.reservationId+
			'&allocation='+item.allocation+'&pallet='+item.pallet+'&orderCode='+item.orderCode
			
		})
	}
	function setorderStatus(state:number){
		details.orderStatus=state
		initpage()
	}
	function goBarCode(item:any){
		uni.navigateTo({
			url:'/pagesHome/pages/setbarcode/setbarcode?item='+JSON.stringify(item)+'&reservationId='+details.reservationId+'&goodsAreaName='+details.user.goodsAreaName
		})
	}
	const { user,orderList,orderStatus,stockList }=toRefs(details)
</script>

<style lang="scss">
	.tabtip{
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			font-size: 32upx;
			font-weight: 400;
			color: #90A0AF;
			>view{
				height: 80upx;
				border-bottom: 8upx solid #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.xz{
			color: #D3832A;
			border-bottom: 8upx solid #D3832A;
			// border-radius: 5upx;
		}
	}
	.scvew{
		width: 100%;
		height: 60vh;
		margin-top: 20upx;
		.mabx{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			>.item{
				width: 686upx;
				// height: 378upx;
				background: #FFFFFF;
				border-radius: 8upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// padding: 10upx 20upx;
				box-sizing: border-box;
				border-bottom: 1upx solid #ebebeb;
				margin-bottom: 20upx;
				padding-bottom: 30upx;
				.toptitl{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2upx solid #EEEEEE;
					padding: 34upx 24upx;
					box-sizing: border-box;
					.toplft{
						font-size: 32upx;
						font-weight: 400;
						color: #092C4D;
					}
					.tis{
						font-size: 32upx;
						font-weight: 400;
						color: #0086F1;
					}
					.bf{
						color: #D3832A;
					}
				}
				.boxcontt{
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					padding: 32upx 24upx;
					box-sizing: border-box;
					font-size: 28upx;
					border-bottom: 2upx solid #EEEEEE;
					>view{
						width: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						margin-bottom: 20upx;
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						>view{
							width: 50%;
						}
					}
				}
				.buttts{
					height:100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					box-sizing: border-box;
					.antu{
						border: 2upx solid #0086F1;
						color: #0086F1;
					}
					.anj{
						border: 2upx solid #D3832A;
						color: #D3832A;
					}
					>view{
						width: 204upx;
						height: 64upx;
						background: #FFFFFF;
						border-radius: 8upx;
						opacity: 1;
						font-size: 28upx;
						display: flex;
						align-items: center;
						justify-content: center;
						
					}
				}
			}
		}
	}
	.head{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 20upx;
		height: 176upx;
		box-sizing: border-box;
		// border-bottom: 1upx solid #ececec;
		background-color: #ffffff;
		>.type1{
			width: 100%;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			>view{
				width: 50%;
			}
		}
	}
</style>
