<template>
	<view class="container">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">空托盘组盘</block>
		</cu-custom>
		<view class="example">
			<uni-forms ref="form" :model="formData" labelWidth="80px">
				<uni-forms-item label="仓库编号" name="houseCode">
					<uni-easyinput v-model="formData.houseCode" placeholder="请输仓库编号" />
				</uni-forms-item>
				<uni-forms-item label="托盘编号" name="palletCode">
					<uni-easyinput v-model="formData.palletCode" placeholder="请输入托盘号" />
				</uni-forms-item>
				<uni-forms-item label="组盘数量" name="qty">
					<uni-easyinput v-model="formData.qty" placeholder="请输入组盘数量" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="formSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		emptyPalletIn,
	} from "@/api/wms/palletIn.js"
	import {
		formatDate
	} from 'tough-cookie';
	export default {
		data() {
			return {
				//表单中的数据信息	
				formData: {
					houseCode: "密集库",
					palletCode: "",
					qty: 0
				},
				rules: {
					houseCode: {
						rules: [{
							required: true,
							errorMessage: '仓库编号不能为空'
						}]
					},
					palletCode: {
						rules: [{
							required: true,
							errorMessage: '托盘编号不能为空'
						}]
					},
					qty: {
						rules: [{
							required: true,
							errorMessage: '组盘数量不能为空'
						}]
					},
				},
				msgModalName: null,
				msgTitleName: null,
				msg: null
			};
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			//表单提交
			formSubmit: function(ref) {
				//拿到 formaData
				console.log("formSubmit")
				this.$refs.form.validate().then(res => {
					console.log("数据校验通过", res)
					console.log("this.formData", this.formData)
					emptyPalletIn(this.formData).then(response => {
						console.log("response", response)
						this.$modal.msgSuccess("组盘成功")
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
	
</style>