<template>
	<div class="sticky top-0 z-10 shrink-0">
		<Header>
			<FBreadcrumbs
				:items="[{ label: '账单', route: { name: 'Billing' } }]"
			/>
		</Header>
		<TabsWithRouter
			v-if="$team?.pg?.is_desk_user || $session.hasBillingAccess"
			:tabs="filteredTabs"
		/>
		<div
			v-else
			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
		>
			<i-lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
			<ErrorMessage message="您无权查看账单页面" />
		</div>
	</div>
</template>
<script>
import { Tabs, Breadcrumbs } from 'jingrow-ui';
import Header from '../components/Header.vue';
import TabsWithRouter from '../components/TabsWithRouter.vue';

export default {
	name: 'Billing',
	components: {
		Header,
		FBreadcrumbs: Breadcrumbs,
		FTabs: Tabs,
		TabsWithRouter,
	},
	data() {
		return {
			currentTab: 0,
			tabs: [
				{ label: '概览', route: { name: 'BillingOverview' } },
				{ label: '订单记录', route: { name: 'BillingOrders' } },
				{ label: '余额明细', route: { name: 'BillingBalances' } },
				{
					label: '开发者收益',
					route: { name: 'BillingMarketplacePayouts' },
					requireDeveloper: true,
					requirePro: true
				},
			],
		};
	},
	computed: {
		filteredTabs() {
			return this.tabs.filter(tab => {
				// 如果需要开发者权限但用户不是开发者，则隐藏
				if (tab.requireDeveloper && !this.$team.pg.is_developer) {
					return false;
				}
				
				// 如果需要专业版权限但用户不是专业版用户，则隐藏
				if (tab.requirePro && !this.$team.pg.is_pro) {
					return false;
				}
				
				return true;
			});
		}
	},
};
</script>