<!--收货任务卡片-->
<template>
	<view class="detail-content">
		<view class="choose_main">
			<view class="ljh_box">
				<view class="tit_ljh">{{ receiptDetail.itemCode }}</view>
				<view class="ljh_left desc_ljh">
					<view class="font_xs text_lightblue">{{ receiptDetail.itemName }}</view>
					<view class="font_xs text_lightblue">{{ receiptDetail.item.desc2 }}</view>
				</view>
			</view>
			<view class="cen_card margin_xs_bottom">
				<view class="label_box uni-flex uni-row">
					<view class="label_info">
						<label class="">
							<image class="icon_normal" src="@/static/icons_ui/icon_tm.svg"></image>
						</label>
						<text>{{ receiptDetail.recommendPackingCode }}</text>
					</view>
					<view class="label_info">
						<label class="">
							<image class="icon_normal" src="@/static/icons_ui/icon_tm.svg"></image>
						</label>
						<text>{{ receiptDetail.recommendContainerCode }}</text>
					</view>
				</view>
			</view>
			<view class="list_form">
				<view class="uni-container">
					<uni-table style="overflow-x: hidden;">
						<uni-tr>
							<uni-th width="100"></uni-th>
							<uni-th width="100" align="center">推荐</uni-th>
							<uni-th width="100" align="center">实际</uni-th>
						</uni-tr>
						<uni-tr>
							<uni-th width="100">数量（单位）</uni-th>
							<uni-th width="100" align="center">
								<text class="text_black"
									style="font-size: 1rem;">{{receiptDetail.recommendQty}}</text>
							</uni-th>
							<uni-th width="100" align="center">
								<uni-easyinput v-model="receiptDetail.handledQty
							</uni-th>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<view class="choose_marked">
			<image src="@/static/image_marked.svg"></image>
		</view>
	</view>
</template>

<script>
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		dateFormat
	} from '@/common/basic.js';
	export default {
		name: "comReceiptDetail",
		data() {
			return {

			};
		},
		// 此处定义传入的数据
		props: ['receiptDetail'],
		filters: {
			statusStyle: function(val) {
				return getJobStatuStyle(val);
			},
			statusColor: function(val) {
				return getJobStatuDesc(val);
			},
			formatDate: function(val) {
				return dateFormat(val)
			}
		},
	}
</script>

<style scoped lang="scss">
	.display-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.device-detail {
		padding: 8px;

		.list-style {
			padding: 8px;
			margin-bottom: 0rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			color: #666666;
			line-height: 1.5;

			.right-width {
				text-align: center;
				width: 100rpx;
			}

			.text-color {
				color: #000;
				font-weight: bolder;
			}

			.state-style {
				border-radius: 16rpx;
				font-size: 30rpx;
				padding: 0 10rpx;
				line-height: 50rpx;
				height: 50rpx;
			}

			.green {
				background-color: #c5ffe2;
				color: #4b9762;
			}

			.red {
				background-color: #ffc8c2;
				color: #9f3f40;
			}

			.blue {
				background-color: #c9d8ff;
				color: #3167d2;
			}

			.grey {
				background-color: #eaeaea;
				color: #a5a5a5;
			}
		}

		.wrap-flex {
			flex-wrap: wrap;
			align-content: space-between;
			height: 100rpx;
			padding-bottom: 25rpx;

			.width-40,
			.width-29 {
				font-size: 24rpx;
				box-shadow: 0rpx 0rpx 5rpx #888888;
				background-color: $uni-bg-color;

				view {
					padding: 6rpx 8rpx;
				}
			}

			.width-40 {
				width: 39%;
			}

			.width-29 {
				width: 29%;
				text-align: center;
			}
		}
	}
</style>
