<template>
	<view class="fe-bottom-nav">
		<view
			v-for="(item, idx) in items"
			:key="item.key"
			class="fe-bottom-nav__item"
			:class="{ 'fe-bottom-nav__item--active': current === item.key }"
			@tap="goByIndex(idx)"
		>
			<text class="fe-bottom-nav__icon">{{ item.icon }}</text>
			<text>{{ item.label }}</text>
		</view>
	</view>
</template>

<script>
import store from '@/common/store.js'

const ENTERPRISE_TABS = [
	{ key: 'home', label: '首页', icon: '🏠', url: '/packageA/home/index' },
	{ key: 'message', label: '信息', icon: '💬', url: '/packageA/enterprise/messages' },
	{ key: 'mine', label: '我的', icon: '👤', url: '/packageA/enterprise/mine' }
]

const WORKER_TABS = [
	{ key: 'home', label: '首页', icon: '🏠', url: '/packageA/home/index' },
	{ key: 'mine', label: '我的', icon: '👤', url: '/packageA/worker/profile' }
]

export default {
	name: 'FeBottomNav',
	props: {
		current: { type: String, default: 'home' },
		role: { type: String, default: '' }
	},
	computed: {
		resolvedRole() {
			if (this.role === 'worker' || this.role === 'enterprise') return this.role
			const s = store.getState()
			return s.role === 'worker' ? 'worker' : 'enterprise'
		},
		items() {
			return this.resolvedRole === 'worker' ? WORKER_TABS : ENTERPRISE_TABS
		}
	},
	methods: {
		goByIndex(idx) {
			const item = this.items[idx]
			if (!item || item.key === this.current) return
			uni.reLaunch({ url: item.url })
		}
	}
}
</script>
