<template>
	<div class="top-bar">
		<div class="logobox">
			<div class="img"><img src="../../assets/img/logo.png" /></div>
			<div class="logofont">
				<div class="font">添利节能科技</div>
				<div class="eng">TIANLIJIENENGKEJI</div>
			</div>
		</div>
		<div class="barbox">
			<div class="bar-item" v-for="(item, index) in navList" :key="index" @click="navClick(item.path, index)" :class="{ action: currentUrl.indexOf(item.path) != -1 }">
				<div>{{ item.title }}</div>
				<div class="xian" v-if="currentUrl.indexOf(item.path) != -1"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			navList: [
				{
					path: '/home',
					title: '首页'
				},
				{
					path: '/about',
					title: '关于我们'
				},
				{
					path: '/product',
					title: '案例展示'
				},
				{
					path: '/news',
					title: '新闻动态'
				},
				{
					path: '/test',
					title: '节水测试'
				},
				{
					path: '/concat',
					title: '物联网登录'
				}
			],
			currentIndex: 0
		};
	},
	computed: {
		currentUrl() {
			return this.$route.path;
		}
	},
	methods: {
		navClick(url, index) {
			console.log(index,"123456")
			
			if (index === 5) {
				this.$router.push('/about');
				window.location.href = 'https://www.tianlicn.cn/iot/#/user/login';
				return
			}else {
				if (this.currentUrl === url) {
				 	return;
				 }else {
					let currentUrl = this.$route.path;
				
					console.log("123")
				
					this.currentIndex = index;
				
					this.$router.push(url);
				}
			}
			 
		}
	}
};
</script>

<style lang="scss" scoped>
.top-bar {
	max-width: 1200px;
	min-width: 1080px;
	margin: 0 auto;
	margin: 0 auto;
	padding: 15px 0;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	font-size: 18px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
	letter-spacing: 3px;
	align-items: center;
	.img {
		width: 50px;
		height: auto;
		img {
			width: 100%;
			height: auto;
		}
	}
	.barbox {
		display: flex;
		.bar-item {
			margin-left: 30px;
			flex-grow: 1;
			align-items: center;
			font-family: PingFang SC;
			font-size: 18px;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.xian {
			width: 110%;
			background: #0165b5;
			height: 3px;
			margin-top: 10px;
		}
	}
	.action {
		// background-color: #0165B5;
		color: #0165b5;
	}
}
.logobox {
	display: flex;
	align-items: center;
	.logofont {
		margin-left: 10px;
		.font {
			font-size: 24px;
			font-weight: bold;
		}
		.eng {
			font-size: 10px;
			margin-top: 5px;
		}
	}
}
</style>
