<template>
	<u-navbar title="签收明细扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar>
	<view class="headtop">
		<view>
			<view>配车类型：自提</view>
		</view>
		<view>
			<view>车牌号：川A88888</view>
			<view>司机：张琪、罗翔</view>
		</view>
	</view>
	<view class="tabmabx">
		<view>
			<uni-table :loading='false' emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="60" align="center"></uni-th>
					<uni-th width="70" align="center">配送客户数</uni-th>
					<uni-th width="70" align="center">订单总数</uni-th>
					<uni-th width="70" align="center">签收件数</uni-th>
				</uni-tr>
				<uni-tr v-for="item in [1,2]">
					<uni-td align="center" class="jhjs">{{item==1?'计划':'完成'}}</uni-td>
					<uni-td align="center">15</uni-td>
					<uni-td align="center">15</uni-td>
					<uni-td align="center">16</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
	<view class="scinp">
		<view class="titl">齐套状态</view>
		<view>
			<cusSelects @change='checktype' :data='typearr' :value="schanvalue" placeholder='全部' :arrLeft='5' size='145'
				:clearable='true'></cusSelects>
		</view>
		<view class="titl">包件类型</view>
		<view>
			<cusSelects @change='checktype' :data='typearr' :value="schanvalue" placeholder='全部' :arrLeft='5' size='145'
				:clearable='true'></cusSelects>
		</view>
		<view class="btscan">查询</view>
	</view>
	<scroll-view class="scbx" scroll-y="true">
		<view class="mabox">
			<view class="item" v-for="item in [1,2,3,4,5]">
				<view class="toptitl">
					<view class="toplft">
						库位号：G-1-1-1
					</view>
					<view :class="item==3?'tis bf':'tis'">
						整托备货
					</view>
				</view>
				<view class="boxcontt">
					<view>
						<view><text style="color: #90A0AF;">包装号：</text>0001</view>
						<view><text style="color: #90A0AF;">货物名称：</text>门板</view>
					</view>
					<view>
						<view :class="item>=2?'scanstateerr':'scanstatesucc'"><text style="color: #90A0AF;">扫描状态：</text>{{item>=2?'未扫码':'已扫码'}}</view>
						<!-- <view><text style="color: #90A0AF;">完成件数：</text>12</view> -->
					</view>
				</view>
				<view class="buttts">
					<view class="anj">
						异常上报
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
	import { reactive, toRefs } from "vue";
	let details = reactive({
		schanvalue: '',
		typearr: [
			{
				value: 1,
				label: '齐套'
			},
			{
				value: 2,
				label: '部分扫'
			},
			{
				value: 3,
				label: '未扫'
			}
		],
	})
	function checktype(e) {

	}
	const { typearr, schanvalue } = toRefs(details)
</script>

<style lang="scss">
	.scbx{
		width: 100%;
		height: 45vh;
		padding-top: 20upx;
		.mabox{
			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;
				&:nth-last-child(1){
					margin-bottom: 5upx;
				}
				.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: center;
						justify-content: space-between;
						&:nth-of-type(1){
							margin-bottom: 20upx;
						}
						>view{
							width: 50%;
						}
					}
					.scanstatesucc{
						color: #3AD8BC;
					}
					.scanstateerr{
						color: #F8544B;
					}
				}
				.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;
						
					}
				}
			}
		}
	}
	.scinp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;

		>.titl {
			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: 24rpx;
			font-weight: 400;
			color: #AFB4BA;
		}

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

	.tabmabx {
		width: 100%;
		padding: 0 32upx;
		box-sizing: border-box;
		background-color: #ffffff;
		padding-bottom: 20upx;

		.uni-table-th {
			background-color: #F8FBFF;
			font-size: 28rpx;
			font-weight: 400;
			color: #092C4D;
		}

		.jhjs {}

		.uni-table-tr:nth-last-child(2)>.uni-table-td {
			font-size: 36rpx;
			font-weight: 400;
			color: #092C4D;

			&:nth-of-type(1) {
				font-size: 28rpx !important;
				font-weight: 400;
				color: #092C4D !important;
			}
		}

		.uni-table-tr:nth-last-child(1)>.uni-table-td {
			border-bottom: none !important;
			font-size: 36rpx;
			font-weight: 400;
			color: #0086F1;

			&:nth-of-type(1) {
				font-size: 28rpx !important;
				font-weight: 400;
				color: #092C4D !important;
			}
		}

		>view {
			border-radius: 8upx;
			border: 1upx solid #EEEEEE;
			padding-bottom: -2upx;
		}
	}

	.headtop {
		display: flex;
		flex-direction: column;
		padding: 34upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;

		>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			margin-bottom: 24upx;

			&:nth-of-type(2) {
				margin-bottom: 0;
			}

			>view {
				flex: 1;
			}
		}
	}
</style>