<template>
	<teleport to="body" :disabled="!appendToBody">
		<transition
			enter-active-class="es-animated fadeIn"
			leave-active-class="es-animated fadeOut"
			:duration="200"
		>
			<div
				v-show="modelValue"
				class="es-mask__global"
				@click.self="() => closeOnClickMask && handleClose()"
			>
				<transition
					enter-active-class="es-animated fadeIn"
					leave-active-class="es-animated fadeOut"
					:duration="200"
				>
					<div
						:class="[
							'es-modal',
							{ 'es-modal__fullscreen': fullscreen },
						]"
						:style="styles"
					>
						<span
							class="es-modal__header__icon-close el-icon-close"
							@click="handleClose"
						></span>
						<div class="es-modal__header">
							<slot name="header">
								<span class="es-modal__header__title">
									{{ title }}
								</span>
							</slot>
						</div>
						<div class="es-modal__content">
							<slot>
								{{ message }}
							</slot>
						</div>
						<div class="es-modal__footer">
							<slot name="footer">
								<es-button
									v-if="showConfirm"
									class="es-modal__footer__confirm"
									type="primary"
									size="small"
									@click="handleClose"
								>
									{{ confirmText }}
								</es-button>
								<es-button
									v-if="showCancel"
									class="es-modal__footer__cancel"
									size="small"
									@click="handleClose"
								>
									{{ cancelText }}
								</es-button>
							</slot>
						</div>
					</div>
				</transition>
			</div>
		</transition>
	</teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'

export default defineComponent({
	name: 'EsModal',
	props: {
		styles: {
			type: Object,
			default: () => ({}),
		},
		modelValue: {
			type: Boolean,
			default: false,
		},
		beforeClose: {
			type: Function as PropType<(...args: unknown[]) => unknown>,
		},
		title: {
			type: String,
			default: '提示',
		},
		message: String,
		fullscreen: {
			type: Boolean,
			default: false,
		},
		appendToBody: {
			type: Boolean,
			default: false,
		},
		closeOnClickMask: {
			type: Boolean,
			default: true,
		},
		showCancel: {
			type: Boolean,
			default: true,
		},
		cancelText: {
			type: String,
			default: '取消',
		},
		showConfirm: {
			type: Boolean,
			default: true,
		},
		confirmText: {
			type: String,
			default: '确定',
		},
	},
	emits: ['update:modelValue'],
	setup(props, ctx) {
		const { emit } = ctx
		const close = () => {
			emit('update:modelValue', false)
		}
		const handleClose = () => {
			if (props.beforeClose) {
				props.beforeClose(close)
			} else {
				close()
			}
		}
		return {
			handleClose,
		}
	},
})
</script>
