<template>
	<div class="layer-container box flex-center" v-if="status.show">
		<div class="sliding-verification-code-container">
			<div class="sliding-verification-code-title">
				<p>拼图验证
					<span class="color-primary font-small mar-l-mini pointer" @click="getImageData()">
						<i class="icon icon-vm-status-loading mar-r-xs"></i>换一张
					</span>
				</p>
				<i class="icon icon-cancel icon-css font-large font-bold pointer" @click="close()"></i>
			</div>
			<div class="sliding-verification-code-content" v-if="!bg.url"></div>
			<div class="sliding-verification-code-content"
				v-if="bg.url"
				 :style="{
			    	'background': 'url('+imgPrefix+'/common/GetStaticPic?path='+bg.url+')'
				 }"
			>
				<div class="sliding-verification-code-lump"
					v-if="lump.url"
					 :style="{
				    	'left':current.left+'px',
				    	'top': current.top+ 'px',
				    	'transition': (status.slider === 'start' ? 'inherit' : '1s'),
				    	'background': 'url('+imgPrefix+'/common/GetStaticPic?path='+lump.url+')'
					 }"
					 @mousedown.stop="dragStart($event)"
				></div>
			</div>
			<div class="sliding-verification-code-progress">
				<div class="sliding-verification-code-line">
					<p>向右滑动完成拼图</p>
				</div>
				<div class="sliding-verification-code-btn"
					 :class="{
				    	'sliding-verification-code-btn-error': status.slider === 'error'
					 }"
					 :style="'left:'+btn.left+'px;transition:'+(status.slider === 'start' ? 'inherit' : '1s')+';'"
					 @mousedown.stop="dragStartBtn($event)">
					<i class="icon icon-verification"></i>
					<!--					+ 'transition: '+status.slider === 'error' ? '2s' : 'inherit'+';'-->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import SlidingVerificationCode from "./sliding-verification-code";

    export default SlidingVerificationCode;
</script>

<style lang="scss" scoped>
</style>
