<template>
	<div class="dialog">
		<el-dialog :before-close="handleClose" :center="center" :close-on-click-modal="closeModal" v-dialogDrag
			:append-to-body="appendBody" :close-on-press-escape="closeEscape" :show-close="showClose" :title="title"
			:visible.sync="dialogVisible" :modal="modal" :width="width" :top="top" custom-class="dialogTitle"
			@close="$emit('close')">
			<slot></slot>
			<span v-if="footerShow" slot="footer" class="dialog-footer" flex="main:right">
				<el-button type="primary" @click="handleReset" v-if="resetButton">重 置</el-button>
				<el-button @click="handleClose">取 消</el-button>
				<!-- <el-button v-if="orderCenter" @click="handleCancel">取消下单</el-button> -->
				<el-button type="primary" @click="handleConfirmClick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<style lang="scss">
.dialogTitle {
	border-radius: 10px;
}

.el-dialog__header {
	// background: #f5f7fa;
	padding-bottom: 17px // text-align: center;
}

// .el-dialog__title {
// 	color: aliceblue;
// }
</style>
<script>
export default {
	watch: {},
	props: {
		// 距离顶部距离
		top: {
			type: String,
			default: '15vh',
		},
		//是否可以通过点击 modal 关闭 Dialog
		closeModal: {
			type: Boolean,
			default: false,
		},
		//是否可以通过按下 ESC 关闭 Dialog
		closeEscape: {
			type: Boolean,
			default: false,
		},
		//是否显示关闭按钮
		showClose: {
			type: Boolean,
			default: true,
		},
		modal: {
			type: Boolean,
			default: true,
		},
		center: {
			type: Boolean,
			default: true,
		},
		footerShow: {
			type: Boolean,
			default: false,
		},
		dialogVisible: {
			type: Boolean,
			default: false,
		},
		// 弹窗嵌套
		appendBody: {
			type: Boolean,
			default: true,
		},
		// 重置按钮
		resetButton: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		width: {
			type: String,
			default: '30%',
		},
	},
	data() {
		return {
			isShow: false,
		}
	},
	methods: {
		handleClose(val) {
			this.$emit('update:dialogVisible', false)
			this.$emit('handleClose')
		},
		handleCancel() {
			// this.$emit('update:dialogVisible', false)
			this.$emit('handleCancel')
		},
		handleConfirmClick() {
			this.$emit('handleConfirmClick')
		},
		handleReset() {
			this.$emit('handleReset')
		}
	},
}
</script>
<style>
.el-dialog__footer {
	padding: 10px !important
}

.el-dialog__body {
	padding: 10px !important
}

.el-dialog__header {
	padding: 10px !important
}

/* .el-dialog__wrapper{
	    position: absolute !important;
	  } 
	.v-modal{
	    position: absolute !important;
	  } */
::v-deep .el-dialog {
	padding: 15px;
	border-radius: 10px;
}
</style>
