<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="printType">
					<u-radio name="manual">
						<view class="print-con">
							<u-image class="item-pic" src="../../static/default/icon_print_manual.png" width="80" height="80"></u-image>
							<view class="print-main">
								<text class="print-type">手动打印</text>
								<text class="print-exp">在产品列表中自行选择需要打印贴签的产品</text>
							</view>
						</view>
					</u-radio>
					<u-radio name="scan">
						<view class="print-con">
							<u-image class="item-pic" src="../../static/default/icon_print_code.png" width="80" height="80"></u-image>
							<view class="print-main">
								<text class="print-type">扫码打印</text>
								<text class="print-exp">扫描产品条形码进行打印</text>
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</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
			}
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
				printType: 'manual'
			}
		},
		methods: {
			// 确认
			handleConfirm(){
				this.$emit('confirm', this.printType)
			}
		},
		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;
		.modal-con{
			width: 78%;
			margin: 50% 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: 20upx 0 30upx;
				/deep/ .u-radio{
					width: 94%!important;
					flex-direction: row-reverse;
					justify-content: space-between;
					margin: 0 3%;
				}
				/deep/ .u-radio__icon-wrap{
					flex-shrink: 0;
				}
				/deep/ .u-radio__label{
					flex-grow: 1;
					border-bottom: 2upx dashed #E5E5E5;
					padding: 3% 0;
				}
				.print-con{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item-pic{
						flex-shrink: 0;
						margin-right: 20upx;
					}
					.print-main{
						flex-grow: 1;
						.print-type{
							display: block;
							font-size: 30upx;
							color: #222;
						}
						.print-exp{
							display: block;
							font-size: 26upx;
							color: #666E75;
							line-height: 40upx;
						}
					}
				}
			}
			.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>