<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 focus v-model="form.shelfPlaceCode" @input="placeCodeBlur" :maxlength="30" placeholder="请输入货位号(字母+数字的格式)"/>
				</u-form-item>
				<u-form-item label="绑定产品" v-show="type=='add'">
					<view style="flex-grow: 1;" v-if="productEntity&&productEntity.code" @click="toBindProduct">
						{{productEntity&&productEntity.code}}
					</view>
					<view style="flex-grow: 1;color: #c3c9ce;" @click="toBindProduct" v-else>
						请输入产品编码搜索
					</view>
					<u-icon name="arrow-right" color="#999" @click="toBindProduct"></u-icon>
				</u-form-item>
				<u-form-item label="" v-show="productEntity">
					<view class="flex align_center">
						<view class="pimgs">
							<u-image :src="productEntity&&productEntity.productMsg?productEntity.productMsg:`../../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.name}}
							</view>
							<view class="ptxt">
								<text class="pcode" @click="clearBind">解除绑定</text>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="销售价(元)" v-if="productEntity" required prop="price">
					<u-input clearable type="number" :min="0" @input="numberToFixed('price',2,999999)" v-model="form.price" placeholder="请输入销售价，最多两位小数"/>
				</u-form-item>
				<u-form-item label="结算价(元)" v-if="productEntity" required prop="cost">
					<u-input clearable type="number" :min="0" @input="numberToFixed('cost',2,999999)" v-model="form.cost" placeholder="请输入结算价，最多两位小数"/>
				</u-form-item>
				<u-form-item label="最大库容(件)" v-if="productEntity" required prop="maxQty">
					<u-number-box :min="0" :max="999999" positive-integer v-model="form.maxQty" color="#000" bg-color="#fff" size="30" :input-height="70" :input-width="150"></u-number-box>
				</u-form-item>
			</u-form>
		</view>
		<view class="footer-btn">
			<u-button class="newbtn" :loading='loading' @click="formSubmit" type='primary' shape="circle" size="medium">保存</u-button>
		</view>
	</view>
</template>

<script>
	import { clzConfirm, numberToFixed } from '@/libs/tools';
	import { addPlaceAndProduct } from '@/api/shelf'
	export default {
		data() {
			return {
				form: {
					shelfPlaceCode: '', // 货位号
					productSn: undefined,
					productCode: undefined,
					price: '', //  销售价
					cost: '', //结算价
					maxQty: 1, //  最大库容
				},
				rules: {
					shelfPlaceCode:[
						{ required: true, message: '请输入货位号', trigger: 'change' },
						{
							pattern: /^[a-zA-Z]{1}[0-9]{1,29}$/g,
							message: '必须字母开头且后面紧跟数字'
						}
					],
					price: [{ required: true,type:'number', message: '请输入销售价', trigger: 'change' }],
					cost: [{ required: true,type:'number', message: '请输入结算价', trigger: 'change' }],
					maxQty: [{ required: true,type:'number', message: '请输入最大库容', trigger: 'change' }],
				},
				productEntity: null,
				customerSn: null,
				shelfSn: null,
				loading: false,
				type:""
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(opts) {
			const _this = this
			this.nowData = JSON.parse(decodeURIComponent(opts.detailData));
			this.customerSn = this.nowData.customerSn
			this.shelfSn = this.nowData.shelfSn
			this.type = opts.type
			this.form.shelfPlaceCode = opts.shelfPlaceCode||''
			// 选在产品
			uni.$on('addProductToHw',function(data){
				console.log(data)
				_this.productEntity = data
				_this.form.price = Number(data.price)
				_this.form.cost = Number(data.cost)
				_this.form.productCode = data.code
				_this.form.productSn = data.productSn
			})
			
			if(this.type == 'edit'){
				uni.setNavigationBarTitle({
					title: "编辑货位号"
				})
			}
		},
		onUnload(){
			if(this.type == 'add'){
				uni.$off("addProductToHw")
			}
		},
		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
				})
			},
			placeCodeBlur(v){
				this.$nextTick(() => {
					this.form.shelfPlaceCode = this.form.shelfPlaceCode.toLocaleUpperCase()
				})
			},
			// 解除绑定
			clearBind(){
				this.productEntity = null
				this.form.price = ''
				this.form.cost = ''
				this.form.productCode = undefined
				this.form.productSn = undefined
				this.form.maxQty = 1
			},
			//  表单提交
			formSubmit(){
				const _this = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						 const params = {}
						 const form = JSON.parse(JSON.stringify(_this.form))
						 params.shelfSn = _this.nowData && _this.nowData.shelfSn
						 params.shelfPlaceCode = form.shelfPlaceCode
						 
						 if (this.type == 'edit') {
						   params.id = this.nowData.id
						 }
						 // 绑定了产品
						 if (form.productSn) {
						   params.shelfProductApiEntity = {
						     productSn: form.productSn,
						     productCode: form.productCode,
						     price: form.price,
						     cost: form.cost,
						     maxQty: form.maxQty
						   }
						 }
						 // 开始提交数据
						 _this.loading = true
						 addPlaceAndProduct(params).then(res => {
						   if (res.status == 200) {
							 uni.$emit("updateHwNo",params.shelfPlaceCode)
						     uni.navigateBack()
						   }
						    _this.loading = false
						 })
					} else {
						console.log('验证失败');
					}
				});
			},
			toBindProduct(){
				uni.navigateTo({
					url: "/pages/shelfSetting/bindProduct?customerSn="+this.customerSn+"&shelfSn="+this.shelfSn
				})
			}
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	.form-body{
		flex-grow: 1;
		> view{
			background-color: #fff;
			padding: 0 1.5rem;
		}
		.pimgs{
			padding:0.1rem;
			background:#f8f8f8;
			border-radius:0.3rem;
		}
		.pinfo{
			line-height:normal;
			padding-left: 20rpx;
			color: #666;
			.ptxt{
				padding-top:10rpx;
			}
			.pcode{
				color:red;
			}
			.pname{
				font-weight: bold;
			}
		}
	}
	.footer-btn{
		padding: 0.5rem 2rem;
		.newbtn{
			width: 100%;
			background-color: rgb(51, 95, 182);
			color: #fff;
		}
	}
}
</style>
