<template>
	<u-tabbar
		activeColor="#000"
		inactiveColor="#000"
		:value="activeItem"
		:safeAreaInsetBottom="true"
		:fixed="true"
		:border="false"
    v-bind="$attrs"
	>
		<block v-for="item in tabbarList" :key="item.path">
			<u-tabbar-item
				:text="item.text"
				:name="item.name"
				@click="$Router.push(item.path)"
				v-if="item.show"
			>
				<template #inactive-icon>
					<!-- <u--image width="48rpx" height="48rpx" :src="$assets(item.icon)" /> -->
					<image class="u-tabbar-item__icon" :src="$assets(item.icon)"></image>
				</template>
				<template #active-icon>
					<!-- <u--image width="48rpx" height="48rpx" :src="$assets(item.activeIcon)" /> -->
					<image
						class="u-tabbar-item__icon"
						:src="$assets(item.activeIcon)"
					></image>
				</template>
			</u-tabbar-item>
		</block>
	</u-tabbar>
</template>

<script setup>
uni.hideTabBar()
const instance = getCurrentInstance()
const { $assets,$Router,$Route,$store } = instance.proxy
const tabbarList = ref([])
const List = {
  simple: [
	{
		text: '首页',
		icon: '/tabbar/home.png',
		activeIcon: '/tabbar/home-sel.png',
		path: '/pages/index/home/index',
		name: 'home',
		show: true
	},
	{
		text: '订单',
		icon: '/tabbar/order.png',
		activeIcon: '/tabbar/order-sel.png',
		path: '/pages/index/order/index',
		name: 'order',
		show: true
	},
	{
		text: '我的',
		icon: '/tabbar/my.png',
		activeIcon: '/tabbar/my-sel.png',
		path: '/pages/index/personal/index',
		name: 'personal',
		show: true
	}
],
common: [
  {
		text: '首页',
		icon: '/tabbar/order.png',
		activeIcon: '/tabbar/order-sel.png',
		path: '/pages/index/order/index',
		name: 'order',
		show: true
	},
	{
		text: '我的',
		icon: '/tabbar/my.png',
		activeIcon: '/tabbar/my-sel.png',
		path: '/pages/index/personal/index',
		name: 'personal',
		show: true
	}
]
}

const activeItem = ref()

watchEffect(() => {
  activeItem.value = $Route.meta.key
  const roleName  = $store.user.roleName
  if(activeItem.value === 'home' && roleName === 'common') {
    activeItem.value = 'order'
  }
  tabbarList.value = List[roleName]
})
</script>

<style lang="scss" scoped>
.u-tabbar-item__icon {
  margin-top: 10rpx;
	width: 48rpx;
	height: 48rpx;
	object-fit: contain;
}
</style>
