<template>
	<view class="container">
		<view class="tabber">
			<view :class="{ tab: true, isActive: tab.code == selected }" v-for="(tab, index) in tabbers" :key="index" @click="changeTab(tab)">
				<u--image :src="tab.icon" width="42px" height="42px" v-if="tab.type == 'middle'"></u--image>
				<u--image :src="selected == tab.code ? tab.selectIcon : tab.icon" width="24px" height="24px" v-else></u--image>
				<view class="name">
					{{ tab.name }}
				</view>
			</view>
		</view>
		<view class="fit-content"></view>
	</view>
</template>

<script>
export default {
	props: {
		selected: Number
	},
	data() {
		return {
			tabbers: [
				{
					name: '首页',
					path: '/pages/index',
					icon: '/static/images/tabbers/home.png',
					selectIcon: '/static/images/tabbers/home-select.png',
					code: 0
				},
				{
					name: '任务',
					path: '/pages/task',
					icon: '/static/images/tabbers/task.png',
					selectIcon: '/static/images/tabbers/task-select.png',
					code: 1
				},
				{
					name: '',
					path: '/pages/chat',
					icon: '/static/images/tabbers/chat.png',
					type: 'middle',
					code: 2
				},
				{
					name: '企业',
					path: '/pages/enterprise',
					icon: '/static/images/tabbers/position.png',
					selectIcon: '/static/images/tabbers/position-select.png',
					code: 3
				},
				{
					name: '我的',
					path: '/pages/owner',
					icon: '/static/images/tabbers/user.png',
					selectIcon: '/static/images/tabbers/user-select.png',
					code: 4
				}
			]
		}
	},
	methods: {
		changeTab(tab) {
			uni.switchTab({
				url: tab.path,
				success: () => {
					this.isActive = tab.code
				}
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	background-color: #fff;
	box-shadow: 0 -1px 2px 1px $cs-shadow-color;
	.fit-content {
		height: 20px;
	}
	.tabber {
		height: 60px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
		.tab {
			transition: 0.2s all;
		}
		.isActive {
			color: #22c55e;
		}
	}
}
</style>
