<template>
	<text 
	v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
	:class="[isDot ? 'dot' : 'not-dot', inverted && 'inverted', shape === 'horn' && 'horn', `${type}${inverted ? '-inverted' : ''}`]"
	class="el-badge"
	:style="[addStyle(customStyle), badgeStyle]"
	>{{ isDot ? '' :showValue }}</text>
</template>

<script setup>
	import { computed,watch,ref,onMounted,nextTick,getCurrentInstance } from "vue";
	import { browser } from "../../libs/check.js";
	import { getSystemInfo,guid,deepMerge,px2rpx,unit } from "../../libs/utils.js";
	import { getClientRect,addStyle } from "../../libs/style.js";
	
	const props = defineProps({
		// 是否显示圆点
		isDot: {
		    type: Boolean,
		    default: false
		},
		// 显示的内容
		value: {
		    type: [Number, String],
		    default: ''
		},
		// 是否显示
		show: {
		    type: Boolean,
		    default: true
		},
		// 最大值，超过最大值会显示 '{max}+'
		max: {
		    type: [Number, String],
		    default: 999
		},
		// 主题类型，error|warning|success|primary
		type: {
		    type: String,
		    default: 'error'
		},
		// 当数值为 0 时，是否展示 Badge
		showZero: {
		    type: Boolean,
		    default: false
		},
		// 背景颜色，优先级比type高，如设置，type参数会失效
		bgColor: {
		    type: [String, null],
		    default: null
		},
		// 字体颜色
		color: {
		    type: [String, null],
		    default: null
		},
		// 徽标形状，circle-四角均为圆角，horn-左下角为直角
		shape: {
		    type: String,
		    default: 'circle'
		},
		// 设置数字的显示方式，overflow|ellipsis|limit
		// overflow会根据max字段判断，超出显示`${max}+`
		// ellipsis会根据max判断，超出显示`${max}...`
		// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
		numberType: {
		    type: String,
		    default: 'overflow'
		},
		// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
		offset: {
		    type: Array,
		    default: [0,0]
		},
		// 是否反转背景和字体颜色
		inverted: {
		    type: Boolean,
		    default: false
		},
		// 是否绝对定位
		absolute: {
		    type: Boolean,
		    default: false
		},
		customStyle: {
			type: Object,
			default: {}
		}
	});
	
	const boxStyle = computed(()=>{
		let style = {};
		return style;
	});
	
	const badgeStyle = computed(()=>{
		const style = {};
		if(props.color) {
			style.color = props.color;
		}
		
		if (props.bgColor && !props.inverted) {
			style.backgroundColor = props.bgColor
		}
		
		if (props.absolute) {
			style.position = 'absolute';
			if(props.offset.length) {
				const top 		= props.offset[0];
				const right 	= props.offset[1] || top;
				style.top 		= unit(top,'px');
				style.right 	= unit(right,'px');
			}
		}else{
			style.display = 'inline-block';
		}
		
		return style;
	});
	
	const showValue = computed(()=>{
		let a = Number(props.value);
		let b = Number(props.max);
		switch (props.numberType) {
			case "overflow":
				return a > b ? props.max + "+" : props.value
			case "ellipsis":
				return a > b ? "..." : props.value
			case "limit":
				return a > 999 ? a >= 9999 ? Math.floor(props.value / 1e4 * 100) / 100 + "w" : Math.floor(props.value / 1e3 * 100) / 100 + "k" : props.value;
			default:
				return a
		}
	});
	
</script>

<style lang="scss" scoped>
	.el-badge {
		border-top-right-radius: 100px;
		border-top-left-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		display: flex;
		flex-direction: row;
		line-height: 11px;
		text-align: center;
		font-size: 11px;
		color: #FFFFFF;
	
		&.dot {
			height: 8px;
			width: 8px;
		}
		
		&.inverted {
			font-size: 13px;
		}
		
		&.not-dot {
			padding: 2px 5px;
		}
	
		&.horn {
			border-bottom-left-radius: 0;
		}
	
		&.primary {
			background-color: #3c9cff;
		}
		
		&.primary-inverted {
			color: #3c9cff;
		}
	
		&.error {
			background-color: #f56c6c;
		}
		
		&.error-inverted {
			color: #f56c6c;
		}
	
		&.success {
			background-color: #5ac725;
		}
		
		&.success-inverted {
			color: #5ac725;
		}
	
		&.info {
			background-color: #909399;
		}
		
		&.info-inverted {
			color: #909399;
		}
	
		&.warning {
			background-color: #f9ae3d;
		}
		
		&.warning-inverted {
			color: #f9ae3d;
		}
	}
</style>