<template>

	<view class="content">
		<uni-table style="overflow-x: hidden;">
			<uni-tr>
				<uni-th width="50"></uni-th>
				<uni-th width="120" align="center">推荐</uni-th>
				<uni-th width="120" align="center">实际</uni-th>
			</uni-tr>
			<uni-tr>
				<uni-th width="50">箱码</uni-th>
				<uni-th width="120" align="center">
					<view>
						{{dataContent.RecommendPackingCode}}
					</view>
				</uni-th>
				<uni-th width="120" align="center">
					<view>
						{{dataContent.HandledPackingCode}}
					</view>
				</uni-th>
			</uni-tr>
			<uni-tr>
				<uni-th width="50">批次</uni-th>
				<uni-th width="120" align="center">
					{{dataContent.RecommendLot}}
				</uni-th>
				<uni-th width="120" align="center">
					{{dataContent.HandledLot}}
				</uni-th>
			</uni-tr>
			<uni-tr>
				<!-- <uni-th width="50">数量</text></uni-th> -->
				<uni-th width="120" align="center">
					<text> {{dataContent.RecommendQty}} ({{dataContent.RecommendQtyUom}})</text>
				</uni-th>
				<uni-th width="120" align="center">
					<view>
						<text> {{dataContent.HandledQty}}({{dataContent.HandledQtyUom}})</text>
					</view>
				</uni-th>
			</uni-tr>

		</uni-table>
		<text @click="expandDetail()">展开</text>
		<uni-table v-if='expand' style="overflow-x: hidden;">
			<uni-tr>
				<uni-th width="50">库位</uni-th>
				<uni-th width="120" align="center">
					<view>
						{{dataContent.RecommendLocation.locationCode}}
					</view>
				</uni-th>
				<uni-th width="120" align="center">
					<view>
						{{dataContent.HandledLocation.locationCode}}
					</view>
				</uni-th>
			</uni-tr>
			<uni-tr>
				<uni-th width="50">状态</uni-th>
				<uni-th width="120" align="center">
					{{statusDesc(dataContent.Status)}}
				</uni-th>
				<uni-th width="120" align="center">
					{{statusDesc(dataContent.Status)}}
				</uni-th>
			</uni-tr>
			<!-- <uni-tr> -->
				<!-- <uni-th width="50">托码</text></uni-th> -->
				<uni-th width="120" align="center">
					<text>
						{{dataContent.RecommendContainerCode}}</text>
				</uni-th>
				<uni-th width="120" align="center">
					<view>
						<text>
							{{dataContent.HandledContainerCode}}</text>
					</view>
				</uni-th>
			<!-- </uni-tr> -->
		</uni-table>
	</view>


</template>

<script>
	import winJobNumber from '@/mycomponents/wincom/unitCom/winJobNumber.vue'
	import {
		getInventoryTypeStyle,
		getInventoryStatusDesc,
	} from '@/common/basic.js';

	export default {
		components: {
			winJobNumber
		},
		data() {
			return {
				expand: false
			}
		},
		props: {
			dataContent: {
				type: Object,
				default: {}
			},
		},
		methods: {
			expandDetail() {
				this.expand = !this.expand;
			},
			statusStyle: function(val) {
				return getInventoryTypeStyle(val);
			},
			statusDesc: function(val) {
				return getInventoryStatusDesc(val);
			},
		}
	}
</script>
<style>
</style>
