<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>
			<div class="title moren" v-else>
					<span class="hand" @click="back">{{detailTitle[0]}} > </span>{{detailTitle[1]}}
			</div>
			<div class="jg"></div>
			<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.indexOf('detail') === -1
			},
			navHeight() {
				return this.navList.length*51 + 4 + 'px'
			},
			currentUrl() {
				return this.$route.path
			},
			rightTitle() {
				let title = ''
				switch(this.currentUrl) {
				     case '/join/contribution':
				        title = '我要捐款'
				        break;
				     case '/join/organDonation':
				         title = '我要捐献器官'
				        break;
					case '/join/Hpc':
					    title = '我要造血干细胞捐献'
					   break;
					case '/join/rescue':
					    title = '我要成为救护员'
					   break;
					case '/join/member':
						title = '我要成为会员'
						break
					case '/join/volunteer':
						title = '我要成为志愿者'
						break
					case '/join/train':
						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 '/newsCenter/redNews/list':
						title = '红会新闻'
						break
					case '/newsCenter/redNews/detail':
						title = '红会新闻,新闻详情'
						break
					case '/newsCenter/echeng/list':
						title = '鄂城区'
						break
					case '/newsCenter/echeng/detail':
						title = '鄂城区,新闻详情'
						break
					case '/newsCenter/huarong/list':
						title = '华容区'
						break
					case '/newsCenter/huarong/detail':
						title = '华容区,新闻详情'
						break
					case '/newsCenter/liangzihu/list':
						title = '梁子湖区'
						break
					case '/newsCenter/liangzihu/detail':
						title = '梁子湖区,新闻详情'
						break
					case '/newsCenter/laws/list':
						title = '政策法规'
						break
					case '/newsCenter/laws/detail':
						title = '政策法规,政策详情'
						break
					case '/about/redCrossMovement':
						title = '关于红十字会运动'
						break
					case '/about/chineseRedCross':
						title = '关于中国红十字会'
						break
					case '/about/ezhouRedCross':
						title = '鄂州红十字会简介'
						break
					case '/help/aid':
						title = '人道救助'
						break
					case '/help/service':
						title = '红十字志愿服务'
						break
					case '/help/juvenile':
						title = '红十字少年'
						break
				     default:
				        title = ''
				}
				return title
			},
			detailTitle() {
				let arr = this.rightTitle.split(',')
				console.log(arr,'++++++++++++++++++++++++++++++')
				return arr
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			navTo(path) {
				console.log(path)
				let currentUrl = this.$route.path
				if(currentUrl === path){
					return
				}else {
					this.$router.push(path)
				}
			},
			back() {
				let url = this.$route.path.replace('/detail','')
				this.$router.push(url)
			}
			// changeClik(index) {
			// 	this.currentIndex = index
			// 	this.$router.push('/donation/Hpc?id=' + index)
			// 	console.log(index)
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 1202px;
		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 {
			width: 265px;
			height: 4px;
			background: #BF3333;
		}
		.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: #fae9e9;
			
			.item-name {
				color: #C81B15;
			}
			.item-icon {
				color: #C81B15;
			}
		}
	}
	.right-content {
		width: 915px;
		min-height: 706px;
		border-top: 4px solid var(--m-color);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		
		.title {
			text-align: left;
			height: 50px;
			line-height: 50px;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			position: relative;
			top: -2px;
			color: #BF3333;
			padding-left: 23px;
			span {
				color: #999;
			}
		}
		.action {
			background: #FFFFFF;
			color: #D82020;
		}
	}
	.line {
		line-height: 1.5;
	}
	.jg {
		height: 1px;
		background-color: #f3f3f3;
	}
</style>
