<template>
	<u-navbar title="录入" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
		titleStyle='color:#ffffff'></u-navbar>
	<image mode="widthFix" class="bgimg" src="/pagesHome/static/bgby.png"></image>
	<!-- <view class="headtop">
		<view>
			<input placeholder="请输入订单号" />
		</view>
	</view> -->
	<view class="mabxtop">
		<view class="types1">
			<view>
				<view>{{details.trayCode}}</view>
				<view>托盘码</view>
			</view>
			<view>
				<view>{{kcnumber}}</view>
				<view>托盘件数</view>
			</view>
		</view>
		<view class="types1">
			<view @click="checkmake">
				<!-- <view class="borinut">{{Marketlist.find(item=> item.marketId === details.marketId).marketName||''}}</view> -->
				<view class="borinut">{{marketName}}</view>
				<view>商场名称</view>
			</view>
			<view>
				<view>{{details.trayTypeName||(pagety=='1'?'物料编码':pagety=='2'?'物料名称':pagety=='3'?'其他':'未知类型')}}</view>
				<view>打托方式</view>
			</view>
		</view>
		<view class="types2">
			<view @click="setshowstate(1)">
				录入库存品
			</view>
		</view>
	</view>
	<scroll-view class="scvmabx" scroll-y="true">
		<view class="maxboxs">
			<view class="items" v-for="item in datalist">
				<view class="tophd1">
					<view>
						<image src="/pagesHome/static/topicons.png"></image>
						<!-- <view></view> -->
						<view>{{item.dataCode}}</view>
					</view>
					<image @click="tipremove(item)" src="/pagesHome/static/removeitem.png"></image>
				</view>
				<view class="tophd">
					<image src="/pagesHome/static/uname.png"></image>
					<view>物料名称：</view>
					<view>{{item.dataName}}</view>
				</view>
				<view class="tophd">
					<image src="/pagesHome/static/uname.png"></image>
					<view>批次号：</view>
					<view>{{item.incomingBatch}}</view>
				</view>
				<view class="tophd">
					<image src="/pagesHome/static/uname.png"></image>
					<view>SKU：</view>
					<view>{{item.sku}}</view>
				</view>
				<view class="tophd">
					<image src="/pagesHome/static/uname.png"></image>
					<view>物料单位：</view>
					<view>{{item.cargoUnit}}</view>
				</view>
				<view class="numbxvie">
					<view>
						<view class="zhon">{{item.orderTotalNum||0}}</view>
						<view>在库数</view>
					</view>
					<view>
						<view class="yish">{{item.scanNum||0}}</view>
						<view>已扫</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<view class="tanchuangbg" @click="setshowstate(0)" v-if="showstate!=0">
		<view class="inputbox" @click.stop.prevent>
			<view class="inputscan">
				<input placeholder="输入物料编码" v-model="materialCode" />
				<view class="scanbt" @click="schbut">搜索</view>
			</view>
			<scroll-view scroll-y="true" class="scvbw">
				<view class="scboxitem">
					<view class="items" @click="setchecl(index)" v-for="(item,index) in details.scanlist">
						<view class="type1s">
							<view>
								<view>物料编码：</view>
								<view>{{item.cargoNumber}}</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view>物料名称：</view>
								<view>{{item.descriptionGoods}}</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view>订单编号：</view>
								<view>{{item.orderCode}}</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view>物料单位：</view>
								<view>{{item.cargoUnit}}</view>
							</view>
							<view>
								<view>包装数量：</view>
								<view>{{item.cargoNorms}}</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view>剩余数量：</view>
								<view>{{item.quantityStock}}{{item.cargoUnit}}</view>
							</view>
							<view>
								<view>SKU：</view>
								<view>{{item.sku}}</view>
							</view>
						</view>
						<view class="rksu" @click.stop.prevent>
							<view>
								<view>数量：</view>
								<input placeholder="请输入数量" v-model="item.maknumber" />
							</view>
						</view>
						<view class="lisbite" v-if="checkinarr.indexOf(index)!=-1">
							<view class="itembox" v-for="ite in item.positionList">
								<view>库位：
									<text v-if="ite.areaName">{{ite.areaName}}</text>
									<text v-if="ite.allocationName">{{'-'+ite.allocationName}}</text>
								</view>
								<view>托盘码：{{ite.trayCode}}</view>
								<view>数量：{{ite.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="btx">
				<view class="cancel" @click="setshowstate(0)">取消</view>
				<view class="confirm" @click="confirmlur">确认</view>
			</view>
		</view>
	</view>
	<tips ref="tip"></tips>
	<tiplist ref="tiplists"></tiplist>
</template>

<script lang="ts" setup>
	import {
		warehouseTrayTypefindAllMarket,
		warehouseTrayTypestockNoDataScanTrayCode,
		warehouseTrayTypeselectStockByMaterialCodeAndMarketId,
		warehouseTrayTypeenterStockNoDataMaterialCode,
		warehouseTrayTypedeleteStockByTrayGoodsId
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { computed, reactive, ref, toRefs } from "vue";
	const tip = ref(null)
	const tiplists = ref(null)
	let details = reactive({
		showstate: 0,
		Marketlist: [],
		trayCode: '',
		trayType: '',
		checkmakindex: 0,
		boxiteuser: {} as any,
		datalist: [],
		scanlist: [],
		materialCode: '',
		maknumber: '',
		checkinarr: [],
		pagety: '',
		trayTypeName: '',
		marketId: ''
	})
	const marketName = ref<string>('')
	onLoad((op) => {
		details.trayCode = op.trayCode
		details.trayType = op.trayType
		details.pagety = op.type
		initpage()
		// initmarlist()
	})
	function stop() {

	}
	const kcnumber = computed(() => {
		let num = 0
		details.datalist.map(item => {
			if (item.scanNum) {
				num += item.scanNum
			}
		})
		return num
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	function checkmake() {
		let list = []
		details.Marketlist.map(item => {
			console.log("list", list)
			list.push(item?.marketName)
		})
		console.log('details.Marketlist :>> ', details.Marketlist);
		tiplists.value.setdetails({
			title: '请选择商场',
			isshow: true,
			tipstate: 2,
			list,
			checklist: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: (deta) => {
				console.log('deta', deta)
				if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择商场',
						icon: 'none'
					})
					return
				}
				const { list, checklist } = deta
				marketName.value = list[checklist[0]]
				details.marketId = details.Marketlist.find(val => val.marketName === marketName.value).marketId
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	async function initmarlist() {
		let data = {
			warehouseCode: 'LQ'
		}
		let res = await warehouseTrayTypefindAllMarket(data)
		console.log("Marketlist", res.data);
		details.Marketlist = res.data
		let market = details.Marketlist.find((item) => {
			return item.marketId === details.marketId

		})
		if (market) marketName.value = market.marketName
	}
	async function initpage() {
		let data = {
			trayCode: details.trayCode
		}
		let res = await warehouseTrayTypestockNoDataScanTrayCode(data)
		console.log("res.data >>>>>>>>>", res.data);
		details.marketId = res.data.data.marketId
		console.log("details.marketId", details.marketId)
		initmarlist()
		// details.datalist=res.data
		if (res?.data?.data?.list) {
			details.datalist = res?.data?.data?.list
			details.trayTypeName = res?.data?.data?.trayTypeName

		} else {
			details.datalist = []
		}
	}
	function setshowstate(state : number) {
		details.showstate = state
	}
	async function schbut() {
		let data = {
			marketId: details.marketId,
			materialCode: details.materialCode
		}
		let res = await warehouseTrayTypeselectStockByMaterialCodeAndMarketId(data)
		details.scanlist = res.data
	}
	async function confirmlur() {
		if (details.maknumber > details.scanlist[0].quantityStock) {
			tip.value.setdetails({
				title: '警告',
				content: '不能大于订单总数',
				confirmTxt: '确认',
				isshow: true,
				isshowcancel: false,
				success: () => {
					tip.value.setisshow(false)
				},
				cancel: () => {
					tip.value.setisshow(false)
				},
				close: () => {
					tip.value.setisshow(false)
				}
			})
			return
		}
		details.scanlist.map(async (item, index) => {
			if (item.maknumber) {
				let data = {
					trayType: 100,
					trayCode: details.trayCode,
					num: item.maknumber,
					marketId: details.marketId,
					materialCode: item.cargoNumber,
					incomingBatch: item.incomingBatch
				}
				let res = await warehouseTrayTypeenterStockNoDataMaterialCode(data)
				if (index == details.scanlist.length - 1) {
					setshowstate(0)
					initpage()
					details.scanlist = []
					details.materialCode = ''
				}
			}
		})
		setshowstate(0)
		initpage()
		details.scanlist = []
		details.materialCode = ''
	}
	function tipremove(item) {
		tip.value.setdetails({
			isshow: true,
			content: '确认删除该数据？',
			confirmTxt: '删除',
			success: async () => {
				let data = {
					trayGoodsId: item.trayGoodsId
				}
				let res = await warehouseTrayTypedeleteStockByTrayGoodsId(data)
				if (res.code == 200) {
					initpage()
				}
				tip.value.setdetails({ isshow: false })
			},
			cancel: () => {
				tip.value.setdetails({ isshow: false })
			},
			close: () => {
				tip.value.setdetails({ isshow: false })
			},
		})
	}
	function setchecl(index : number) {
		if (details.checkinarr.indexOf(index) == -1) {
			details.checkinarr.push(index)
		} else {
			details.checkinarr.splice(details.checkinarr.indexOf(index), 1)
		}
	}
	const { pagety, trayType, checkinarr, maknumber, datalist, scanlist, checkmakindex, Marketlist, materialCode, showstate } = toRefs(details)
</script>

<style lang="scss">
	.borinut {
		padding: 2upx 10upx;
		padding-left: 1upx;
		border: 1upx solid #092C4D30;
	}

	.headtop {
		width: 684upx;
		padding: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 20upx;
		background-color: #FFFFFF;
		padding: 20upx 30upx;
		box-sizing: border-box;
		position: relative;
		margin: auto;
		border-radius: 20upx;
		margin-top: 20upx;

		>view {
			flex: 1;

			>input {
				flex: 1;
				font-size: 28upx;
			}
		}
	}

	.mabxtop {
		position: relative;
		width: 684upx;
		// height: 348upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin: auto;
		margin-top: 20upx;
		padding: 60upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>.types1 {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				>view:nth-of-type(1) {
					font-size: 32upx;
					font-weight: 400;
					color: #020B18;
				}

				>view:nth-of-type(2) {
					font-size: 28upx;
					font-weight: 400;
					color: #90A0AF;
				}
			}
		}

		.types2 {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			>view {
				width: 180upx;
				height: 64upx;
				background: #D3832A;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				font-weight: 400;
				color: #FFFFFF;
				box-sizing: border-box;
			}
		}

		.beizhut {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40upx;

			>view {
				width: 100%;

				>view:nth-of-type(2) {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>image {
						width: 32upx;
						height: 32upx;
					}
				}
			}
		}
	}

	.bgimg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;

	}

	.scvmabx {
		width: 100%;
		height: 47vh;
		margin-top: 20upx;

		.maxboxs {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			>.items {
				width: 690upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20upx 30upx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 10upx;
				margin-bottom: 30upx;

				&:nth-last-child(1) {
					margin-bottom: 20upx;
				}

				.tophd {
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					padding: 15upx 25upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;

					>image {
						width: 48upx;
						height: 48upx;
						margin-right: 10upx;
					}

					>view {
						font-size: 32upx;
						color: #020B18;
						font-weight: 400;
						word-wrap: break-word;
						word-break: break-all;

						&:nth-of-type(2) {
							flex: 1;
						}
					}
				}

				.tophd1 {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 15upx 25upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;

					>image {
						width: 48upx;
						height: 48upx;
						margin-right: -20upx;
						// margin-right: 10upx;
					}

					>view {
						display: flex;
						align-items: center;

						>image {
							width: 48upx;
							height: 48upx;
							margin-right: 10upx;
						}
					}
				}

				.numbxvie {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 15upx 25upx;
					box-sizing: border-box;

					.zhon {
						color: #D3832A;
					}

					.yish {
						color: #1197EB;
					}

					.weish {
						color: #020B18;
					}

					>view {
						display: flex;
						flex-direction: column;
						align-items: center;

						>view:nth-of-type(1) {
							font-size: 36upx;
							margin-bottom: 12upx;
						}

						>view:nth-of-type(2) {
							font-size: 28upx;
						}
					}
				}

				.type1 {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20upx;

					>view {
						display: flex;
						align-items: center;
						font-size: 28upx;

						>view:nth-of-type(1) {
							color: #90A0AF;
						}

						>view:nth-of-type(2) {
							color: #092C4D;
						}
					}

				}
			}
		}
	}

	// .headtop {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	// margin-top: 20upx;
	// 	background-color: #FFFFFF;
	// 	padding: 20upx 30upx;
	// 	box-sizing: border-box;
	// 	>view:nth-of-type(1) {
	// 		width: 540upx;
	// 		border: 1upx solid #00000020;
	// 		padding: 10upx 20upx;
	// 		box-sizing: border-box;
	// 		// flex: 1;
	// 		// margin-right: 50upx;
	// 		// border-radius: 10upx;
	// 		>input{
	// 			flex: 1;
	// 			font-size: 28upx;
	// 		}
	// 	}

	// 	>view:nth-of-type(2) {
	// 		width: 128upx;
	// 		height: 64upx;
	// 		background: #D3832A;
	// 		border-radius: 8upx;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;
	// 		font-size: 32upx;
	// 		font-weight: 400;
	// 		color: #FFFFFF;
	// 	}
	// }
	.hedtopt {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #ffffff;
		padding: 36upx 32upx;
		box-sizing: border-box;

		.typto {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			margin-bottom: 20upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				flex: 1;
			}
		}

		.kcplr {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			>view {
				width: 180upx;
				height: 64upx;
				background: #D3832A;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				font-weight: 400;
				color: #FFFFFF;
				box-sizing: border-box;
			}
		}
	}

	.tanchuangbg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
		background-color: #00000050;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 1s;

		.tanbx {
			width: 670upx;
			// height: 600upx;
			background-color: #ffffff;
			box-sizing: border-box;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;

			.titlran {
				font-size: 32upx;
				color: #092C4D;
			}

			.textareabx {
				width: 570upx;
				padding: 10upx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				border: 1upx solid #092C4D30;
				margin-top: 30upx;
				font-size: 28upx;
				color: #092C4D;

				>textarea {
					width: 100%;
					height: 200upx;
				}

			}

			.btx {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 50upx;

				>view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 260upx;
					height: 88upx;
					border-radius: 8upx;
					font-size: 32upx;
				}

				>.cancel {
					background-color: #F5F5F6;
					color: #5A6875;
					margin-right: 20upx;
				}

				>.confirm {
					background-color: #D3832A;
					color: #FFFFFF;
				}
			}
		}

		.inputbox {
			width: 670upx;
			// height: 600upx;
			background-color: #ffffff;
			box-sizing: border-box;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;

			.inputscan {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				>input {
					width: 440upx;
					height: 64upx;
					border: 1upx solid #092C4D30;
					border-radius: 8upx;
					box-sizing: border-box;
					font-size: 28upx;
					padding: 0upx 20upx;
					box-sizing: border-box;
				}

				.scanbt {
					width: 128upx;
					height: 64upx;
					background: #D3832A;
					border-radius: 8upx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30upx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.scvbw {
				width: 100%;
				height: 450upx;
				margin-top: 30upx;

				.scboxitem {
					display: flex;
					flex-direction: column;
					align-items: center;

					.items {
						width: 590upx;
						display: flex;
						flex-direction: column;
						box-shadow: 0upx 2upx 10upx 0upx #e2e2e3;
						margin-top: 10upx;
						padding: 20upx;
						box-sizing: border-box;
						margin-bottom: 20upx;

						&:nth-last-child(1) {
							margin-bottom: 10upx;
						}

						>.lisbite {
							width: 100%;

							// position: absolute;
							>.itembox {
								width: 100%;
								margin-bottom: 20upx;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								font-size: 28upx;
								color: #020B18;
								border: 1upx solid #D3832A;
								padding: 10upx 20upx;
								box-sizing: border-box;
								border-radius: 20upx;
								color: #D3832A;

								&:last-child {
									margin-bottom: 0;
								}

								>view {
									word-wrap: break-word;
									word-break: break-all;
								}
							}
						}

						>.type1s {
							display: flex;
							align-items: flex-start;
							justify-content: space-between;
							margin-bottom: 20upx;

							>view {
								&:nth-of-type(1) {
									margin-right: 10upx;
								}

								flex: 1;
								display: flex;
								align-items: flex-start;
								justify-content: flex-start;
								font-size: 28upx;

								>view:nth-of-type(1) {
									color: #90A0AF;
								}

								>view:nth-of-type(2) {
									color: #092C4D;
									flex: 1;
									word-wrap: break-word;
									word-break: break-all;
								}
							}
						}

						.rksu {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20upx;

							>view {
								// width: 50%;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								font-size: 28upx;

								>view:nth-of-type(1) {
									color: #90A0AF;
								}

								>input {
									width: 200upx;
									padding: 0 15upx;
									font-size: 28upx;
									border: 1upx solid #00000020;
								}
							}
						}
					}
				}
			}

			.btx {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 50upx;

				>view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 260upx;
					height: 88upx;
					border-radius: 8upx;
					font-size: 32upx;
				}

				>.cancel {
					background-color: #F5F5F6;
					color: #5A6875;
					margin-right: 20upx;
				}

				>.confirm {
					background-color: #D3832A;
					color: #FFFFFF;
				}
			}
		}
	}
</style>