<template>
	<view class="custom-tab-bar">
		<view class="tab-item" v-for="(item,i) in tabBarList" :key="i" v-if="tabBarShowList[i]" @click="switchTab(i)">
			<text :style="{ 'color': currentTab === i?item.selectColor:'#fff' }">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentTab: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabBarList: [{
						"pagePath": "pages/index/index",
						"selectColor": "#00FF00",
						"text": "首页"
					},
					{
						"pagePath": "pages/index/readingBody",
						"selectColor": "#00FF00",
						"text": "阅读体"
					},
					{
						"pagePath": "pages/index/sensoryStore",
						"selectColor": "#00FF00",
						"text": "有感商店"
					},
					{
						"pagePath": "pages/index/intelligentAgent",
						"selectColor": "#00FFFF",
						"text": "智能体"
					},
					{
						"pagePath": "pages/index/iSoul",
						"selectColor": "#00FF00",
						"text": "iSoul"
					}
				],
				tabBarShowList: []
			};
		},
		onLoad() {
			this.getCurrentTab();
		},
		mounted() {
			this.tabBarShowList = uni.getStorageSync('SHFlag').split(',').map(item => {
				return item.trim().toLowerCase() === 'true';
			});
		},
		methods: {
			getCurrentTab() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const currentPath = currentPage.route;
				this.tabBarList.forEach((item, index) => {
					if (item.pagePath === currentPath) {
						this.currentTab = index;
					}
				});
			},
			switchTab(index) {
				if (this.currentTab === index) return;
				uni.switchTab({
					url: '/' + this.tabBarList[index].pagePath
				});
			}
		}
	};
</script>

<style scoped>
	.custom-tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 123rpx;
		z-index: 30;
		background: #989898;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		height: 100%;
	}


	.tab-item text {
		font-size: 31rpx;
	}
</style>