<template>
	<view class="hl88-lr-cover">
		<image 
			class="hl88-lr-cover-img"
			:lazy-load="true" 
			:fade-show="false" 
			:src="stcOss(image)" 
			mode="aspectFill" 
			:style="{ height: screenHeight + 'px', width: screenWidth + 'px'}"
		></image>
	</view>
</template>

<script>
export default {
	name: 'LiveRoomCoverImage',
	props: {
		screenHeight: {
			default: 0
		},
		screenWidth: {
			default: 0
		},
		image: {
			type: String,
			default: ''
		}
	},
	methods: {
		stcOss(url) {
				let oss = (this.$store.state.shell && this.$store.state.shell.appUrl && this.$store.state.shell.appUrl.oss) || '';
			let image = '';
			if (url) {
				if (/^(http|https):\/\/.+/.test(url)) {
					image = url;
				} else {
					image = oss + url;
				}
			} else {
				image = '';
			}
			return image;
		}
	}
};
</script>

<style>
.hl88-lr-cover {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
}
.hl88-lr-cover-img{
	/* #ifndef APP-PLUS */
	filter: blur(10px);
	/* #endif */
	background-color: #000000;
}
</style>
