<template>
	<view class="navBar" :style="{'padding-bottom':isPadding?'20px':''}">
		<view v-for="(item,index) in navList" @click="go(item.url)">
			<view><image :src="imgfixUrls +item.img" /></view>
			<span :class="tabBarAct==index?'check':'nCheck'">{{item.label}}</span>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
export default {
	props:{
		tabBarAct: {
			type: Number,
			default: function() {
				return 0
			}
		},
	},
	data(){
		return {
			isPadding:null,
			href:'',
			navList:[
				{
					label:'首页',
					img:'merchant/nav1.png',
					url:'pages/subPages/merchant/merchantHome/merchantHome'
				},
				{
					label:'商品',
					img:'merchant/nav2.png',
					url:'pages/subPages/merchant/merchantOrder/merchantOrder'
				},
				{
					label:'消息',
					img:'merchant/nav3.png',
					url:'pages/subPages/merchant/merchantMsg/merchantMsg'
				},
				{
					label:'订单',
					img:'merchant/nav4.png',
					url:'pages/subPages/merchant/merchantOrderList/merchantOrderList'
				},
				{
					label:'我的',
					img:'merchant/nav5.png',
					url:'pages/subPages/merchant/merchantUerCenter/merchantUerCenter'
				},
			],
			img:''
		};
	},
	mounted() {
		let _this=this
		this.img = this.imgfixUrl;
		uni.getSystemInfo({
			success(res) {
				let model = res.model,
					iphoneModel = ["iPhone10,3", "iPhone10,6", "iPhone11,8", "iPhone11,2", "iPhone11,6"];
				_this.isPadding = iphoneModel.includes(model) || model.indexOf("iPhone X") !== -1 || model.indexOf("iPhone12") !== -1;
			}
		});
	},
	methods: {
		go(url){
			let _this=this
			App.navigationTo({
				url:url,
				navType:'rediRect'
			})
		}
	},
	computed: {
		
	}
};
</script>

<style lang="less">
	.check{
		display: inline-block;
		font-size:20upx;
		color:rgba(44,111,255,1) !important;
	}
	.nCheck{
		display: inline-block;
		font-size: 20upx;
		
		
		color: rgba(51, 51, 51, 1) !important;
	}
page {
	font-size: 0;
}

.navBar {
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	width: 750upx;
	height: 98upx;
	background: rgba(255, 255, 255, 1);
	border: 1upx solid rgba(238, 238, 238, 1);
	display: flex;
	> view {
		width: 20%;
		text-align: center;
		display: inline-block;
		vertical-align: top;
		> view {
			padding-top: 10upx;
			margin: auto;
			width: 50upx;
			height: 50upx;
			> image {
				width: 50upx;
				height: 50upx;
			}
		}
		> span {
			
		}
	}
}
</style>
