<template>
	<el-tabbar
	v-if="!isEmpty(data)"
	:color="data.color" 
	:selectedColor="data.selectedColor" 
	:borderStyle="data.borderStyle"
	:backgroundColor="data.backgroundColor"
	:list="data.list"
	></el-tabbar>
</template>

<script setup>
	import { ref,reactive,watch } from "vue";
	import { useTabbarStore } from "@/store/tabbar";
	import { storeToRefs } from 'pinia';
	import { isEmpty } from "@/el-ui/libs/check"
	
	const tabbarStore = useTabbarStore()
	const { type,color,selectedColor,borderStyle,backgroundColor,list } = storeToRefs(tabbarStore);
	
	let data = ref();
	watch(()=>list.value,(newValue,oldValue)=>{
		if(!newValue){
			return ;
		}
		
		tab();
	})
	
	const tab = ()=>{
		if(list.value.length <= 0){
			return ;
		}
		
		for(let index in list.value){
			let page = list.value[index];
			if(page.pagePath == "pages/index/cart"){
				uni.$http.get("cart/count").then(res=>{
					if(res.code){
						list.value[index].count = res.data;
					}
				});
				break;
			}
			uni.hideTabBar({
				success: () => {},
				fail: () => {}
			});
		}
		
		data.value = {
			color: color.value,
			selectedColor: selectedColor.value,
			borderStyle: borderStyle.value,
			backgroundColor: backgroundColor.value,
			list: list.value
		};
	}
	tab();
</script>
