<template>
	<view class="weui-tabbar" :class="extClass">
		<view  @click="tabChange(index)" v-for="(item, index) in list" :key="index" class="weui-tabbar__item" :class="[{'weui-bar__item_on':index === current},{'flexd__icon':index===2}]">
			<view style="position: relative;display:inline-block;">
				<image :src="current === index ? item.selectedIconPath : item.iconPath" class="weui-tabbar__icon" v-if="index !== 2"></image>
				<image src="/static/tarbar/index31.png" v-else class="weui-tabbar__icon2"></image>
			</view>
			<view class="weui-tabbar__label">{{ item.text }}</view>
		</view>
	</view>
</template> 
<script>
export default {
	props: {
		list: {
			type: Array,
			default: function() {
				return []
			}
		}
	},
	data() {
		return {
			extClass: '',
			current: 0
		};
	},
	methods: {
		tabChange(index) {
			//为2的时候是扫一扫图标，不能选中，但是要触发它对应的事件
			if(index == 2) {
				this.$emit('tabChange',index)
				return;
			}
			if (index === this.current) {
				return;
			}
			this.current = index;
			this.$emit('tabChange',index)
		}
	}
};
</script>

<style lang="scss" scoped >
.weui-tabbar {
	display: flex;
	position: relative;
	z-index: 500;
	background-color: #ffffff;
	box-shadow: 0px 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
}
.flexd__icon{
 //    position: relative;
 //    top: -30rpx;
 //    left: 0;
 //    right: 0;
 //    text-align: center;
 //    margin: 0 auto;
	// background: url('../../static/tarbar/index31.png') center center no-repeat;
	// background-size: contain;
	// width: 54rpx !important;
	// height: 54rpx !important;
	.weui-tabbar__icon2{
		width:86rpx;height:86rpx;
		position: relative;
		top:-40rpx;
	}
	>.weui-tabbar__label{
		position: relative;
		bottom:36rpx;
	}
}
.weui-tabbar:before {
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 1px;
	// border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.1);
}
.weui-tabbar__item {
	display: block;
	flex: 1;
	padding: 8px 0 4px;
	padding-bottom: calc(8px + constant(safe-area-inset-bottom));
	padding-bottom: calc(8px + env(safe-area-inset-bottom));
	font-size: 0;
	color: rgba(0, 0, 0, 0.5);
	text-align: center;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.weui-tabbar__item:first-child {
	padding-left: constant(safe-area-inset-left);
	padding-left: env(safe-area-inset-left);
}
.weui-tabbar__item:last-child {
	padding-right: constant(safe-area-inset-right);
	padding-right: env(safe-area-inset-right);
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
	// color: rgba(225, 37, 27, 1);
	color: #1C8CE8;
}
.weui-tabbar__icon {
	display: inline-block;
	width: 46rpx;
	height: 46rpx;
	margin-bottom: 2px;
}
i.weui-tabbar__icon,
.weui-tabbar__icon > i {
	font-size: 24px;
	color: rgba(0, 0, 0, 0.5);
}
.weui-tabbar__icon image {
	width: 100%;
	height: 100%;
}
.weui-tabbar__label {
	color: #333;
	font-size: 10px;
	line-height: 1.4;
}
</style>
