<template>
	<view class="tabBar-css">
		<u-tabbar
			:value="currentPage"
			activeColor="#c5000a"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item 
				v-for="(item, index) in tabBarList"
				:text="item.text"
				:icon="currentPage === item.pagePath ? item.selectedIconPath : item.iconPath"
				:name="item.pagePath"
				@click="clickPage"
			></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		name: 'tabBar',
		props: {
		},
		data() {
			return {
				currentPage: '',
			}
		},
		computed: {
			...mapGetters([
				'tabBarList',
			]) 
		},
		mounted() {
			this.currentPage = uni.getStorageSync('currentPagePath');
			console.log(this.tabBarList);
			console.log(this.currentPage);
		},
		methods: {
			clickPage(arg) {
				// this.currentPage = arg;
				let page = '/' + arg;
				wx.switchTab({
					url: page,
					success: function(res) {
						console.log('success');
						// console.log(res);
					},
					fail: function(res) {
						console.log('fail');
						// console.log(res);
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabBar-css {
		position: fixed;
		bottom: 0;
		background-color: red;
		width: 100%;
		z-index: 9999;
	}
</style>