<template>
	<view class="footers_box">
		<ul>
			<li>
				<view class="icon_box">
					<image v-if="tabIndex == 0" class="tabIcon" src="/static/workstation/tab1_active.png"></image>
					<image v-else class="tabIcon" src="/static/workstation/tab1.png"></image>
				</view>
				<view class="icon_box" :class="{ active: tabIndex == 0 }" @click="changTab(0)">工作站</view>
			</li>
			<li>
				<view class="icon_box">
					<image v-if="tabIndex == 1" class="tabIcon" src="/static/workstation/tab2_active.png"></image>
					<image v-else class="tabIcon" src="/static/workstation/tab2.png"></image>
				</view>
				<view class="icon_box" :class="{ active: tabIndex == 1 }" @click="changTab(1)">数据中心</view>
			</li>
			<li><image class="tabIcon tabIcon_more" src="/static/workstation/nav_add.png"></image></li>
			<li>
				<view class="icon_box">
					<image v-if="tabIndex == 2" class="tabIcon" src="/static/workstation/tab3_active.png"></image>
					<image v-else class="tabIcon" src="/static/workstation/tab3.png"></image>
				</view>
				<view class="icon_box" :class="{ active: tabIndex == 2 }" @click="changTab(2)">业务中心</view>
			</li>
			<li>
				<view class="icon_box">
					<image v-if="tabIndex == 3" class="tabIcon" src="/static/workstation/tab4_active.png"></image>
					<image v-else class="tabIcon" src="/static/workstation/tab4.png"></image>
				</view>
				<view class="icon_box" :class="{ active: tabIndex == 3 }" @click="changTab(3)">我的</view>
			</li>
		</ul>
	</view>
</template>

<script>
export default {
	props: {
		tabIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {
		changTab(val) {
			if (val == 0) {
				console.log(val)
				uni.redirectTo({
					url: '/pages/workstation/workstationIndex/workstationIndex'
				});
			} else if (val == 2) {
				// console.log(val)
				uni.redirectTo({
					url: '/pages/businessCenter/index'
				});
			} else if (val == 3) {
				console.log(3)
				// console.log(val)
				uni.redirectTo({
					url: '/pages/my/my?type=1'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.footers_box {
	background-color: white;
	display: flex;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100rpx;
	z-index: 9999;
	border-top: 1px solid rgba(151, 151, 151, 0.15);
	ul {
		display: flex;
		list-style: none;
		padding: 0;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		li {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			color: #9495ad;
			height: 100rpx;
			position: relative;
			.tabIcon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 16rpx;
			}
			.icon_box {
				flex: 1;
			}
			.tabIcon_more {
				width: 66rpx;
				height: 66rpx;
				margin-top: 0;
			}
			.active {
				color: #107eee;
			}
			.active:after {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 6rpx;
				height: 4rpx;
				background: rgba(16, 126, 238, 1);
			}
		}
	}
}
</style>
