<template>
	<div class="comp" :class="{'hide' : !visible }">
		<div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div>
		<div class="modal">
			<div class="modal-title">
				{{$t('form.modalUploadCard.tit')}}
				<img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')">
			</div>
			<div class="modal-content">
				<div class="gird-g upload">
					<div class="pure-u-1 pure-u-md-1-2 upload-item">
						<div class="tit"> {{$t('form.modalUploadCard.front')}}</div>
						<img class="poster pointer" :src="frontPicSrc || require('@assets/images/common/card-front.png')" alt="" @click="handlePicSelect('front')">
					</div>
					<div class="pure-u-1 pure-u-md-1-2 upload-item">
						<div class="tit"> {{$t('form.modalUploadCard.back')}}</div>
						<img class="poster pointer" :src="backPicSrc || require('@assets/images/common/card-back.png')" alt="" @click="handlePicSelect('back')">
					</div>
				</div>
			</div>
			<div class="modal-btn-wrap">
				<div @click="onCancelHandler()" v-if="showCancel" class="btn">{{cancelText}}</div>
				<div @click="onConfirmHandler()" v-if="showConfirm" class="btn" :class="{disabled: submitBtnDisabled}">{{confirmText}}</div>
			</div>
		</div>
	</div>
</template>

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