<template>
	<div class="wrapper">
		<div class="left-nav" :style="{height: navHeight}">
			<div class="nav-title">善行共参与</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">
					{{item.name}}
				</div>
				<div class="item-icon">
					>
				</div>
			</div>
		</div>
		<div class="right-content">
			<div class="title moren" v-if="isShow">
				{{rightTitle}}
			</div>
			<template v-else>
				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 0}" @click="changeClik(0)">
					基础知识
				</div>
				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 1}" @click="changeClik(1)">
					如何报名
				</div>
			</template>
			<div style="padding: 35px 50px 35px 50px;" class="line">
				<slot></slot>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			navList: {
				type: Array,
				default:[]
			}
		},
		computed: {
			isShow() {
				return this.$route.path !== '/donation/Hpc'
			},
			navHeight() {
				return this.navList.length*51 + 52 + 'px'
			},
			currentUrl() {
				return this.$route.path
			},
			rightTitle() {
				let title = ''
				switch(this.currentUrl) {
				     case '/donation/contribution':
				        title = '我要捐款'
				        break;
				     case '/donation/organDonation':
				         title = '我要捐献器官'
				        break;
					case '/join/rescue':
					    title = '我要成为救护员'
					   break;
					case '/join/member':
						title = '我要成为会员'
						break
					case '/join/volunteer':
						title = '我要成为志愿者'
						break
					case '/join/train':
						title = '报名普及培训'
						break
					case '/about':
						title = '关于我们'
						break
					case '/concat':
						title = '联系我们'
						break
					case '/popularScience/list':
						title = '红会科普'
						break
					case '/popularScience/detail':
						title = '红会科普'
						break
					case '/news/list':
						title = '红会新闻'
						break
					case '/news/detail':
						title = '红会新闻'
						break
					case '/publicity/list':
						title = '信息公示'
						break
					case '/publicity/detail':
						title = '信息公示'
						break
					case '/regulations/detail':
						title = '政策法规'
						break
					case '/regulations/list':
						title = '政策法规'
						break
					case '/regulations':
						title = '政策法规'
						break
				     default:
				        title = ''
				}
				return title
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		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)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 1200px;
		display: flex;
		justify-content: space-between;
		
	}
	.left-nav {
		width: 265px;
		// height: 154px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		.nav-title {
			height: 52px;
			background-color: #d82020;
			line-height: 52px;
			text-align: center;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			letter-spacing:3px;
			cursor:default;
		}
		.nav-item {
			cursor:pointer;
			border-top: 1px #fcfbfb solid;
			display: flex;
			height: 50px;
			background-color: #f2eeef;
			justify-content: space-between;
			line-height: 50px;
			padding: 0 37px 0 26px;
			.item-name {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				letter-spacing:1px
			}
			.item-icon {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #999999;
			}
		}
		.action {
			background-color: #f7dfdf;
		}
	}
	.right-content {
		width: 915px;
		min-height: 706px;
		border-top: 2px solid #D82020;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		.title {
			border: 2px #d82020 solid;
			width: 156px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background: #D82020;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			position: relative;
			top: -2px;
		}
		.action {
			background: #FFFFFF;
			color: #D82020;
		}
	}
	.line {
		line-height: 1.5;
	}
</style>
