<template>
	<div class="about">
		<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.uid" :class="{'action': currentIndex == item.uid }" @click="navClick(item.uid)">
					<!-- :class="{'action': currentUrl.indexOf(item.path) !== -1 }"> -->
					<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 style="padding: 35px 50px 35px 50px;" class="line">
					<div class="new-detail">
						<div class="content" v-html="content"></div>
					</div>
				</div>
		
			</div>
		</div>
	</div>
</template>

<script>
import LeftNav from '../components/leftNav/LeftNav.vue';
import { details, getArtList } from '../request/api.js';
export default {
	components: {
		LeftNav
	},
	data() {
		return {
			content: '',
			currentIndex: '',
			rightTitle: '',
			navList: [],
		};
	},
	computed: {
		navHeight() {
			return this.navList.length * 51 + 52 + 'px'
		},
	},
	mounted() {
		this.getList()
	},
	methods:{
		compare(attribute) {
			return function(obj1, obj2) {				
				let val1 = obj1[attribute]
				var val2 = obj2[attribute]
				if (val1 > val2) {
					return 1;
				} else if (val1 < val2) {
					return -1;
				} else {
					return 0;
				}
			}
		},
		getList() {
			let that = this
			getArtList({ifyid: 26}).then(({data}) => {
				// console.log(data)
				let arr = data.list.reverse()
				arr.forEach(item => {
					let obj = {}
					obj.name = item.title
					obj.uid = item.id
					obj.ps = item.synopsis
					that.navList.push(obj)
					// console.log(that.navList,'55555')
				})
				that.navList = that.navList.sort(this.compare('ps'))
				this.navClick(that.navList[0].uid)
			}).catch( err => {
				console.log(err)
			})
		},
		navClick(id) {
			this.currentIndex = id
			details({},id).then(({data})=> {
				this.content = data.content
			})
		}
	}
};
</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>

