<template>
	<view class="normal-tabs-item-container">
		<view class="title" :class="{ 'active': isActive }" :style="{ 'color': isActive ? activeColor : normalColor }">
			{{ title || '' }}
		</view>
		<view class="badge-view" v-if="badge" :style="{ 'background-image': themeStore.imageCssUrl.iconBadgeRed }">
			{{ badge || '' }}
		</view>
		<view class="line-view">
			<view class="line" v-if="isActive" :style="{ 'background': activeColor }"></view>
			<view v-if="isActive" class="triangle-up" :style="{ 'border-bottom-color': activeColor }"></view>
		</view>
	</view>
</template>

<script setup>
	import { useThemeStore } from '@/store/useThemeStore'

	const themeStore = useThemeStore()

	defineProps({
		title: {
			type: String,
			default: ''
		},
		badge: {
			type: String,
			default: ''
		},
		isActive: {
			type: Boolean,
			default: false
		},
		normalColor: {
			type: String,
			default: '#fff'
		},
		activeColor: {
			type: String,
			default: '#FFDF3F'
		},
		size: {
			type: String,
			default: 'normal' // small
		}
	})
</script>

<style lang="scss" scoped>
	.normal-tabs-item-container {
		position: relative;
		height: 100rpx;
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.title {
			font-size: 30rpx;
			white-space: nowrap;
		}
		
		.title.active {
			font-weight: bold;
		}
		
		.badge-view {
			position: absolute;
			top: 2rpx;
			right: 25%;
			height: 32rpx;
			min-width: 80rpx;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			text-align: center;
			font-size: 18rpx;
			line-height: 24rpx;
			color: #fff;
			font-weight: 400; 
		}
		
		.badge-icon {
			min-width: 70rpx;
			height: 30rpx;
		}
		
		.line-view {
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 50;
			width: 100%;
			
			.line {
				width: 120rpx;
				height: 4rpx;
				border-radius: 2rpx;
				overflow: hidden;
			}

			.triangle-up {
				position: absolute;
				left: calc(50% - 4rpx);
				bottom: 3rpx;
				width: 0;
				height: 0;
				z-index: 1;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
				border-bottom: 10rpx solid #ff0000;
			}
		}
	}
</style>