<template>
	<div v-if="formattedCount > 0" class="mods-badge-container">
		<div class="mods-badge" :class="[ 'mods-badge-' + type, 'mods-badge-' + size ]" :style="badgeStyle">
			{{ formattedCount }}
		</div>
		<slot></slot>
	</div>
</template>

<script>
	/**
	 * @component ModsBadge
	 * 
	 * @description
	 * 用于在组件上显示一个徽章，显示计数或字符。
	 * @props {(Number|String)} [count="1"] - 显示在徽章上的数字或字符串。
	 * @props {String} [type="error"] - 徽章的类型，可选值为 'primary', 'success', 'warning', 'error'。
	 * @props {String} [textColor="#fff"] - 徽章文字的颜色。
	 * @props {Array} [offset=[0, 0]] - 徽章相对于其父元素的偏移量。
	 * @props {String} [size="small"] - 徽章的大小，可选值为 'small', 'medium', 'large'。
	 * @computed {Number} formattedCount - 格式化后的计数。
	 * @computed {Object} badgeStyle - 徽章的样式对象。
	 * @example
	 * <mods-badge :count="123"></mods-badge>
	 */
	export default {
		name: 'ModsBadge',
		props: {
			count: {
				type: [Number, String],
				default: '1',
				validator(value) {
					// 验证 value 是否为数字或字符串数字
					return !isNaN(value) || (typeof value === 'string' && /^\d+$/.test(value));
				}
			},
			type: {
				type: String,
				default: 'error', //可选值primary,success,warning,error
			},
			textColor: {
				type: String,
				default: '#fff'
			},
			offset: {
				type: Array,
				default: () => {
					return [0, 0]
				}
			},
			size: {
				type: String,
				default: 'small',
				validator(value) {
					return ['small', 'medium', 'large'].includes(value);
				}
			}
		},
		computed: {
			formattedCount() {
				const count = parseInt(this.count, 10);
				return count > 99 ? 99 : count;
			},
			badgeStyle() {
				const style = {
					color: this.textColor,
					position: 'absolute',
					top: this.offset[1] + 'px',
					right: this.offset[0] + 'px'
				};
				return style;
			},
		},
	};
</script>

<style lang="scss">
	@import '/libs/css/style.scss';

	.mods-badge-container {
		position: relative;

		.mods-badge {
			/* #ifndef APP-NVUE */
			display: inline-flex;
			/* #endif */
			z-index: 9;
			line-height: 1;
			width: $--size-20;
			height: $--size-20;
			position: absolute;
			align-items: center;
			font-size: $--size-14;
			justify-content: center;
			border-radius: $--border-radius-circle;
		}
	}

	.mods-badge-small {
		padding: 2px;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.mods-badge-medium {
		padding: 2px;
		transform: scale(0.9);
		transform-origin: center center;
	}

	.mods-badge-large {
		padding: 2px;
		transform: scale(1.1);
		transform-origin: center center;
	}

	.mods-badge-primary {
		background-color: $--primary;
	}

	.mods-badge-success {
		background-color: $--success;
	}

	.mods-badge-warning {
		background-color: $--warning;
	}

	.mods-badge-error {
		background-color: $--error;
	}
</style>