<template>
	<div class="wrapper">
		<div class="left-nav" :style="{ height: navHeight }">
			<div class="nav-title">
				<div class="china">关于我们</div>
				<div class="English">About us</div>
			</div>
			<div class="nav-item" v-for="item in navList" :key="item.id" :class="{ action: currentUrl.indexOf(item.path) !== -1 }" @click="navTo(item.path)">
				<div class="item-name">
					<div class="yuan"></div>
					{{ item.name }}
				</div>
				<div class="item-icon"></div>
			</div>
			<div class="phone hand" @click="dialogVisible = true">
				<div class="phoneleft">
					<div class="img">
						<img src="../../assets/img/weixin.png" >
					</div>
					
				</div>
				<div class="phoneright">
					咨询在线客服
				</div>
			</div>
		</div>
		<div class="right-content">
			<div style="padding: 35px 50px 35px 50px;" class="line"><slot></slot></div>
		</div>
		<el-dialog :visible.sync="dialogVisible" title="客服企业微信" width="30%" :before-close="handleClose">
			<div class="imgBox">
				<img src="../../assets/img/tanchuang.jpg" >
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		navList: {
			type: Array,
			default: []
		}
	},
	computed: {
		navHeight() {
			return this.navList.length * 51 + 52 + 'px';
		},
		currentUrl() {
			return this.$route.path;
		}
	},
	data() {
		return {
			currentIndex: 0,
			dialogVisible: false
		};
	},
	methods: {
		navTo(path) {
			let currentUrl = this.$route.path;
			if (currentUrl === path) {
				return;
			} else {
				this.$router.push(path);
			}
		},
		changeClik(index) {
			this.currentIndex = index;
			this.$router.push('/donation/Hpc?id=' + index);
		},
		handleClose(done) {
			// this.$confirm('确认关闭？')
			// 	.then(_ => {
			// 		done();
			// 	})
			// 	.catch(_ => {});
			this.dialogVisible = false
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	margin-top: 20px;
	max-width: 1920px;
	min-width: 1080px;
	display: flex;
	justify-content: flex-start;
}
.left-nav {
	width: 200px;
	// height: 154px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	.nav-title {
		background-color: #0165b5;
		text-align: center;
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		letter-spacing: 3px;
		cursor: default;
		padding: 25px 0 50px 30px;
		text-align: left;
		.English {
			margin-top: 20px;
		}
	}
	.nav-item {
		cursor: pointer;
		margin-top: 5px;
		display: flex;
		align-items: center;
		height: 50px;
		background-color: #f2eeef;
		justify-content: space-between;
		line-height: 50px;
		padding: 0 37px 0 26px;
		.item-name {
			display: flex;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			letter-spacing: 1px;
			align-items: center;
			.yuan {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #98b6ce;
				margin-right: 10px;
			}
		}
		.item-icon {
			width: 10px;
			height: 10px;
			background: #0165b5;
		}
	}
	.action {
		background-color: #b2d0e9;
	}
}
.right-content {
	margin-left: 20px;
	width: 915px;
	min-height: 700px;
}
.line {
	line-height: 1.5;
	position: relative;
}
.phone {
	margin-top: 20px;
	text-align: center;
	width: 200px;
	background-color: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 30px 10px 20px;
	.phoneleft {
		display: flex;
		flex-direction: column;
		align-items: center;
		.img{
			width: 40px;
			height: 35px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.phonefont {
			margin-top: 10px;
			font-size: 10px;
		}
		
	}
}
.imgBox {
	margin: 0 auto;
	width: 60%;
	padding-top: 120%;
	position: relative;
	img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
</style>
