<template>
	<div class="lyf-ui-loading">
		<div class="lyf-ui-loading-cont" :class="{ 'vertical': vertical === true }">
			<!-- icon -->
			<div ref="loadingContainer" class="lyf-ui-loading-icon" :style="{
				width: size + 'px',
				height: size + 'px'
			}"></div>

			<!-- 文字 -->
			<div class="lyf-ui-text" :style="{
				color: fontColor,
				fontSize: fontSize + 'px'
			}">
				<slot>{{ text }}</slot>
			</div>
		</div>
	</div>
</template>

<script>
import lottie from 'lottie-web'
import local from '@/assets/json/loading_local.json'
import orange from '@/assets/json/loading_orange.json'
import load from '@/assets/json/loading_load.json'
import white from '@/assets/json/loading_white.json'

export default {
	name: 'LyfLoading',
	props: {
		// blue || gray || orange || white
		iconColor: {
			type: String,
			default: 'blue'
		},
		size: {
			type: [Number, String],
			default: 16
		},
		text: {
			type: String,
			default: '加载中'
		},
		fontSize: {
			type: [Number, String],
			default: 12
		},
		fontColor: {
			type: String,
			default: ''
		},
		// 文字和图标是否垂直排列
		vertical: {
			type: Boolean,
			default: false
		},
	},
	mounted() {
		let animationData = local
		if (this.iconColor === 'gray') {
			animationData = load
		}
		if (this.iconColor === 'orange') {
			animationData = orange
		}
		if (this.iconColor === 'white') {
			animationData = white
		}
		lottie.loadAnimation({
			container: this.$refs.loadingContainer,
			renderer: 'svg',
			animationData
		})
	}
}
</script>

<style scoped>
.lyf-ui-loading .lyf-ui-loading-cont {
	display: flex;
	justify-content: center;
	align-items: center;
}

.lyf-ui-loading .lyf-ui-loading-cont.vertical {
	flex-direction: column;
}

.lyf-ui-loading .lyf-ui-loading-cont.vertical .lyf-ui-text {
	margin-top: var(--space_8);
	margin-left: 0;
}

.lyf-ui-loading .lyf-ui-loading-cont .lyf-ui-loading-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

.lyf-ui-loading .lyf-ui-loading-cont .lyf-ui-text {
	margin-left: var(--space_4);
	color: var(--font-color_3);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.lyf-ui-loading.global {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 400;
	transform: translate3d(-50%, -50%, 0);
	background-color: #000;
}

.lyf-ui-loading.global .lyf-ui-loading-cont {
	flex-direction: column;
}

.lyf-ui-loading.global .lyf-ui-loading-cont .lyf-ui-text {
	margin-top: var(--space_8);
	margin-left: 0;
	color: var(--font-color_4);
	font-size: 16px;
}
</style>