<!--
 * @Descripttion: 弹窗扩展组件
-->
<template>
	<div class="x-dialog" ref="xDialog">
		<el-dialog ref="dialog" align-center destroy-on-close v-model="dialogVisible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="false">
			<template #header>
				<slot name="header">
					<span class="el-dialog__title">{{ title }}</span>
				</slot>
				<div class="x-dialog__headerbtn">
					<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
						<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
						<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
					</button>
					<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
						<el-icon class="el-dialog__close"><el-icon-close /></el-icon>
					</button>
				</div>
			</template>
			<div v-loading="loading">
				<slot></slot>
			</div>
			<template #footer>
				<slot name="footer"></slot>
			</template>
		</el-dialog>
	</div>
</template> 

<script>
	export default {
		props: {
			modelValue: { type: Boolean, default: false },
			title: { type: String, default: "" },
			showClose: { type: Boolean, default: true },
			showFullscreen: { type: Boolean, default: true },
			loading: { type: Boolean, default: false }
		},
		data() {
			return {
				dialogVisible: false,
				isFullscreen: false
			}
		},
		watch:{
			modelValue(){
				this.dialogVisible = this.modelValue
				if(this.dialogVisible){
					this.isFullscreen = false
				}
			}
		},
		mounted() {
			this.dialogVisible = this.modelValue
		},
		methods: {
			//关闭
			closeDialog(){
				this.dialogVisible = false
			},
			//最大化
			setFullscreen(){
				this.isFullscreen = !this.isFullscreen
			}
		}
	}
</script>

<style scoped>
	
	.x-dialog__headerbtn {
		position: absolute;
		top: var(--el-dialog-padding-primary);
		right: var(--el-dialog-padding-primary);
	}

	.x-dialog__headerbtn button {
		padding: 0;
		background: transparent;
		border: none;
		outline: none;
		cursor: pointer;
		font-size: var(--el-message-close-size,16px);
		margin-left: 15px;
		color: var(--el-color-info);
	}

	.x-dialog__headerbtn button:hover .el-dialog__close {
		color: var(--el-color-primary);
	}

	.x-dialog:deep(.el-dialog){
	    --el-dialog-margin-top: 0;
	    --el-dialog-width:60%;
	    --el-border-color-base: rgb(231 235 241 / 50%);
	    /*margin-bottom: 0;
	    top: 60px !important;*/
	    max-height: calc(100% - 50px);
	    overflow: auto;
	    display: flex;
	    flex-direction: column;
	    left: 0px !important;
	}

	.x-dialog:deep(.el-dialog) .el-dialog__header {
		padding: 15px 20px;
	}

	.x-dialog:deep(.el-dialog) .el-dialog__body {
		flex:1;
		overflow: auto;
		padding:0px
	}

	.x-dialog:deep(.el-dialog) .el-dialog__footer {
		padding: 10px 20px;
		border-top: 1px solid var(--el-border-color-base);
	}

	.x-dialog:deep(.el-dialog) .el-dialog__footer:empty {
	  	padding: 0;
	  	border:none;
	}

	.x-dialog:deep(.el-dialog).is-fullscreen {
		display: flex;
		flex-direction: column;
		top:0px !important;
		left:0px !important;
		height: 100% !important;
		--el-dialog-width:100%;
		width: 100% !important;
		--el-dialog-margin-top:0 !important;
	}

	.x-dialog:deep(.el-dialog).is-fullscreen {
		max-height:100%;
	}
	.x-dialog:deep(.el-dialog).is-fullscreen .xTable{ height: calc(100% - 500px) !important; }
	.x-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
</style>
