<template>
	<u-mask class="commonModal" :show="isShow" :mask-click-able="false">
		<view class="modal-con">
			<view class="modal-title">上架入库后，货架库存将会增加</view>
			<view class="modal-main">
				<view class="modal-p">本次共上架入库<text>{{totalKs}}</text>款产品，共<text>{{totalNums}}</text>件</view>
				<u-input v-model="form.remarks" placeholder="请输入出库备注(最多500字符)" type="textarea" :maxlength="500" :border="true" :auto-height="false" :custom-style="{height: '100upx'}" />
			</view>
			<view class="modal-footer">
				<view class="button-cancel" @click="isShow=false">取消</view>
				<view class="button-confirm" @click="handleConfirm">确认上架入库</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			},
			totalKs: {
				type: [String,Number],
				default: '0'
			},
			totalNums: {
				type: [String,Number],
				default: '0'
			}
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
				form: {
				  dispatchType: undefined,
				  remarks: ''
				},
				dispatchTypeList: []
			}
		},
		methods: {
			// 确认
			handleConfirm(){
				this.$emit('confirm', this.form, 0)
			},
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commonModal{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999999;
		.modal-con{
			width: 78%;
			margin: 50% auto;
			background-color: #fff;
			border-radius: 24upx;
			padding-top: 30upx;
			font-size: 30upx;
			.modal-title{
				text-align: center;
				font-size: 26upx;
				color: #666;
			}
			.modal-main{
				margin: 10upx 30upx 30upx;
				font-size: 30upx;
				.modal-p{
					color: #666;
					text-align: center;
					margin-bottom: 20upx;
					font-size: 26upx;
					text{
						color: red;
					}
				}
			}
			.modal-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>
