<template>
	<view class="content flex flex_column" v-if="nowData">
		<view class="form-body">
			<u-form :model="nowData" label-width="180rpx" :error-type="['toast']" ref="uForm">
				<view style="padding: 20upx 0;" v-if="nowData.shelfProductApi" >
					<view class="placeCode">
						{{nowData.shelfPlaceCode}}
					</view>
					<view class="flex flex_1 align_center">
						<view class="pimgs">
							<u-image :src="nowData.product.images?nowData.product.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="ptxt flex align_center justify_between">
								<text>{{nowData.productCode}}</text>
								<text class="pkuc">
									 可用库存:<text>{{nowData.shelfProductApi.qty}}</text>{{nowData.product.unit}}
								</text>
							</view>
							<view class="pname">
								{{nowData.product.productName}}
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 20upx 0;" v-else>
					<u-form-item label="货位号" required prop="shelfPlaceCode">
						<u-input v-model="nowData.shelfPlaceCode" @input="placeCodeBlur" :maxlength="30" placeholder="请输入货位号(字母+数字的格式)"/>
					</u-form-item>
					<u-gap height="10" bg-color="#f8f8f8"></u-gap>
					<u-form-item label="绑定产品" required prop="productSn">
						<view class="pinfo" style="width: 100%;">
							<view class="ptxt flex align_center justify_between">
								<text>{{nowData.productCode}}</text>
								<text class="pcode" @click="toBindProduct">
									<u-icon name='reload'></u-icon>
									更换产品
								</text>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="">
						<view class="flex flex_1 align_center">
							<view class="pimgs">
								<u-image :src="nowData.product.images?nowData.product.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">
									{{nowData.product.productName}}
								</view>
							</view>
						</view>
					</u-form-item>
				</view>
				<u-gap height="10" bg-color="#f8f8f8"></u-gap>
				<u-form-item label="本次上架数量" required prop="qty">
					<view style="width: 100%;" class="flex justify_end">
						<view class="u-ninput">
							<u-number-box :min="1" :max="999999" positive-integer v-model="nowData.qty" color="#000" bg-color="#fff" size="30" :input-height="70" :input-width="150"></u-number-box>
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="flex footer-btn">
			<u-button class="delbtn" :loading='loading' @click="handleDel" type='primary' shape="circle" size="medium">删除</u-button>
			<u-button :style="{width:type=='bind'?'45%':'100%'}" 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 { shelfCartSave, shelfCartDelete} from '@/api/shelfCart.js'
	export default {
		data() {
			return {
				nowData: {
					shelfPlaceCode: '',
					productSn: '',
					qty: '',
				},
				rules: {
					shelfPlaceCode:[
						{ required: true, message: '请输入货位号', trigger: 'change' },
						{
							pattern: /^[a-zA-Z]{1}[0-9]{1,29}$/g,
							message: '必须字母开头且后面紧跟数字'
						}
					],
					productSn: [{ required: true, message: '请选择绑定产品', trigger: 'change' }],
					qty: [{ required: true,type:'number', message: '请输入上架数量', trigger: 'change' }],
				},
				shelfSn: null,
				customerSn: '',
				shelfName: null,
				loading: false,
				type:"",
			}
		},
		// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(opts) {
			const _this = this
			this.nowData = JSON.parse(JSON.stringify(this.$store.state.vuex_tempData));
			console.log(this.nowData)
			this.shelfName = opts.shelfName
			this.shelfSn = opts.shelfSn
			this.customerSn = opts.customerSn
			this.type = this.nowData.shelfProductApi ? 'edit' : 'new'
			 
			// 选在产品
			uni.$on('addProductToHw',function(data){
				console.log(data)
				_this.nowData.product.images = data.productMsg
				_this.nowData.product.productName = data.name
				_this.nowData.product.unit = data.unit
				_this.nowData.price = Number(data.price)
				_this.nowData.cost = Number(data.cost)
				_this.nowData.productCode = data.code
				_this.nowData.productSn = data.productSn
			})
		},
		onUnload(){
			uni.$off("addProductToHw")
			this.$store.state.vuex_tempData = null
		},
		methods: {
			placeCodeBlur(v){
				this.$nextTick(() => {
					this.nowData.shelfPlaceCode = this.nowData.shelfPlaceCode.toLocaleUpperCase()
				})
			},
			// 更换产品
			toBindProduct(){
				uni.navigateTo({
					url: "/pages/shelfSetting/bindProduct?customerSn="+this.customerSn+"&shelfSn="+this.shelfSn
				})
			},
			// 删除
			handleDel(){
				const _this = this
				clzConfirm({
				  title: '提示',
				  content: '确认删除此货位和产品吗?',
				  success (ret) {
						if (ret.confirm || ret.index == 0) {
							uni.showLoading({
								title: '正在删除...'
							})
							shelfCartDelete({ shelfCartSn: _this.nowData.shelfCartSn }).then(res => {
							  console.log(res)
							  if (res.status == 200) {
								  _this.toashMsg(res.message)
								  uni.navigateBack()
							  }
							  uni.hideLoading()
							})
						}
				  }
				})
			},
			//  表单提交
			formSubmit(){
				const _this = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						 const row = _this.nowData
						 uni.showLoading({
						 	title: '正在保存...'
						 })
						 _this.loading = true
						 const params = {
						 	shelfSn: this.shelfSn,
						 	shelfName: this.shelfName,
						 	shelfTierCode: row.shelfTierCode,
						 	shelfPlaceSn: row.shelfPlaceSn||undefined,
						 	shelfPlaceCode: row.shelfPlaceCode,
						 	productSn: row.productSn,
						 	productCode: row.productCode,
						 	qty: row.qty,
						 	price: row.price,
						 	cost: row.terminalPrice,
						 	shelfCartSn: row.shelfCartSn
						 }
						 console.log(params)
						 shelfCartSave(params).then(res => {
						 	if(res.status == 200){
						 		this.toashMsg(res.message)
								uni.navigateBack()
						 	}
						 	uni.hideLoading()
							_this.loading = false
						 })
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	.placeCode{
		text-align: center;
		border-radius: 20rpx;
		background-color: #eee;
		padding: 10upx 20upx;
		margin-bottom: 15upx;
	}
	.form-body{
		> view{
			background-color: #fff;
			padding: 0 1.5rem;
		}
		.pimgs{
			padding:0.1rem;
			background:#f8f8f8;
			border-radius:0.3rem;
			padding-right: 20rpx;
		}
		.pinfo{
			line-height:normal;
			color: #666;
			padding-left: 15rpx;
			.pcode{
				color:rgb(0, 170, 255);
			}
			.pname{
				font-weight: bold;
			}
			.pkuc{
				width: 200rpx;
				color: #999;
				text{
					color: #333;
				}
			}
		}
		.noproduct{
			padding: 40rpx 20rpx;
			text-align: center;
			color: #999;
			>view{
				padding: 10rpx 0;
			}
			text{
				color: #00aaff;
				margin-left: 10rpx;
			}
		}
		
		.u-ninput{
			border: 2rpx solid #eee;
			border-radius: 50rpx;
			padding: 0 6rpx;
		}
		::v-deep .u-icon-disabled{
			background: #fff!important;
		}
		::v-deep .u-number-input{
			margin: 0 0;
			border: 2rpx solid #eee;
			border-top: 0;
			border-bottom: 0;
		}
		::v-deep .u-icon-plus, ::v-deep .u-icon-minus{
			border-radius: 50rpx;
		}
	}
	.footer-btn{
		padding: 2.5rem 1rem 0.5rem;
		justify-content: space-between;
		button{
			min-width: 45%;
			margin: 0 20upx;
		}
		.newbtn{
			background-color: rgb(51, 95, 182);
			color: #fff;
		}
		.delbtn{
			background-color: #fff;
			color: red;
		}
	}
}
</style>