<template>
	<view class="footerBox">
		<view @click="tabClick(index)" class="footerItem" :class="activeIndex==index?'active':''"
			v-for="(item,index) in tabList" :key="index">
			<image class="tabIcon tabIcon1" mode="heightFix" :src="'/static/'+item.moduleIcon2+'.png'"></image>
			<image class="tabIcon tabIcon2" mode="heightFix" :src="'/static/'+item.moduleIcon+'.png'"></image>
			<view class="desc">
				{{item.appName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['activeTab'],
		data() {
			return {
				tabList: [],
				userInfo: {
					accountType: 1
				},
				activeIndex: 0
			};
		},
		mounted() {
				this.activeIndex = this.activeTab;
				this.tabList.push(
				{
					appName: '培训计划',
					moduleIcon2: 'examIcon1',
					moduleIcon: 'examIcon1-select',
					plugin: 'mssage',
					appShow: 1
				}, 
				{
					appName: '规章',
					moduleIcon2: 'examIcon2',
					moduleIcon: 'examIcon2-select',
					plugin: 'projectEnd',
					appShow: 1
				} )
		},
		methods: {
			tabClick(index) {
				this.activeIndex = index
				console.log(index,666777)
				switch (index){
					case 0:
						uni.redirectTo({
							url: '/pages/personLocation/exam/index/index'
						})
						break;
					case 1:
						uni.redirectTo({
							url: '/pages/personLocation/exam/rules/rules'
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footerBox {
		background-color: white;
		display: flex;
		width: 100%;
		position: fixed;
		height: 110rpx;
		bottom: 0;
		left: 0;
		z-index: 9999;
		border-top: 1px solid rgba(151, 151, 151, 0.15);
	}

	.footerItem {
		font-size: 24rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: rgba(148, 149, 173, 1);

		.tabIcon {
			width: fit-content;
			height: 35rpx;
		}

		.tabIcon2 {
			display: none;
		}

		&.active {
			color: $uni-color-primary;

			.tabIcon2 {
				display: inline-block;
			}

			.tabIcon1 {
				display: none;
			}
		}

		.desc {
			padding-top: 5rpx;
		}
	}
</style>