<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 || 0}}</view>
			<view>备货件数：{{user.scanNum || 0}}</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 @click="setorderStatus(3)">
			<view :class="orderStatus==3?'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 @click.stop="goorderdetail(item)"><text style="color: #90A0AF;">订单自编码：</text>{{item.orderCode}}
						</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">计划件数：</text>{{item.planNum || 0}}</view>
						<view><text style="color: #90A0AF;">扫描件数：</text>{{item.scanNum || 0}}</view>
					</view>
				</view>
				<view class="buttts">
					<view class="antu" v-if="item.trayLean" @click="ckscanningCode(item)">
						整托备货扫码
					</view>
					<!-- <view class="anj" @click="godetails(item)" v-if="!item.completeStact"> -->
					<view class="anj" @click="godetails(item)">
						{{item.completeStact?'查看明细':'按件备货扫码'}}
					</view>
					<!-- 					<view class="anj" @click="godetails(item)" v-else>
						查看明细
					</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 || 0}}</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>
			<!-- 零担 -->
			<template v-if="orderStatus==3">
				<view class="item" v-for="item in zeroOrderList">
					<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 @click.stop="goorderdetail(item)"><text
									style="color: #90A0AF;">订单自编码：</text>{{item.orderCode}}
							</view>
						</view>
						<view>
							<view><text style="color: #90A0AF;">计划件数：</text>{{item.planNum || 0}}</view>
							<view><text style="color: #90A0AF;">扫描件数：</text>{{item.scanNum || 0}}</view>
						</view>
					</view>
					<view class="buttts">
						<view class="anj" @click="showZeroOrderDetails(item)">
							{{item.completeStact?'查看明细':'去备货'}}
						</view>
					</view>
				</view>
			</template>
			<up-button type="primary" text="确定"></up-button>
		</view>
	</scroll-view>
	<tiplist ref="tiplists"></tiplist>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		detailType,
	} from '@/interfaces/pagesHome/StockUplist'
	import {
		distributionStockuporderList,
		distributionStockupscanningCode,
		distributionStockuplocationSelection,
		postZeroStockUpData,
		postZeroStockUp
	} from '@/api/user.js'
	import { reactive, toRefs, ref, inject } from "vue";
	const utils = inject('utils') as any
	const tiplists = ref(null)
	let details = reactive<detailType>({
		reservationId: '',
		orderList: [],
		// 零担订单列表
		zeroOrderList: [],
		orderStatus: 1,
		user: {
			consignee: '',
			goodsAreaName: '',
			planNum: '',
			scanNum: '',
		},
		stockList: [],
		stockupId: '',
		items: {},
		isscan: false,
		scancode: '',
		trayId: '',
		zeroOrderVisibi: false,
	})
	onLoad((op) => {
		details.reservationId = op.id
		details.stockupId = op.stockupId
		details.items = JSON.parse(op.item)
		// details.user.goodsAreaName=op.stockupArea
		// details.reservationId='1682676882390781953'
		const _tts = ['定制品拣货', '库存品拣货', '零担拣货']
		utils.ttsspke(_tts[details.orderStatus - 1])
	})
	onShow(() => {
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log(code);
				details.scancode = code
				details.isscan = true
				if (details.isscan) scandata()
			}
		})
		initpage()
	})
	onHide(() => {
		uni.$off('scancodedate')
		details.isscan = false
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	async function initpage() {
		console.log(details.items);
		let data = {
			// 零担为1, 不是零担为0
			isZero: 0,
			orderStatus: details.orderStatus,
			reservationId: details.reservationId,
			typeService: details.items.typeService,
			stockupId: details.stockupId
		}
		// 当标签页为零担时, 改变isZero状态
		if (details.orderStatus === 3) {
			data.orderStatus = 1
			data.isZero = 1
		}
		details.orderList = []
		let response = await distributionStockuporderList(data)
		console.log('response :>> ', response);
		console.log('details.orderStatus :>> ', details.orderStatus);
		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
		if (details.orderStatus === 3) details.zeroOrderList = response.data?.orderList
		details.isscan = false
	}
	// 库存品详情页
	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
				+ '&stockupId=' + details.stockupId + '&allocationId=' + item.allocationId
				+ '&typeService=' + details.items.typeService
				+ '&status=' + (item.completeStact ? '1' : '0')
		})
	}

	async function ckscanningCode(item : any) {
		details.isscan = item.taryLean
		details.trayId = item.trayId
		// let data={
		// 	stockupId:details.stockupId,
		// 	trayId:item.trayId,
		// 	reservationId:details.reservationId,
		// }
		// let res=await distributionStockupscanningCode(data)

	}
	function setorderStatus(state : number) {
		details.orderStatus = state
		const _tts = ['定制品拣货', '库存品拣货', '零担拣货']
		utils.ttsspke(_tts[details.orderStatus - 1])
		initpage()
	}
	async function goBarCode(item : any) {
		let data = {
			deliveryDetailsId: item.deliveryDetailsId
		}
		let res = await distributionStockuplocationSelection(data)
		let list = []
		res.data.map(item => {
			list.push(item.positionCode + ' (' + item.num + '件)')
		})
		if (list.length == 1) {
			uni.navigateTo({
				url: '/pagesHome/pages/setbarcode/setbarcode?item=' + JSON.stringify(item)
					+ '&reservationId=' + details.reservationId
					+ '&goodsAreaName=' + details.user.goodsAreaName
					+ '&stockupId=' + details.stockupId
					+ '&allocationId=' + res.data[0].allocationId
					+ '&completeStact=' + item.completeStact
			})
			return
		}
		tiplists.value.setdetails({
			title: '请选择货位',
			isshow: true,
			tipstate: 2,
			list,
			checklist: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: (deta) => {
				if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择货位',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pagesHome/pages/setbarcode/setbarcode?item=' + JSON.stringify(item)
						+ '&reservationId=' + details.reservationId
						+ '&goodsAreaName=' + details.user.goodsAreaName
						+ '&stockupId=' + details.stockupId
						+ '&allocationId=' + res.data[deta.checklist[0]].allocationId
						+ '&completeStact=' + item.completeStact
				})
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	/** 扫描接口
	 * */
	async function scandata() {
		let data = {
			trayBarCode: details.scancode,
			stockupId: details.stockupId,
			trayId: details.trayId,
			reservationId: details.reservationId,
		}
		let res = await distributionStockupscanningCode(data)
		if (res.audio) utils.ttsspke(res.audio)
		initpage()
	}

	/** 展示零担订单物料详情
	 */
	async function showZeroOrderDetails(item) {
		console.log('item :>> ', item);
		let data = {
			typeService: details.items.typeService,
			stockupId: details.stockupId,
			allocationId: item.allocationId,
			orderCode: item.orderCode,
			stockArticleId: item.stockArticleId
		}
		const res = await postZeroStockUpData(data)
		let inpList = []
		const { code } = res
		if (code === 200) {
			console.log('res.data :>> ', res.data);
			inpList = res.data.map(val => {
				return {
					id: val.id,
					title: val.categoryName,
					value: val.quantity,
					maxNum: val.quantity,
					minNum: 0,
					type: 'Number',
					disabled: item.completeStact,
					allocationId: item.allocationId,
					orderCode: item.orderCode,
					stockArticleId: val.stockArticleId
				}
			})
		}

		// 查看模式
		if (item.completeStact) {
			return tiplists.value.setdetails({
				title: '产看零担物料明细',
				isshow: true,
				tipstate: 4,
				inpList,
				inputtext: '',
				confirmTxt: '关闭',
				isonecheck: true,
				success: async (deta) => {
					tiplists.value.setdetails({ isshow: false })
				},
				cancel: (details) => {
					tiplists.value.setdetails({ isshow: false })
				},
				close: (details) => {
					tiplists.value.setdetails({ isshow: false })
				}
			})
		}

		// 提交模式
		tiplists.value.setdetails({
			title: '设置零担物料数量',
			isshow: true,
			tipstate: 4,
			inpList,
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: async (deta) => {
				console.log('deta :>> ', deta);
				if (deta.inpList.length === 0 || item.completeStact) return tiplists.value.setdetails({ isshow: false })
				let data = {
					reservationId: details.reservationId,
					typeService: details.items.typeService,
					stockupId: details.stockupId,
					allocationId: deta.inpList[0].allocationId,
					orderCode: deta.inpList[0].orderCode,
					stockArticleId: deta.inpList[0].stockArticleId,
					list: []
				}
				data.list = deta.inpList.map(val => {
					console.log(val)
					return {
						firsts: val.title,
						id: val.id,
						quantity: val.value,
						stockArticleId: val.stockArticleId,
					}
				})

				const res = await postZeroStockUp(data)
				console.log('res :>> ', res);

				/* if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择货位',
						icon: 'none'
					})
					return
				} */
				tiplists.value.setdetails({ isshow: false })
				initpage()
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	const { user, orderList, orderStatus, stockList, zeroOrderList } = 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 {
							flex: 1;
							word-wrap: break-word;
							word-break: break-all;

							&:nth-of-type(1) {
								margin-right: 30upx;
							}
						}
					}
				}

				.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>