<template>
	<view class="loading" :style="[customStyle, loadingStyle]">
		<view :style="icontStyle">
			<im-icon name="loading" :color="iconColor" :size="size" spin :spin-speed="2" />
			<text v-if="text" class="loading-text">{{ text }}</text>
		</view>
		<slot></slot>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import ImIcon from '../im-icon/im-icon.vue'
// import { IconSize } from '../../types/components/icon'
import type { LoadingProps } from '../../types/components/loading'

// interface Props {
// 	size?: IconSize | number;
// 	iconColor?: string;
// 	mask?: boolean;
// 	text?: string;
// 	// 自定义样式
// 	customStyle?: Record<string, string | number> | string
// }

const props = withDefaults(defineProps<LoadingProps>(), {
	size: 32,
	iconColor: '',
	mask: true,
	text: 'loading...',
	customStyle: () => ({})
});

const icontStyle = computed(() => {
	let style = `display:flex; align-items: center;`;
	if (props.iconColor) {
		style += `color: ${props.iconColor};`;
	} else if (props.mask) {
		style += 'color: #eee;';
	}
	return style;
});

const loadingStyle = computed(() => {
	return props.mask ? "background: rgba(0, 0, 0, 0.3);" : "";
});
</script>

<style lang="scss" scoped>
.loading {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10000;
	display: flex;
	justify-content: center;
	align-items: center;

	&-text {
		margin-left: 10rpx;
	}
}

.rotate {
	animation: rotate 2s ease-in-out infinite;

}

@keyframes rotate {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(360deg)
	}
}
</style>