<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<u-tabbar :value="current" @change="changeTab" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true"
			:border="false" activeColor="#FFC748" inactiveColor="#1D1D1D">
			<u-tabbar-item v-for="(item,index) in tabBarList" :key="index" :text="item.text">
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath" ></image>
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
			</u-tabbar-item>
		</u-tabbar>

	</view>
</template>

<script>
	export default {
		name: "tabBar",
		props: {
			currentPage: String
		},
		data() {
			return {
				current: 0,
				tabBarList: [{
						pagePath: "pages/index/index",
						iconPath: "../../static/image/tabbar/new_home.png",
						selectedIconPath: "../../static/image/tabbar/new_home_check.png",
						text: this.$t('tabbar.home'),
						customIcon: false,
					},
					{
						pagePath: "pages/mine/index",
						iconPath: "../../static/image/tabbar/new_mine.png",
						selectedIconPath: "../../static/image/tabbar/new_mine_check.png",
						text: this.$t('tabbar.mine'),
						customIcon: false,
					}
				]
			};
		},
		methods: {
			changeTab(e) {
				let page = '/' + this.tabBarList[e].pagePath
				console.log(page);
				uni.switchTab({
					url: page,
					success: (res) => {
						console.log(res);
					},
					fail: (e) => {
						console.log(e);
					}
				})
			}
		},
		created() {
			//隐藏原生tabbar
			uni.hideTabBar();
			/* this.tabBarList = [{
				pagePath: "pages/index/index",
				iconPath: "../../static/image/tabbar/home.png",
				selectedIconPath: "../../static/image/tabbar/home_check.png",
				text: this.$t('tabbar.home'),
				customIcon: false,
			},{
				pagePath: "pages/mine/index",
				iconPath: "../../static/image/tabbar/mine.png",
				selectedIconPath: "../../static/image/tabbar/mine_check.png",
				text: this.$t('tabbar.mine'),
				customIcon: false,
			}]; */
			// 当前选中的菜单
			this.tabBarList.forEach((i, index) => {
				if (i.pagePath == this.currentPage) {
					this.current = index
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.u-page__item__slot-icon {
		width: 76rpx;
		height: 76rpx;

	}

	.u-tabbar /deep/ .u-tabbar--fixed {
		width: 100%;
		height: 88rpx;
		padding: 20px 0;
		background: #FFFFFF;
	}
</style>