<template>
	<view data-remark='加载中'
		class="g-rh-loading g-components-loading g_w_all g_h_all g_flex_c"
		:style="{
			'min-height': minHeight ? minHeight + 'rpx' : '0rpx',
		}"
	>
		<view :class="paddingBottom">
			<view class="g_flex_row_center">
				<u-loading mode="circle" :size="size" :color="resolvedColor"></u-loading>
			</view>
			<view class="g_fs_14 g_c_9 g_flex_row_center g_mt_10" v-if="text != 'empty'">{{ text }}</view>
		</view>
	</view>
</template>

<script>
/* 自定义loading */
export default {
	props: {
		loading: {
			type: Boolean,
			default: () => {
				return true;
			},
		},
		minHeight: {
			default: () => {
				return 500;
			},
		},
		text: {
			default: () => {
				return "加载中...";
			},
		},
		paddingBottom: {
			// 微调loading的位置
			default: () => {
				return 0;
			},
		},
		bg: {
			default: () => {
				return "auto";
			},
		},
		size: {
			default: () => {
				return "34";
			},
		},
		primaryColor:{
			default:()=>{
				return "";
			}
		}
	},
	data() {
		return {
			currentThemeColor: getApp().globalData.themeColor || '#3578f6',
		};
	},
	created() {
		uni.$on('themeChanged', (color) => {
			this.currentThemeColor = color || '#3578f6';
		});
	},
	computed: {
		resolvedColor() {
			return this.primaryColor || this.currentThemeColor;
		}
	},
};
</script>

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