<template>
	<view>
		<view class="tabbar" :style="{ 'background-color': props.backgroundColor }">
			<view class="tabbar-border" :style="{ 'background-color': props.borderStyle == 'black' ? 'rgba(0, 0, 0, 0.33)' : '#fff' }"></view>
			<view class="tabbar-item" v-for="(item,index) in props.list" :key="index" @click="jump(item)">
				<slot>
					<view class="tabbar-item-wrap">
						<view class="icon">
							<image :src="isActive(item.pagePath) ? item.selectedIconPath : item.iconPath"></image>
						</view>
						<view class="text" :style="{ color: isActive(item.pagePath) ? props.selectedColor : props.color }">{{ item.text }}</view>
						<view class="reddot" v-if="item.count != undefined && item.count > 0"> {{ item.count }} </view>
					</view>
				</slot>
			</view>
		</view>
		<view v-if="placeholder" class="placeholder"></view>
	</view>
</template>

<script setup>
	import { computed,watch,ref,onMounted,nextTick,getCurrentInstance } from "vue";
	import { navigateTo } from "../../libs/navigate.js";
	
	const props = defineProps({
		// 固定在顶部时，是否生成一个等高元素，以防止塌陷
		placeholder: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: "#333"
		},
		selectedColor: {
			type: String,
			default: "#1b43c4"
		},
		borderStyle: {
			type: String,
			default: "black"
		},
		backgroundColor: {
			type: String,
			default: "#ffffff"
		},
		/**
		 * [
				{
					"pagePath": "pages/index/index",
					"iconPath": "static/tabbar/white/1.png",
					"selectedIconPath": ""
					"text": "首页"
				}
		 ]
		 */
		list: {
			type: Array,
			default: []
		}
	});
	
	let pages    = getCurrentPages();
	let url      = ref(pages[pages.length - 1].route);
	const isActive = (value)=>{
		return url.value == value;
	};
	
	const jump = (value)=>{
		if(value.pagePath.length <= 0 || url.value == value.pagePath){
			return false;
		}
		
		navigateTo(value.pagePath);
	}
	
</script>

<style lang="scss" scoped>
	.placeholder { 
		width: 100%; min-height: 50px; 
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tabbar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 1;
		z-index: 999999;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.tabbar-border {
			background-color: rgba(0, 0, 0, 0.33);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 1px;
			transform: scaleY(.5);
		}
		.tabbar-item {
			box-sizing: border-box;
			flex-direction: column;
			flex: 1;
			font-size: 0;
			text-align: center;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			display: flex;
			justify-content: center;
			align-items: center;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			.tabbar-item-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				position: relative;
				flex-direction: column;
				cursor: pointer;
				height: 50px;
				.icon {
					image {
						width: 24px;
						height: 24px;
					}
				}
				.text {
					position: relative;
					text-align: center;
					font-size: 10px;
					color: rgb(51, 51, 51);
					line-height: normal;
					margin-top: 3px;
				}
				.reddot {
					position: absolute;
					top: 4rpx;
					right: 0;
					background-color: #f43530;
					color: #fff;
					-webkit-transform: translate(40%);
					transform: translate(40%);
					width: auto;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 32rpx;
					min-width: 32rpx;
					padding: 0 4rpx;
					font-size: 24rpx;
					text-align: center;
					white-space: nowrap;
				}
			}
		}
	}
</style>