<template>
	<view class="p-content">
		<view class="p-body">
			<uni-forms :model="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="名称:">
					{{formData.name}}
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="p-footer">
			<button size="mini" type="warn" @click="submit('form')">删除当前条码</button>
			<button size="mini" type="default" @click="delAll">删除全部商品</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					code:'',
					name:''
				},
				rules:{
					code: {
						rules: [{
								required: true,
								errorMessage: '请输入条码',
							},
							{
								minLength: 3,
								maxLength: 50,
								errorMessage: '条码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				}
			};
		},
		methods: {
				// 触发提交表单
				submit() {
					this.$refs.form.validate().then(res=>{
						console.log('表单数据信息：', res);
					}).catch(err =>{
						console.log('表单错误信息：', err);
					})
				},
				delAll(){}
			}
	}
</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;
		display: flex;
		button{
			width: 40%;
			padding: 10upx 0;
		}
	}
}
</style>
