<template>
	<view class="container">
		
		<view class="content">
			
			<view class="item" :class="[active == 0?'active':'']" 
			   @click="navTo(0,'/statistics/index/index?type=')">
				<image :src="active == 0 ?'/static/images/tabBar/index1_act.png':'/static/images/tabBar/index1.png'" 
				mode="aspectFit" class="icon-img"></image>
				<text class="title">首页</text>
			</view>
			
			<view class="item" :class="[active == 1?'active':'']" @click="navTo(1,'/saomaDiancan/index/index?type=')">
				<image :src="active == 1 ?'/static/images/tabBar/icon_20_on.png':'/static/images/tabBar/icon_20.png'" mode="aspectFit" class="icon-img"></image>
				<text class="title">门店管理</text>
			</view>

			<view class="item" :class="[active == 2?'active':'']" @click="navTo(2,'/saomaDiancan/my/my?type=')">
				<image :src="active == 2 ?'/static/images/tabBar/icon_21_on.png':'/static/images/tabBar/icon_21.png'"  class="icon-img"></image>
				<text class="title">个人中心</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			active: {
				type: Number,
				default: 0
			}, 
			// 扫码点餐2,无痕跳转2
			type: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {

			};
		},
		methods: {
			navTo(index, url) {
				console.log("index, url", this.active,index, url)
				if (index != this.active) {
					uni.redirectTo({
						url: url+this.type
					})
				}
			}
		}
	}
</script>

<style scoped>
	

	.container {
		width: 100%;
		height: 100rpx;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}

	.content {
		background-color: #fff;
		width: 100vw;
		height: 100rpx;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
		/* box-shadow: 0 20rpx 20rpx #f6f6f6 inset; */
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 900;
		box-sizing: content-box;
	}

	.content .item {
		flex: auto;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.content .icon-img {
		display: block;
		width: 48rpx;
		height: 48rpx;
	}



	.content .title {
		font-size: 24rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		color: #ABADC2;
	}

	.content .active .title {
		color: #3387FF;
	}
</style>
