<template>
<div class="news-table">

<div class="news-details-block">
	<news-table-details :newId="newId" />
</div>

<div class="news-scroll-block">
	<span class="titel-block">新闻列表</span>
	<ul class="infinite-list" style="overflow:auto; height: auto; width: 94%;">
		<li v-for="(item,index) in list" :key="item.noticeId" class="infinite-list-item item-block" ref="noticeRef">
			<span class="news-item-span1"></span>
      <span class="news-info-span" @click="toNewDestail(item.noticeId, index)">{{item.noticeTitle}}</span>
		</li>
	</ul>
	<p
		v-loading="loading"
    element-loading-spinner="el-icon-loading"
		class="more-bottom"
		v-if="noMore === false && list.length < total" @click="moreNews">查看更多</p>
  <p style="margin: 10px auto;
    font-size: 12px;
    color: rgb(174, 174, 174);
    height: 15px;"
		v-else>已加载全部~</p>

</div>


</div>
</template>
<script>
import { listNotice } from "@/api/system/notice"
import NewsTableDetails from './newTD'
export default {
	name: 'NewsTable',
	components: {
		NewsTableDetails
	},
	data() {
		return {
			newId: null,
		  list: [],
			count: 0,
			loading: false,
			params: {
				pageNum: 1,
				pageSize: 10
			},
			resList: [],
			noMore: false,
      classIndex: 0,
      total: 0
		}
	},
	created() {
		this.init()
	},
	methods: {
		moreNews() {
			this.params.pageNum += 1
			this.loading = true
			this.getList()
		},
		init() {
			let noticeId = this.$router.currentRoute.query.newId // 列表页文章id
			this.getList()
		},
		toNewDestail(id, index) {
			this.newId = id
			this.classIndex = index
		},
		getList() {
			var _this = this
			var noticeId = this.$router.currentRoute.query.newId
			listNotice(this.params).then(response => {
				this.loading = false
				if (response.code === 200 && response.rows) {
          this.total = response.total;
					if (response.rows.length > 0) {
						_this.resList = response.rows
						_this.list = _this.list.concat(response.rows)
						if (noticeId) {
							this.newId = noticeId
							setTimeout(() => {
								for(let v in _this.list) {
									if (_this.list[v].noticeId === Number(noticeId)) {
										_this.classIndex = v
										break;
									}
								}
							}, 100)
						} else {
							this.newId = this.list[0].noticeId
							setTimeout(() => {
								this.classIndex = '0'
							}, 100)
						}
					} else {
						this.noMore = true
					}

				}
			}).catch(err => {
				console.log(err)
			})
		}
	},
	watch: {
		classIndex(val, old) {
			if (old || old === 0) {
				this.$refs.noticeRef[old].className = "infinite-list-item item-block"
				this.$refs.noticeRef[val].className = "infinite-list-item item-block reader-info-span"
			}
		},
		$route: {
			handler() {
				let noticeId = this.$route.query.newId;
				if (noticeId || noticeId === 0) {
					this.newId = noticeId
					for(let v in this.list) {
						if (this.list[v].noticeId === Number(noticeId)) {
							this.classIndex = v
							break;
						}
					}
				}
		},
		deep: true,
    }
	}
}
</script>
<style lang="scss">
.news-table {
	padding: 20px;
	display: flex;
	background: #f3f5f7;
  padding: 20px;
  display: -webkit-box;
  display: flex;
  background: #f3f5f7;
  // height: calc(100vh - 85px);
  // overflow: auto;
	.news-details-block {
		width: calc(100% - 340px);
		box-shadow: 0px 0px 2px -1px;
		background-color: #fff;
	}
	.news-scroll-block {
		width: 320px;
		display: flex;
		justify-content: flex-start;
		font-size: 14px;
		color: #777;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		cursor: default;
		border-radius: 3px;
		box-shadow: 0px 0px 3px -1px;
		margin-left: 20px;
		flex-wrap: wrap;
		// max-height: calc(100vh - 130px);
		height: 100%;
		background-color: #fff;
		.more-bottom {
			margin: 10px auto;
			font-size: 12px;
			color: rgb(174, 174, 174);
			height: 15px;
		}
		.more-bottom:hover {
			color: #174cfe;
		}
		.titel-block {
			display: block;
			width: 100%;
			background: #fac9362b;
			font-size: 18px;
			padding-left: 20px;
			line-height: 2.5;
			height: 45px;
			box-shadow: 1px 0px 3px 0px;
		}
		.infinite-list {
			padding-left: 25px;
			margin-bottom: 5px;
			margin-top: 10px;
		}
		.item-block {
			line-height: 1.5;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1px dashed;
			margin-bottom: 5px;
		}
		.news-item-span1 {
			display: block;
			width: 7px;
			height: 7px;
			background-color: #6f6b6b;
			margin-right: 10px;
			border-radius: 50%;
		}
		.news-info-span {
			font-size: 13px;
			line-height: 24px;
			color: #777777;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			cursor: default;
		}
		.news-info-span:hover {
			color: #174cfe;
		}

	}
	.reader-info-span {
		background: #fff;
		color: red;
	}
}

</style>
