<template>
	<u-mask class="productModal" :show="isShow" :mask-click-able="false">
		<view class="product-con">
			<view class="product-main">
				<view class="list-item-tit">
					<view class="item-tit ellipsis-one" :style="{borderColor: $config('primaryColor')}">{{infoData && infoData.productName}}</view>
				</view>
				<view class="list-item-con flex align_center justify_between">
					<view class="pimgs">
						<u-image :src="infoData && infoData.productMainImage?infoData.productMainImage:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
					</view>
					<view class="flex_1">
						<view>产品编码：{{infoData && infoData.productCode || '--'}}</view>
						<view class="padding_3">原厂编码：{{infoData && infoData.productOrigCode || '--'}}</view>
						<view v-if="infoData && (infoData.warehouseName || infoData.warehouseLocationName)">仓库仓位：{{infoData && infoData.warehouseName}} > {{infoData && infoData.warehouseLocationName}}</view>
					</view>
				</view>
				<u-form class="form-content" :model="form" :error-type="['toast']" ref="uForm" label-width="180">
					<u-form-item label="销售单价" required prop="price">
						<u-input class="form-item" v-model="form.price" @input="numberToFixed('price',2,999999)" placeholder="请输入销售单价" :clearable="false" type="digit" input-align="right" style="margin-right: 8upx;" />元
					</u-form-item>
					<u-form-item label="销售数量" required prop="qty">
						<view style="text-align: right;width: 100%;">
							<u-number-box class="form-item" input-height="60" v-model="form.qty" :min="1" :max="999999" @change="numChange"></u-number-box>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="product-footer">
				<view class="button-cancel" @click="isShow=false">取消</view>
				<view class="button-confirm" @click="handleConfirm">确定</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	import { numberToFixed } from '@/libs/tools'
	export default {
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			},
			infoData: {
				tyoe: Object,
				default: ()=>{
					return null
				}
			},
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
				theme: '',
				form: {
					price: null,
					qty: 1,
				},
				rules: {
					price: [ { required: true, type: 'number', message: '请输入销售单价', trigger: ['change','blur'] } ],
					qty: [ { required: true, type: 'number', message: '请输入销售数量', trigger: 'blur' } ]
				},
			}
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules)
			this.theme = getApp().globalData.theme
		},
		methods: {
			// 确认
			handleConfirm(){
				console.log(this.form)
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过')
						this.$emit('confirm', this.form)
					} else {
						console.log('验证失败')
					}
				})
			},
			// 小数点后两位
			numberToFixed: function (key, num, max) {
				let val = this.form[key]
				let ret = numberToFixed(val, num, max)
				this.$nextTick(() => {
					this.form[key] = ret
				})
			},
			numChange(val){
				if (val.value < 1){
					this.$nextTick(() => {
						this.form.qty = 0
					})
				} else if (val.value > 999999){
					this.$nextTick(() => {
						this.form.qty = 999999
					})
				}else{
					this.form.qty = Number(val.value)
				}
			},
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
				}else{
					this.form.price = this.infoData && this.infoData.price || null
					this.form.qty = this.infoData && this.infoData.qty || 1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.productModal{
		width: 100%;
		height: 100%;
		.text-c{
			text-align: center;
		}
		.padding_3{
			padding: 6upx 0;
		}
		.product-con{
			width: 78%;
			margin: 45% auto 0;
			background-color: #fff;
			border-radius: 24upx;
			.product-main{
				padding: 20upx 30upx 0;
				.list-item-tit{
					padding-bottom: 12upx;
					border-bottom: 1px solid #e4e7ed;
					.item-tit{
						font-weight: bold;
						color: rgb(48, 49, 51);
						font-size: 28upx;
						padding-left: 10upx;
						border-left: 6upx solid #000;
						line-height: 1;
					}
				}
				.list-item-con{
					padding: 14upx 0 16upx;
					font-size: 26upx;
					.pimgs{
						margin-right: 16upx;
					}
				}
				.form-content{
					border-top: 1px dashed #e4e7ed;
					.form-item{
						text-align: right;
					}
				}
			}
			.product-footer{
				font-size: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				border-top: 1upx solid #E5E5E5;
				.button-cancel{
					color: #999;
					border-right: 1upx solid #E5E5E5;
					flex-grow: 1;
					padding: 20upx 0;
				}
				.button-confirm{
					color: #2A86F4;
					flex-grow: 1;
					padding: 20upx 0;
				}
			}
		}
	}
</style>
