<template>
	<div class="contact">
		<div class="navlist" v-show="navList" v-if="isShownav">
			<div class="nav" v-for="(n,index) in navList.list" :class="{navC: index ==  navChoose}" @click="navC(index,n)">
				<div class="title" :title="n.title">
					{{ n.title }}
				</div>
				<div class="">
					>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="head nawarp" v-if="isShowHeader">
				当前位置：
				<div @click="urlTo('index')">首页</div> 
				> <div @click="listBack">
				{{ navList.title }}
				> {{ navList.list[navChoose].title }}</div>
				<span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
			</div>
			<div class="head" v-else>
				当前位置：<div @click="urlTo('index')">首页</div> 
				> <div @click="listBack">{{ navList.title }}</div>
				<span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
			</div>
			<slot v-if="navChoose == 0 && !isShowSon"></slot>
			<div class="contentbox">
				<div class="content">
					<div class="load" v-show="loadingType == 'loadmore'">
						----- 加载中 -----
					</div>
					<div v-html="content" v-show="isShowSon">
						
					</div>
					
					<div class="contentList chooseitem" v-show="!isShowSon">
						<div class="item" v-for="c in contentList" @click="listChoose(c)">
							<div class="title nawarp">
								{{ c.title }}
							</div>
							<div class="time">
								 {{ getTime(c.releasetime) }}
							</div>
						</div>
						
						<div class="pagec" v-if="sum != 0">
							<div class="fristPage" @click="page = 1">
								第一页
							</div>
							<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
							:class="{isChoose:count == page}">
								{{ count }}
							</div>
							<div class="nextPage" @click='nextPage'>
								下一页
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
		</div>
	</div>
</template>

<script>

import { details,getArticList } from '@/request/api.js'
	export default {
		props: ['navList'],
		data() {
			return {
				page: 1,
				limit: 10,
				sum: 0,
				path: this.$route.path,
				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
				timeOut: '',// 不断获取初始显示数据直至显示
				content: '', // 文章
				contentList: [], // 二级列表
				contentId: this.$route.params.contentId || this.$route.query.contentId || 0,
				isShowSon: true,
				pageId: 0,
				loadingType: 'loadmore',
			}
		},
		mounted() {
			if(this.isShowContent) {
				this.init()
			}
		},
		methods: {
			// 初始化
			init() {
				this.navC(this.navChoose,this.navList.list[this.navChoose])
			},
			navC(index,data) {
				this.loadingType = 'loadmore'
				this.page = 1
				this.isShowSon = true
				this.content = ''
				this.contentList = []
				this.pageId = data.id
				this.getlistslist()
				this.navChoose = index
				this.$emit('navListC',index)
			},
			listChoose(data) {
				this.loadingType = 'loadmore'
				this.isShowSon = true
				this.contentId = data.id
				this.getData()
			},
			getData() {
				details({},this.contentId).then(({data}) => {
					if (data.url == '') {
						this.content = data.content
						this.contentId = 0
					} else{
						this.originalText(data.url)
						this.contentId = 0
						this.isShowSon = false
					}
					this.loadingType = 'nomore'
				})
			},
			getlistslist() {
				getArticList({},this.pageId,this.page,this.limit).then(res => {
					this.sum = res.data.count
					if(res.data.count > 0) {
						if(res.data.count == 1 ) {
							this.isShowSon = true
							this.contentId = res.data.list[0].id
							this.getData()
						}else if(this.contentId != 0) {
							this.isShowSon = true
							this.getData()
						}else if(res.data.count > 1) {
							this.isShowSon = false
							this.loadingType = 'nomore'
						}
						this.contentList = res.data.list
						
						
					}else {
						this.loadingType = 'nomore'
					}
				})
			},
			pageChoose(page) {
				this.page = page
			},
			listBack() {
				this.loadingType = 'nomore'
				this.content = ''
				this.isShowSon = false
			},
			
			// 下一页
			nextPage() {
				this.page++ 
				if (this.page > this.totalPage) {
					this.page = this.totalPage
				}
			},
			// 跳转页面
			urlTo(name,navChoose) {
				this.$router.push({
					name: name
				})
			},
			getTime(time) {
				return time.substring(0,10)
			},
			// 查看原文
			originalText(url) {
				window.open(url)
			}
		},
		computed: {
			// 总页数
			totalPage() {
				return Math.ceil(this.sum/this.limit)
			},
			isShownav() {
				return !(!this.navList.list)
			},
			isShowHeader() {
				if(this.isShownav) {
					if (this.navList.list.length > 1) {
						return true
					} else{
						return false
					}
				}
			},
			isShowContent() {
				if (!this.navList.list) {
					return false
				} else{
					return this.navList.list.length > 0
				}
			},
		},
		watch: {
			isShowContent() {
				if(this.isShowContent) {
					this.init()
				}
			},
			page() {
				this.getlistslist()
			}
		},
	}
</script>

<style lang="scss" scoped>
$red: #D82020;
	.contact {
		display: flex;
		height: 100%;
		.navlist,.right {
			box-shadow: 1px 1px 6px #e1e1e1;
			height: 100%;
		}
		.navlist {
			flex: 2;
			margin-right: 20px;
			.title {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
		}
		.nav {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 10px 20px;
		}
		.navC {
			background-color: #F7DFDF;
			color: $red;
		}
		.right {
			flex: 7;
			.head, {
				padding: 10px 20px;
			}
			.contentbox {
				overflow: hidden;
				height: 800px;
				
			}
			.content::-webkit-scrollbar {
				display: none;
				position: relative;
			}
			.content {
					position: relative;
				height: 800px;
				overflow: auto;
				padding: 0 10px;
				background-color: #fff;
				.original {
					position: absolute;
					color: $red;
					top: 10px;
					left: 20px;
				}
			}
			.head {
				background-color: #F2F2F2;
				display: flex;
			}
		}
	}
	// 加载中
	.load {
		text-align: center;
		margin: 20px 0;
	}
	.contentList {
		.item {
			text-overflow:ellipsis;
			line-height: 40px;
			height: 40px;
			display: flex;
			justify-content: space-between;
			color: #3e3e3e;
			border-bottom: solid 1px #F2F2F2;
				overflow: hidden;
			.title {
				width: calc(100% - 120px);
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
			.time {
				min-width: 100px;
			}
		}
	}
	.chooseitem  {
		color: #999999;		
	}
	.chooseitem :hover {
		color: #d8272a;		
	}
	.pagec {
		color: #333333;
		display: flex;
		float: right;
		margin: 20px 30px;
		.fristPage,.pageNum,.nextPage {
			margin-left: 3px;
			border: solid 1px #F2F2F2;
			line-height: 30px;
			text-align: center;
			color: #333;
		}
		.fristPage,.nextPage {
			padding: 0 10px;
		}
		.pageNum {
			width: 30px;
			height: 30px;
		}
		.isChoose {
			background-color: $red;
			color: #fff;
		}
	}
	.pagec :hover {
		color: $red;
	}
</style>
