<template>
	<view class="">
		<view class="tabBar" :style="platform == 'android' ? 'height: 102rpx;' : 'height: 132rpx;'">
			<image class="tabBar-imag" src="@/static/tabbar/db.png" mode=""></image>
			<view class="tabBar-cont">
				<view v-for="(item, index) in tabBarList" :key="index" class="tabBar-cont-item" @click="tabBarChange(item)">
					<template>
						<image v-if="item.type == 'type'" :src="item.icon"></image>
						<image v-else :src="item.selectIcon" mode="aspectFill"></image>
						<view v-if="item.type != 'type'" :class="item.type != 'type' ? 'tabBar-cont-item-title tabBar-cont-item-titleAct' : 'tabBar-cont-item-title'">
							{{ item.name }}
						</view>
						<view v-else :class="item.type != 'type' ? 'tabBar-cont-item-title tabBar-cont-item-titleAct' : 'tabBar-cont-item-title'">{{ item.name }}</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array
		}
	},
	data() {
		return {
			tabBarList: this.list
				? this.list
				: [
						{
							name: '首页', // name
							icon: '/static/tabbar/tb1.png', // 图标
							selectIcon: '/static/tabbar/td1.png', // 选中图标
							url: '/pages/home/index', // 页面路径
							type: 'home'
						},
						{
							name: '我的需求', // name
							icon: '/static/tabbar/tb2.png', // 图标
							selectIcon: '/static/tabbar/td2.png', // 选中图标
							url: '/pages/demand/index', // 页面路径
							type: 'type'
						},
						{
							name: '发布', // name
							icon: '/static/tabbar/fb.png', // 图标
							selectIcon: '/static/tabbar/fb.png', // 选中图标
							url: '/pages/release/index', // 页面路径
							type: 'type'
						},
						{
							name: '动态',
							icon: '/static/tabbar/tb3.png', // 图标
							selectIcon: '/static/tabbar/td3.png', // 选中图标
							url: '/pages/order/index',
							type: 'type'
						},
						{
							name: '我的',
							icon: '/static/tabbar/tb4.png', // 图标
							selectIcon: '/static/tabbar/td4.png', // 选中图标
							url: '/pages/my/index',
							type: 'type'
						}
				  ]
		};
	},

	created() {},
	onLoad() {},
	methods: {
		tabBarChange(path) {
			if (path.url) {
				this.$uniGo.reLaunch({
					url: path.url
				});
			}
			// this.$emit('tabBarChange', path.url, path.type);
		}
	}
};
</script>

<style lang="scss" scoped>
.tabBar {
	width: 100%;
	height: 102rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
	background-color: #ffffff;

	&-imag {
		width: 100%;
		height: 102rpx;
	}

	&-cont {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: transparent;
		position: absolute;
		top: 0;

		&-item {
			width: 33.3%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 56rpx;
				height: 56rpx;
				padding-bottom: 10rpx;
			}

			&-title {
				font-size: 20rpx;
				font-weight: bold;
				color: #6c6c6e;
			}

			&-titleAct {
				color: #005ebd;
			}
		}

		&-item:nth-child(3) {
			position: relative;
			top: -30rpx;
			border-radius: 60%;
			width: 200rpx;

			image {
				width: 104rpx;
				height: 104rpx;
				padding-bottom: 20rpx;
				padding-top: 0rpx;
			}
		}
	}
}
</style>
