<template>
	<view class="content flex flex_column">
		<view class="form-body">
			<u-form :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
				<u-form-item label="货位号" required prop="shelfPlaceCode">
					<u-input v-model="form.shelfPlaceCode" :maxlength="30" placeholder="请输入货位号(最多30个字符)"/>
				</u-form-item>
				<u-form-item label="绑定产品">
					<view style="flex-grow: 1;color: #c3c9ce;">{{productEntity&&productEntity.productCode||'请输入产品编码搜索'}}</view>
					<u-icon name="scan" size="45" color="#999"></u-icon>
				</u-form-item>
				<u-form-item label="" v-if="productEntity">
					<view class="flex align_center">
						<view class="pimgs">
							<u-image :src="productEntity&&productEntity.images?productEntity.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="pinfo flex_1">
							<view class="pname">
								{{productEntity&&productEntity.productName}}
							</view>
							<view class="ptxt">
								<text class="pcode">解除绑定</text>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="销售价" v-if="productEntity" required prop="price">
					<u-input :clearable="false" type="digit" :min="0" :maxlength="8" @input="numberToFixed('price',2,999999)" v-model.trim="form.price" placeholder="请输入销售价，最多两位小数"/>
				</u-form-item>
				<u-form-item label="结算价" v-if="productEntity" required prop="cost">
					<u-input :clearable="false" type="digit" :min="0" :maxlength="8" @input="numberToFixed('cost',2,999999)" v-model.trim="form.cost" placeholder="请输入结算价，最多两位小数"/>
				</u-form-item>
				<u-form-item label="最大库容" v-if="productEntity" required prop="maxQty">
					<u-input :clearable="false" type="digit" :min="0" :maxlength="8" @input="numberToFixed('maxQty',0,999999)" v-model.trim="form.maxQty" placeholder="请输入最大库容"/>
				</u-form-item>
			</u-form>
		</view>
		<view class="footer-btn">
			<u-button class="newbtn" @clik="formSubmit" type='primary' shape="circle" size="medium">保存</u-button>
		</view>
	</view>
</template>

<script>
	import { clzConfirm, numberToFixed } from '@/libs/tools';
	export default {
		data() {
			return {
				form: {
					shelfPlaceCode: '', // 货位号
					price: '', //  销售价
					cost: '', //结算价
					maxQty: '', //  最大库容
				},
				rules: {
					shelfPlaceCode:[{ required: true, message: '请输入货位号', trigger: 'change' }],
					price: [{ required: true, message: '请输入销售价', trigger: 'change' }],
					cost: [{ required: true, message: '请输入结算价', trigger: 'change' }],
					maxQty: [{ required: true, message: '请输入最大库容', trigger: 'change' }],
				},
				productEntity: null
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 小数点后两位
			numberToFixed: function (key, num, max) {
				let val = this.form[key]
				let ret = numberToFixed(val, num, max)
				this.$nextTick(() => {
					this.form[key] = ret < 0 ? 0 : ret
				})
			},
			//  表单提交
			formSubmit(){
				const _this = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						 
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	.form-body{
		flex-grow: 1;
		background-color: #fff;
		padding: 0 1.5rem;
	}
	.footer-btn{
		padding: 0.5rem 2rem;
		.newbtn{
			width: 100%;
			background-color: rgb(51, 95, 182);
			color: #fff;
		}
	}
}
</style>
