<template>
	<view class="tabBar">
		<view class="tab-ul-layout">
			<view v-for="(ite,ind) in list" :key="ind" @click="handlePush(ite,ind)" :class="ite.middleClass">
				<image :src="tabInd==ind?ite.selectedIconPath:ite.iconPath"></image>
				<text>{{ite.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabBar",
		props: {
			tabInd: {
				type: String,
				default: 0
			}
		},
		data() {
			return {
				list: [{
						"pagePath": "/pages/index/index",
						"iconPath": "../static/home3.png",
						"selectedIconPath": "../static/home1.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/phoneList/phoneList",
						"iconPath": "../static/e.png",
						"selectedIconPath": "../static/e.png",
						"text": "企业名录",
						"middleClass": 'tab-item-middle'
					},
					{
						"pagePath": "/pages/me/me",
						"iconPath": "../static/me.png",
						"selectedIconPath": "../static/me01.png",
						"text": "我的"
					}
				]
			};
		},
		// computed: {
		// 	getHeight() {
		// 		return Number(this.height)
		// 	}
		// },
		methods: {
			handlePush(ite, ind) {
				if (this.tabInd !== ind) {
					uni.switchTab({
						url: ite.pagePath
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabBar {
		width: 100%;
	}

	.tab-ul-layout {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 65px;
		flex-wrap: wrap;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 99999;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		view {
			text-align: center;
		}

		image {
			width: 22px;
			height: 22px;
		}

		text {
			width: 100%;
			text-align: center;
			display: inline-block;
		}

		.tab-item-middle {
			margin-top: -30px;

			image {
				width: 40px;
				height: 40px;
			}
		}
	}
</style>