<template>
	<u-mask class="commonModal" :show="isShow" :mask-click-able="false">
		<view class="modal-con">
			<!-- <view class="modal-title">选择配送方式</view> -->
			<view class="modal-main">
				<!-- <u-radio-group v-model="form.dispatchType" width="50%" style="width: 100%;">
					<u-radio v-for="(item, index) in dispatchTypeList" :key="index" :name="item.code">{{item.dispName}}</u-radio>
				</u-radio-group> -->
				<view style="padding: 20upx 0 16upx;">备注</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>
	import { getLookUpItem } from '@/api/data'
	export default {
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
				form: {
				  dispatchType: undefined,
				  remarks: ''
				},
				dispatchTypeList: []
			}
		},
		mounted() {
			// this.getLookUpItem()
		},
		methods: {
			// 确认
			handleConfirm(){
				const _this = this;
				//  表单校验
				// if (!_this.form.dispatchType) {
				// 	uni.showToast({ icon: 'none', title: '请选择配送方式' });
				// 	return;
				// }
				this.$emit('confirm', _this.form)
			},
			// 配送方式
			getLookUpItem () {
				getLookUpItem({ lookupCode: 'DISTRIBUTION_MODE', pageNo: 1, pageSize: 1000 }).then(res => {
					if (res.status == 200 && res.data && res.data.list) {
						this.dispatchTypeList = res.data.list
					} else {
						this.dispatchTypeList = []
					}
				})
			}
		},
		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: 40vh auto 0;
			background-color: #fff;
			border-radius: 24upx;
			.modal-title{
				text-align: center;
				font-size: 30upx;
				color: #000;
				padding: 30upx 30upx 0;
			}
			.modal-main{
				margin: 40upx 30upx 30upx;
			}
			.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>
