<template>
	<view class="p-content">
		<view class="p-body">
			<uni-forms :value="formData" border ref="form" :rules="rules" label-align="right" err-show-type="toast">
				<uni-forms-item label="条码:" name="code" required>
					<input type="text" v-model="formData.code" placeholder="请输入条码" />
				</uni-forms-item>
				<uni-forms-item label="名称:" name="name" required>
					<input type="text" v-model="formData.name" placeholder="请输入产品名称" />
				</uni-forms-item>
				<uni-forms-item label="单位:">
					<input type="text" v-model="formData.unit" placeholder="请输入单位" />
				</uni-forms-item>
				<uni-forms-item label="库存:">
					<input type="text" v-model="formData.qty" placeholder="请输入库存" />
				</uni-forms-item>
				<uni-forms-item label="进价:">
					<input type="text" v-model="formData.cost" placeholder="请输入进价" />
				</uni-forms-item>
				<uni-forms-item label="销售价:">
					<input type="digit" v-model="formData.price" placeholder="请输入销售价" />
				</uni-forms-item>
				<uni-forms-item label="批发价:">
					<input type="digit" v-model="formData.uprice" placeholder="请输入批发价" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="p-footer">
			<button size="mini" type="primary" @click="submit('form')">添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					code:'',
					name:'',
					unit:'',
					qty:'',
					cost:'',
					price:'',
					uprice:''
				},
				rules:{
					code: {
						rules: [{
								required: true,
								errorMessage: '请输入条码',
							},
							{
								minLength: 3,
								maxLength: 50,
								errorMessage: '条码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入产品名称',
							},
							{
								minLength: 3,
								maxLength: 50,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
				}
			};
		},
		methods: {
				// 触发提交表单
				submit() {
					this.$refs.form.validate().then(res=>{
						console.log('表单数据信息：', this.formData);
					}).catch(err =>{
						console.log('表单错误信息：', err);
					})
				}
			}
	}
</script>

<style lang="scss">
.p-content{
	.p-body{
		flex-grow: 1;
		height: 50%;
		overflow: auto;
		input{
			font-size: 30upx;
			height: 36px;
			line-height: 36px;
		}
		.uni-forms-item{
			margin-bottom: 0;
			padding: 10upx 0;
		}
	}
	.p-footer{
		padding: 20upx;
		text-align: center;
		button{
			width: 60%;
			padding: 10upx 0;
		}
	}
}
</style>
