<template>
	<div class="comp" :class="{'hide' : !visible }">
		<div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div>
		<div class="modal">
			<div v-if="title" class="modal-title">{{title}}</div>
			<div class="modal-icon-wrap">
				<img :src="require('@assets/images/common/icon-'+icon+'.png')">
			</div>
			<div class="modal-content">{{content}}</div>
			<div class="modal-btn-wrap">
				<div @click="onCancelHandler()" v-if="showCancel" class="btn">{{cancelText}}</div>
				<div @click="onConfirmHandler()" v-if="showConfirm" class="btn">{{confirmText}}</div>
			</div>
		</div>
	</div>
</template>

<script src="./modal-comp.js"></script>
<style lang="scss" scoped>
@import "./modal-comp.scss";
</style>