<!--
 * @Descripttion: 状态指示器
-->
<template>
	<div>
		<span class="x-state" :class="[{'x-status-processing':pulse}, 'x-state-bg--'+type]"></span>
		<span v-if="label" class="hidden-sm-and-down" style="padding:0 6px;color: #8a8888; font-size: 12px; }">{{ label }}</span>
	</div>
</template>

<script>
	export default {
		props: {
			type: { type: String, default: "primary" },
			label: { type: String, default: "" },
			pulse: { type: Boolean, default: false }
		}
	}
</script>

<style scoped>
	.x-state {display: inline-block;background: #000;width: 8px;height: 8px;border-radius: 50%;vertical-align: middle;}
	.x-status-processing {position: relative;}
	.x-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}

	.x-state-bg--primary {background: var(--el-color-primary);}
	.x-state-bg--success {background: var(--el-color-success);}
	.x-state-bg--warning {background: var(--el-color-warning);}
	.x-state-bg--danger {background: var(--el-color-danger);}
	.x-state-bg--info {background: var(--el-color-info);}

	@keyframes warn {
		0% {
			transform: scale(0.5);
			opacity: 1;
		}
		30% {
			opacity: 0.7;
		}
		100% {
			transform: scale(2.5);
			opacity: 0;
		}
	}
</style>
