<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="hdstop">
		<view class="khxb">
			<view>客户：{{items.consignee}}</view>
			<view>地址：{{items.deliveryAddress}}</view>
			<view>电话：{{items.deliveryPhone}}</view>
			<view class="butlur" @click="showsdqs">
				录入包条码
			</view>
		</view>
		<view class="tps">
			<view>
				<view>订单总数</view>
				<view>{{ordNub}}</view>
			</view>
			<view>
				<view>计划件数</view>
				<view>{{Plannednub}}</view>
			</view>
			<view>
				<view>配送件数</view>
				<view>{{items.reservationNum}}</view>
			</view>
			<view>
				<view>签收件数</view>
				<view>{{signNub}}</view>
			</view>
		</view>
	</view>
	<view class="scinp">
		<view>齐套状态</view>
		<view>
			<cusSelects  @change='checktype' :data='typearr' :value="schanvalue" placeholder='全部' :arrLeft='5' size='145' :clearable='true'></cusSelects>
		</view>
		<view class="inputs">
			<input placeholder="请输入查询的订单号" v-model="inputtxt"/>
		</view>
		<view class="btscan" @click="initpage">查询</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 class="scve" scroll-y="true">
		<view class="mabx">
			<view class="itec" @click="setcheckindex(index)" v-if="orderStatus==1" v-for="(item,index) in datalist">
				<view class="contenbx1">
					<view><text style="color: #90A0AF;" @click.stop="goorderdetail(item)">订单编号：</text>{{item.orderCode}}</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">总数：</text>{{item.reservationNum}}</view>
					<view><text style="color: #90A0AF;">计划：</text>{{item.reservationNum}}</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">装车：</text>{{item.loadingNub}}</view>
					<view><text style="color: #90A0AF;">签收：</text>{{item.signforNub}}</view>
				</view>
				<view class="xialaxz" v-if="listcheckindex==index">
					<view v-for="ite in item.distributionAppParcelListVOS">
						<view>包条码：{{ite.packetBarCode}}</view>
						<view>货物品类：{{ite.thirdProduct}}</view>
						<view>扫描状态：{{ite.isScan?ite.isScan:'未扫'}}</view>
					</view>
				</view>
				<view :class="item.signforNub==0?'tip tp2':item.signforNub==item.reservationNum?'tip tp1':'tip tp3'">{{item.signforNub==0?'未扫':item.signforNub==item.reservationNum?'齐套':'部分扫'}}</view>
			</view>
			<view class="itec" @click="setcheckindex(index)" v-if="orderStatus==2" v-for="(item,index) in datalist">
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">SKU：</text>{{item.sku}}</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">物品：</text>{{item.descriptionGoods}}</view>
					<view><text style="color: #90A0AF;">规格：</text>{{item.specification}}</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">单位：</text>{{item.logpmUnit}}</view>
					<!-- <view><text style="color: #90A0AF;">签收：</text>{{item.signforNub}}</view> -->
				</view>
				<!-- <view :class="item.signforNub==0?'tip tp2':item.signforNub==item.reservationNum?'tip tp1':'tip tp3'">{{item.signforNub==0?'未扫':item.signforNub==item.reservationNum?'齐套':'部分扫'}}</view> -->
			</view>
		</view>
	</scroll-view>
	<tips ref="tip"></tips>
	<tiplist ref="tiplists"></tiplist>
	<saomiao2></saomiao2>
</template>

