<!-- 零件基础信息卡片包括:
零件号、名称、描述、数量和单位
箱码、批次、库位、状态
可以通过属性控制库位和状态是否显示 -->
<template>
	<view class="ljh_box">
		<view class="ljh_info">
			<view class="tit_ljh">{{ dataContent.itemCode }}</view>
			<view class="label_xm font_xs fr">{{ dataContent.packingCode }}</view>
		</view>
		<view class="uni-flex space-between desc_card">
			<view class="ljh_left">
				<view class="text_lightblue font_xs">{{dataContent.itemName }}</view>
				<view class="text_lightblue font_xs">{{dataContent.itemDesc1}}</view>
			</view>
			<view class="ljh_right uni-row uni-flex u-col-center" style="
			 align-items: center;">
				<text class="tnum" v-if="!isEditCount">{{dataContent.qty}}</text>
				<com-number-box v-if="isEditCount"  ref="comNumberBox" v-model="dataContent.qty" :max="99999" :min="0"
					style='width: 100px;' @change="qtyChanged($event)">
				</com-number-box>
				<text class="tunit">{{dataContent.uom}}</text>

			</view>
		</view>
	</view>
</template>

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

	export default {
		name: 'comItemTop',
		components: {comNumberBox},
		props: {
			dataContent: {
				type: Object,
				default: {}
			},
			isEditCount: {
				type: Boolean,
				default: false
			}
		},
	
		data() {
			return {
				
			}
		},
		filters: {
			statusStyle: function(val) {
				return getInventoryTypeStyle(val);
			},
			statusColor: function(val) {
				return getInventoryStatusDesc(val);
			},
		},
		created() {

		},
		methods: {
			
			qtyChanged(value) {
				if (value <= 0) {
					uni.showToast({
						title: "输入数量不能小于或等于0"
					})
					this.dataContent.qty = this.dataContent.recommendQty
					this.$refs.comNumberBox.setValue(this.dataContent.qty);
				}else if(value>this.dataContent.recommendQty){
					uni.showToast({
						title: "输入数量不能大于库存数量"+this.dataContent.recommendQty
					})
					this.dataContent.qty = this.dataContent.recommendQty
					this.$refs.comNumberBox.setValue(this.dataContent.qty);
				}
			},
		}
	}
</script>

<style>
</style>
