<template>
	<div class="comp filter-comp" :class="{'hide' : !visible }">
		<div @click="onOverLayHandler()" class="overlay"></div>
		<div class="border">
			<div class="close" @click="onCloseHandler()"><img src="@/assets/images/clarms/close.png"></div>
			<div class="modal">

					<div class="title">{{title}}</div>
				<div class="modal-content">
					<div class="check-panel">
						<el-checkbox-group v-model="checkList">
							<el-checkbox v-for="item in items" :key="item.id" :label="item.value" >{{item.label}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
				<div class="modal-btn-wrap">
					<div @click="onCancelHandler()" class="btn disable">{{cancelText}}</div>
					<div @click="onConfirmHandler()" class="btn">{{confirmText}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

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