<template>
	<uni-popup ref="popup">
		<view class="uni-flex uni-column" style="background-color: white;width: 230px; height:60%;">
			<view class="uni-flex uni-column">
				<text>请输入内容</text>
				<view class="uni-flex uni-row">
					<text>包装个数:</text>
					<uni-number-box @change="calcQty($event,stdCount)" :value="stdCount"></uni-number-box>
					<text> ({{packInfo.packName}})</text>
				</view>
				<view class="uni-flex uni-row">
					<text>包装数量:</text>
					<text>{{packInfo.packQty}}({{packInfo.packUom}})</text>
				</view>
				<view class="uni-flex uni-row">
					<text>总数量:</text>
					<input class="uni-input" v-model="newQty" :focus="true" />({{packInfo.packUom}})
				</view>
			</view>
			<view class="uni-flex uni-row">
				<button @click="confirm">确定</button>
				<button @click="cancel">取消</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';

	const stdCount = ref(1);
	const packInfo = ref({
		packCode: "BOX",
		packName: "BOX",
		packQty: 20,
		packUom: "EA",
	});
	const newQty = ref(props.allQty);

	const popup = ref(null)

	const props = defineProps({
		itemCode: {
			type: String,
			default: ""
		},
		allQty: {
			type: Number,
			default: 0,
		}
	});

	const emits = defineEmits(['getQty']);

	const confirm = function() {
		emits('getQty', newQty.value)
		closeEdit();
	}

	const cancel = function() {
		closeEdit();
	}

	//方法
	const calcQty = (val) => {
		stdCount.value = val;
		console.log('stdCount', stdCount.value)
		newQty.value = val * packInfo.value.packQty;
	};

	const openEdit = () => {
		//查询物品包装信息
		popup.value.open()
	};

	const closeEdit = () => {
		popup.value.close();
		// setTimeout(() => {
		// 	popup.value.close()
		// }, 500)
	};

	//暴露给父组件的方法
	defineExpose({
		openEdit,
		closeEdit
	});
</script>
<style>
</style>
