<template>
	<view class="u-flex u-row-between card_itemName" style="margin: 20rpx auto;">
		<view class="uni-flex uni-column align-start" style="flex: 1;">
			<text style="padding-left: 8rpx;">补料数量</text>
			<text class="uom_blue">{{dataContent.unexecutedQty+dataContent.qty}}{{getUomInfo(dataContent.uom)}}</text>
		</view>
		<view style="padding-left: 8rpx;padding-right: 8rpx;" >|</view>
		<view class="uni-flex uni-column align-start" style="flex: 1;">
			
			<view class="uni-flex uni-column align-start">
				<text style="padding-left: 8rpx;">已补料数量</text>
				<text class="uom_green">{{dataContent.qty}}{{getUomInfo(dataContent.uom)}}</text>
			</view>
			
		</view>
		<view style="padding-left: 8rpx;padding-right: 8rpx;" >|</view>
		<view class="uni-flex uni-column align-start" style="flex: 1;">
			<text style="padding-left: 8rpx;">未补料数量</text>
			<text class="uom_yellow">{{dataContent.unexecutedQty}}{{getUomInfo(dataContent.uom)}}</text>
			
		</view>
	</view>
</template>

<script>
	import {
			getUomInfo
		} from '@/common/directory.js';
	export default {
		data() {
			return {};
		},
	
		props: {
			dataContent: {
				type: Object,
				default: {}
			},
		},
		methods: {
			getUomInfo(uom) {
				let item = getUomInfo(uom);
				if (item == '') {
					return uom;
				} else {
					return item.label
				}
			}
		}
	}
</script>
<style lang="scss">

.uom_blue {
	color: #0689da;
	padding: 5px;
	font-size: 35rpx;
}
.uom_yellow {
	color: #F1A532;
	padding: 5px;
	font-size: 35rpx;
}
.uom_green {
	color: #329362;
	padding: 5px;
	font-size: 35rpx;
}

</style>