<template>
	<u-mask class="commonModal" :show="isShow" :mask-click-able="false" z-index="999998">
		<view class="modal-con">
			<u-icon v-if="isClose" @click="isShow=false" class="close-icon" name="close-circle" size="40" color="#999"></u-icon>
			<view class="modal-title" v-if="showTitle">{{title}}</view>
			<view class="modal-main">
			{{content}}
			<slot></slot>
			</view>
			<view class="modal-footer">
				<view class="button-cancel" v-if="isCancel" @click="handleCancel">{{cancelText}}</view>
				<view class="button-confirm" @click="handleConfirm">{{confirmText}}</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			},
			title: { //  标题
				type: String,
				default: '提示'
			},
			content: { //  内容
				type: String,
				default: ''
			},
			isCancel: { //  是否有取消按钮
				type: Boolean,
				default: true
			},
			isClose: { //  是否有关闭按钮
				type: Boolean,
				default: false
			},
			confirmText: { //  确认按钮内容
				type: String,
				default: '确认'
			},
			cancelText: { //  取消按钮内容
				type: String,
				default: '取消'
			},
			showTitle:{ //  是否显示标题
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
			}
		},
		methods: {
			// 确认
			handleConfirm(){
				this.$emit('confirm')
			},
			// 取消
			handleCancel(){
				this.isShow = false
				this.$emit('cancel')
			}
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
			  if (!newValue) {
			    this.$emit('close')
			  }
			}
		}
	}
</script>

<style lang="scss">
	.commonModal{
		width: 100%;
		height: 100vh;
		z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.modal-con{
			width: 70%;
			background-color: #fff;
			border-radius: 24upx;
			position: relative;
			.close-icon{
				position: absolute;
				right: 6upx;
				top: 6upx;
			}
			.modal-title{
				text-align: center;
				font-size: 30upx;
				color: #000;
				padding: 30upx 30upx 0;
			}
			.modal-main{
				text-align: center;
				font-size: 28upx;
				color: #222;
				line-height: 1.5em;
				padding: 30upx 30upx 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;
					width: 50%;
				}
				.button-confirm{
					color: #2A86F4;
					flex-grow: 1;
					padding: 20upx 0;
					width: 50%;
				}
			}
		}
	}
</style>