<template>
	<a-modal centered class="warehouseAllocation-basicInfo-modal" :footer="null" :maskClosable="false" title="新建散件入库单" v-model="isShow" @cancle="isShow = false" width="80%">
		<a-form-model
			id="warehouseAllocation-basicInfo-form"
			ref="ruleForm"
			:model="form"
			:rules="rules"
			:label-col="formItemLayout.labelCol"
			:wrapper-col="formItemLayout.wrapperCol"
		>
			<a-form-model-item label="调出仓库" prop="sort">
				<v-select
					v-model="form.billStatus"
					ref="billStatus"
					id="warehouseAllocation-basicInfo-billStatus"
					code="PAYMENT_TYPE"
					placeholder="请选择调出仓库"
					allowClear
				></v-select>
			</a-form-model-item>
			<a-form-model-item label="调入仓库" prop="sort">
				<v-select
					v-model="form.billStatus"
					ref="billStatus"
					id="warehouseAllocation-basicInfo-billStatus"
					code="PAYMENT_TYPE"
					placeholder="请选择调入仓库"
					allowClear
				></v-select>
			</a-form-model-item>
			<a-form-model-item label="关联单号" prop="address">
				<a-input id="warehouseAllocation-basicInfo-address" :maxLength="30" v-model="form.address" placeholder="请输入关联单号(最多30个字符)" allowClear />
			</a-form-model-item>
			<a-form-model-item label="备注" prop="remarks">
				<a-textarea id="warehouseAllocation-basicInfo-remarks" :maxLength="500" v-model="form.remarks" placeholder="请输入备注(最多500个字符)" allowClear />
			</a-form-model-item>
		</a-form-model>
		<div class="btn-cont">
			<a-button type="primary" id="warehouseAllocation-basicInfo-modal-save" @click="handleSave">保存</a-button>
			<a-button id="warehouseAllocation-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
		</div>
	</a-modal>
</template>

<script>
import { VSelect } from '@/components';
export default {
	name: 'WarehouseAllocationBasicInfoModal',
	components: { VSelect },
	props: {
		openModal: {
			//  弹框显示状态
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isShow: this.openModal, //  是否打开弹框
			formItemLayout: {
				labelCol: { span: 6 },
				wrapperCol: { span: 16 }
			},
			form: {
				name: '', // 仓库名称
				sort: '' //  排序
			},
			rules: {
				name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }]
			},
			brandData: [] //  供应商  下拉数据
		};
	},
	methods: {
		//  保存
		handleSave() {
			this.isShow = false
			this.$emit('ok')
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
		}
	},
	watch: {
		//  父页面传过来的弹框状态
		openModal(newValue, oldValue) {
			this.isShow = newValue
		},
		//  重定义的弹框状态
		isShow(newValue, oldValue) {
			if (!newValue) {
				this.$emit('close')
			}
		}
	}
};
</script>

<style lang="less">
.warehouseAllocation-basicInfo-modal {
	.ant-modal-body {
		padding: 40px 40px 24px;
	}
	.btn-cont {
		text-align: center;
		margin: 35px 0 10px;
	}
}
</style>
