<template>
		<img :src="captchaSrc" @click="onClick" :class="isRotate ? 'run' : ''" :style="{
		width:width ? width +'rpx' : '100%',
		height:height ? height +'rpx' : '100%',
		marginTop:marginTop ? marginTop +'rpx' : '',
		marginBottom:marginBottom ? marginBottom +'rpx' : '',
		marginLeft:marginLeft ? marginLeft +'rpx' : '',
		marginRight:marginRight ? marginRight +'rpx' : '',
		borderRadius:borderRadius ? borderRadius +'rpx' : '',
		opacity: opacity ? opacity : '',
		'background-size': `${width ? width+'rpx':'100%'} ${height ? height+'rpx':'100%'}`
	}" alt="-">
</template>

<script>
	export default {
		name: 'imageBox',
		props: {
			src: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			},
			marginTop: {
				type: String,
				default: ''
			},
			marginBottom: {
				type: String,
				default: ''
			},
			marginLeft: {
				type: String,
				default: ''
			},
			marginRight: {
				type: String,
				default: ''
			},
			borderRadius: {
				type: String,
				default: ''
			},
			opacity: {
				type: String,
				default: ''
			},
			isRotate: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			}
		},
		computed: {
			captchaSrc() {
				try{
					if (this.src.indexOf('data:image/png;') !== -1) {
						return this.src.replace(/[\r\n]/g, "")
					} else {
						return this.src
					}
				}catch(err){
					console.info('err-----------------------',err)
				}
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
@keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}
.run { animation: rotate 2s linear infinite; }
</style>
