<template>
	<u-popup v-model="show" mode="bottom" length="60%">
		<view style="padding: 20rpx;">
			<h3 style="width: 100%; text-align: center;">填写商品信息</h3>
			<block v-for="(item, index) in form" :key="item.id">
				<view style="margin-top: 30rpx;">
					<h4 class="">{{ item.goodsName }}</h4>
					<u-form :model="item" ref="uFormRef" labelWidth="155">
						<u-form-item label="商品单价:" prop="price">
							<u-input type="number" v-model="item.price" placeholder="请输入单价" />
						</u-form-item>
						<u-form-item label="商品备注:">
							<u-input v-model="item.remarks" placeholder="请输入备注" />
						</u-form-item>
					</u-form>
				</view>
			</block>

			<view style="width: 100%; text-align: center; margin-top: 30rpx;">
				<u-button type="error" size="medium" @tap="submit">保存</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let show = ref(false);
let uFormRef = ref();

let form = ref();

let emits = defineEmits(['onSubmit'])

let submit = () => {
	let flag = true
	form.value?.map((item: any) => {
		if(!item.price) {
			flag = false
		}
	})
	if(flag) {
		emits('onSubmit', form.value)
	} else {
		uni.showToast({
			title: '请填写所有的商品的单价',
			icon: 'none'
		})
	}
};

defineExpose({
	show,
	form,
	uFormRef,
});
</script>

<style></style>
