<template>
	<view class="tabbar-container">
		<block>
			<view class="tabbar-item" v-for="(item, index) in tabbarList"
				:class="[currentItem == item.id ? ' center-item' : '']" @click="changeItem(item)">
				<view class="item-top">
					<image :style="{width:item.width+'rpx',height:item.height+'rpx'}"
						:src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
				</view>
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>

		</block>
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentItem: 0,
				tabbarList: [{
						id: 0,
						centerItem: false,
						width: 48,
						height: 48,
						"text": "首页",
						"pagePath": "/pages/index/index",
						"iconPath": require("@/static/index_icon1.png"),
						"selectedIconPath": require("@/static/index_icon1.png")
					},
					{
						id: 1,
						centerItem: false,
						width: 48,
						height: 48,
						"text": "课程中心",
						"pagePath": "/pages/course/index",
						"iconPath": require("@/static/index_icon1.png"),
						"selectedIconPath": require("@/static/index_icon1.png")
					},
					{
						id: 2,
						centerItem: false,
						width: 48,
						height: 48,
						"text": "校友权益",
						"pagePath": "/pages/book/index",
						"iconPath": require("@/static/index_icon1.png"),
						"selectedIconPath": require("@/static/index_icon1.png")
					},
					{
						id: 3,
						centerItem: false,
						width: 48,
						height: 48,
						"text": "我的",
						"pagePath": "/pages/me/index",
						"iconPath": require("@/static/index_icon1.png"),
						"selectedIconPath": require("@/static/index_icon1.png")
					},
				]
			};
		},
		mounted() {
			this.currentItem = this.currentPage;
			uni.hideTabBar();
		},
		methods: {
			changeItem(item) {
				let _this = this;
				console.log(item.pagePath)
				//_this.currentItem = item.id;

				uni.switchTab({
					url: item.pagePath
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 10rpx 0;
		color: #6E6E6E;
		z-index: 9999;
		background: #fff;
		box-shadow: 0 -1rpx 20rpx #bed2ec;

		.tabbar-item {
			text-align: center;
			width: 100%;
			font-size: 24rpx;
			color: #666666;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}

		.item-top {
			image {
				display: none;
			}
		}

		.center-item {
			.item-top {
				width: 100%;
				height: 75rpx;
				margin: 0 auto;
				margin-top: -135rpx;
				position: relative;
				background: url('../../static/index_icon_cur.png') no-repeat;
				background-size: 100% auto;
				text-align: center;
				padding-top: 30rpx;

				image {
					display: block;
					margin: 0 auto
				}
			}

			.item-bottom {
				margin-top: -100rpx;
				color: #b89155;
			}

		}

	}
</style>