<script lang="ts" setup>
	import {
		signfororder,
		signforinventory,
		signforsignfor,
		signforsignforIn,
		signforsignforcontinue
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
	import { computed, inject, reactive, ref, toRefs, watchEffect } from "vue";
	const utils=inject('utils') as any
	let details=reactive({
		schanvalue:'',
		typearr:[
			{
				value:3,
				label:'齐套'
			},
			{
				value:2,
				label:'部分扫'
			},
			{
				value:1,
				label:'未扫'
			}
		],
		items:{} as any,
		datalist:[] as any,
		id:'',
		orderStatus:1,
		scancode:'',
		deliveryId:'',
		orderType:'' as string|number,
		inputtxt:'',
		listcheckindex:-1,
	})
	const tiplists=ref(null)
	const tip=ref(null)
	const Plannednub=computed(()=>{
		let num=0
		details.datalist.map(item=>{
			if(item.reservationNum){
				num+=item.reservationNum
			}
		})
		return num
	})
	const ordNub=computed(()=>{
		return details.datalist.length
	})
	const signNub=computed(()=>{
		let num=0
		details.datalist.map(item=>{
			if(item.signforNub){
				num+=item.signforNub
			}
		})
		return num
	})
	watchEffect(()=>{
		if(signNub.value!=0){
			console.log(signNub.value+'件')
			utils.ttsspke(signNub.value+'件')
		}
	})
	onLoad((op)=>{
		details.items=JSON.parse(op.item)
		details.id=JSON.parse(op.item).id
		details.deliveryId=op.deliveryId
		initpage()
		// details.scancode='23072506149-1'
		// scandata()
		uni.$on('scancodedate', function(code) {
			if (code) {
				console.log(code);
				details.scancode=code
				scandata()
			}
		})
	})
		function goorderdetail(item){
			uni.navigateTo({
				url:'/pagesHome/pages/orderDetails/orderDetails?orderCode='+item.orderCode
			})
		}
	async function scandata(){
		let data={
			barcode:details.scancode,
			deliveryId:details.deliveryId,
			reservationId:details.id,
		}
		if(details.orderStatus==1){
			let response=await signforsignfor(data)
			console.log(response);
			if(response.code==3006){
				tip.value.setdetails({
					isshow:true,
					content:'请确认是否异常签收',
					success:async ()=>{
						let data={
							barcode:details.scancode,
							deliveryId:details.deliveryId,
							reservationId:details.id
						}
						let response=await signforsignforcontinue(data)
						console.log(response);
						uni.showToast({
							title:response.msg,
							icon:'none'
						})
						tip.value.setdetails({isshow:false})
					},
					cancel:()=>{
						tip.value.setdetails({isshow:false})
					},
					close:()=>{
						tip.value.setdetails({isshow:false})
					}
				})
			}else{
				uni.showToast({
					title:response.msg,
					icon:'none'
				})
			}
		}else if(details.orderStatus==2){
			// data.barcode="23072405915-2"
			let response=await signforsignforIn(data)
			console.log(response);
			if(response.code==3006){
				tip.value.setdetails({
					isshow:true,
					content:'请确认是否异常签收',
					success:async ()=>{
						let data={
							barcode:details.scancode,
							deliveryId:details.deliveryId,
							reservationId:details.id
						}
						let response=await signforsignforcontinue(data)
						console.log(response);
						uni.showToast({
							title:response.msg,
							icon:'none'
						})
						tip.value.setdetails({isshow:false})
					},
					cancel:()=>{
						tip.value.setdetails({isshow:false})
					},
					close:()=>{
						tip.value.setdetails({isshow:false})
					}
				})
			}else{
				uni.showToast({
					title:response.msg,
					icon:'none'
				})
			}
		}
		initpage()
	}
	function showsdqs(){
		tiplists.value.setdetails({
			isshow:true,
			tipstate:1,
			title:'请输入扫描的码',
			placeholder:'请输入扫描的码',
			inputtext:'',
			success:(detail)=>{
				details.scancode=detail.inputtext
				scandata()
				tiplists.value.setdetails({isshow:false})
			},
			cancel:()=>{
				tiplists.value.setdetails({isshow:false})
			},
			close:()=>{
				tiplists.value.setdetails({isshow:false})
			}
		})
	}
	function setorderStatus(state:number){
		details.orderStatus=state
		initpage()
	}
	async function initpage(){
		let data={
			reservationId:details.id,
			completecode:details.orderType,
			orderCode:details.inputtxt,
		}
		details.datalist=[]
		let response=null;
		if(details.orderStatus==1){
			response=await signfororder(data)
		}else if(details.orderStatus==2){
			response=await signforinventory(data)
		}
		// scandata()
		details.datalist=response.data.records
	}
	function setcheckindex(index:number){
		if(details.listcheckindex==index){
			details.listcheckindex=-1
		}else{
			details.listcheckindex=index
		}
		
	}
	function checktype(e){
		if(e==''){
			details.schanvalue=''
			details.orderType=''
			return
		}
		details.typearr.map(item=>{
			if(item.value==e){
				details.schanvalue=item.label
				details.orderType=item.value
			}
		})
	}
	const { listcheckindex,inputtxt,orderStatus,datalist,items,typearr,schanvalue }=toRefs(details)
</script>

<style lang="scss">
	.butlur{
		width: 200upx !important;
		height: 64upx !important;
		background: #D3832A;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.xialaxz{
		display: flex;
		flex-direction: column;
		>view{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-top: 1upx solid #00000010;
			padding: 20upx 0;
			box-sizing: border-box;
			font-size: 28upx;
			color: #092C4D;
			>view{
				word-wrap: break-word;
				word-break: break-all;
				margin-right: 20upx;
				&:nth-last-child(1){
					margin-right: 0upx;
				}
			}
		}
	}
	.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;
		}
	}
	.scve {
		width: 100%;
		height: 62.2vh;
		margin-top: 20upx;
	
		.mabx {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			>.itec {
				width: 686upx;
				// height: 176upx;
				background: #FFFFFF;
				border-radius: 8upx;
				padding: 36upx 24upx;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 20upx;
	
				&:nth-last-child(1) {
					margin-bottom: 0;
				}
	
				>.contenbx1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28upx;
					color: #092C4D;
					margin-bottom: 20upx;
	
					&:nth-last-child(1) {
						margin-bottom: 0;
					}
	
					>view {
						flex: 1;
					}
				}
	
				.tip {
					position: absolute;
					right: 0;
					top: 0;
					width: 96upx;
					height: 48upx;
					border-radius: 0 8upx 0 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24upx;
				}
	
				.tp1 {
					background-color: #0086F120;
					color: #0086F1;
				}
	
				.tp2 {
					background-color: #F8544B20;
					color: #F8544B;
				}
	
				.tp3 {
					background-color: #FA8C1620;
					color: #FA8C16;
				}
			}
		}
	}
	.hdstop{
		width: 100%;
		padding: 34upx 32upx;
		background-color: #fff;
		box-sizing: border-box;
		font-size: 28upx;
		font-weight: 400;
		color: #092C4D;
		>.khxb{
			display: flex;
			align-items: flex-start;
			margin-bottom: 40upx;
			flex-wrap: wrap;
			>view{
				width: 50%;
				margin-bottom: 20upx;
			}
		}
		>.tps{
			display: flex;
			align-items: center;
			justify-content: space-around;
			>view{
				display: flex;
				align-items: center;
				flex-direction: column;
				&:nth-of-type(1){
					>view:nth-of-type(2){
						color: #092C4D;
					}
				}
				&:nth-of-type(2){
					>view:nth-of-type(2){
						color: #0086F1;
					}
				}
				&:nth-of-type(3){
					>view:nth-of-type(2){
						color: #3AD8BC;
					}
				}
				&:nth-of-type(4){
					>view:nth-of-type(2){
						color: #FA8C16;
					}
				}
				>view:nth-of-type(2){
					font-size: 36upx;
					font-weight: 400;
					
					margin-top: 20upx;
				}
			}
		}
	}
	.scinp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-top: 3upx solid #EEEEEE;
		>view:nth-of-type(1){
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
		}
		.inputs {
			width: 276upx;
			height: 64upx;
			background: #F5F5F6;
			border-radius: 8upx;
			opacity: 1;
			border: 2upx solid #EEEEEE;
			padding: 10upx;
			box-sizing: border-box;
			font-size: 24upx;
			font-weight: 400;
			color: #AFB4BA;
			>input{
				flex: 1;
				font-size: 24upx;
				color: #092C4D;
			}
		}
		.btscan{
			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;
		}
	}
</style>