<template>
	<div>
		<div class="allSections" v-if="!twofid">
			<div class="allSections-left">
				<span v-for="(item, index) in list" :class="{ 'active': index == allActive }" :key="index"
					@click="allClick(index, item.fid)">{{ item.name }}</span>
			</div>
			<div class="allSections-right">
				<div class="allSections-right-item" @click="pitchPlate(i.fid, i.name)"
					v-for="(i, k) in list[allActive].data" :key="k">
					<div class="item-content">
						<div class="item-title">{{ i.name }}</div>
						<div v-if="i.description" class="item-text" v-html="i.description.replace(/<[^>]+>/g, '')"></div>
					</div>
					<div class="item-star">
						<img v-if="!i.iscollection" src="~assets/img/allSections/nullStar.png" alt="空星"
							@click.stop="starClick(k, i.fid, 'forumFav')">
						<img v-else src="~assets/img/allSections/star.png" alt="实星"
							@click.stop="starClick(k, i.fid, 'unforumFav')">
					</div>
				</div>
			</div>

		</div>
		<div v-else style="margin:.64rem 0;">
			<div @click.stop="backAll()">
				<plate-navigation :stairname="plate.stairname" :subsectionsname="plate.subsectionsname"></plate-navigation>
			</div>

			<div style="margin:.4rem 0.35rem">
				<template v-if="invitationList.length != 0">
					<index-list :list="invitationList"></index-list>
				</template>
				<div class="result-empty-box flexcenter shadow" v-else>
					<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
				</div>

			</div>


			<div v-if="invitationList.length != 0" class="paging flexcenter">
				<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
					:current-page.sync="invitationPage" :page-size="invitationLimit" :total="invitationCount">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import plateNavigation from '@/components/PlateNavigation'
import indexList from '@/components/IndexList'

export default {
	name: "AllSections",
	data() {
		return {
			allActive: 0,
			// list: [{}],
			list: this.$store.state.allForumList,
			postCollectionState: false,  // 收藏的请求的状态
			onefid: 0, // 一级列表的板块id
			twofid: 0, // 是否有选中的板块id
			invitationList: [], // 选中板块帖子的列表
			invitationLimit: 10,
			invitationPage: 1, // 
			invitationCount: 1, // 
			plate: {
				stairname: "",// 一级版块名称
				subsectionsname: "",// 子版块名称
			},
			loading: null, // 加载状态

		}
	},

	mounted() {
		this.$store.subscribe((mutation, state) => {
			if (mutation.type == "setAllForumList") this.list = this.$store.state.allForumList
		});

		let { onefid, twofid, invitationPage } = this.$route.query
		if (onefid) this.onefid = onefid
		if (twofid) this.twofid = twofid
		if (invitationPage) this.invitationPage = Number(invitationPage)

		if (Number(onefid) > 0) this.a()


		if (Number(twofid) > 0) this.getInvitationList()

	},

	methods: {
		a() {
			if (this.list.length >= 2) {

				let list = this.list
				list.forEach((el, index) => {
					// console.log(this.twofid);

					if (el.fid == this.onefid) this.allActive = index

					if (this.twofid) {
						el.data.forEach((element, i) => {
							console.log(element, i);
							if (element.fid == this.twofid) {
								this.plate = {
									stairname: el.name,
									subsectionsname: element.name,
								}
							}
						})

					}

				})

				console.log(this.onefid, "onefidonefid");

			} else {
				setTimeout(() => {
					this.a()
				}, 500)
			}

		},
		// 点击返回选择一级列表页面
		backAll() {
			this.twofid = 0
		},

		allClick(index, fid) {
			this.allActive = index
			const params = new URLSearchParams(window.location.search);
			params.set('onefid', fid);
			const newUrl = window.location.pathname + '?' + params.toString();
			window.history.pushState({}, '', newUrl);
		},

		// 点击收藏
		starClick(k, fid, state) {
			if (this.postCollectionState) return
			let url = ""
			if (state == "forumFav") url = "/api/operation/forumFav"
			else url = "/api/operation/unforumFav"
			this.postCollectionState = true
			this.$http.post(url, {
				fid
			}).then(res => {
				if (res.code != 200) return

				let list = this.$store.state.allForumList
				list[this.allActive].data[k]['iscollection'] = state == "forumFav" ? 1 : 0

				this.$store.commit('setAllForumList', list)

				this.$Message.success(res.message)
				this.$forceUpdate()
			}).finally(() => {
				this.postCollectionState = false
			})
		},

		// 点击选中板块 并获取列表
		pitchPlate(fid, subsectionsname) {
			this.twofid = fid
			this.plate = {
				stairname: this.list[this.allActive].name,
				subsectionsname,
			}
			this.$router.push({ path: `/allSections`, query: { onefid: this.list[this.allActive].fid, twofid: this.twofid } })
		},

		// 获取帖子列表
		getInvitationList() {
			this.$startupUnderLoading(this)
			this.$http.post("/api/home/threadList", {
				page: this.invitationPage,
				limit: this.invitationLimit,
				fid: this.twofid
			}).then(res => {
				let data = res.data
				this.invitationList = data.data
				this.invitationCount = data.count
				this.invitationLimit = data.limit

				document.documentElement.scrollTop = 0;
				document.body.scrollTop = 0;
			}).finally(() => {
				this.$closeUnderLoading(this)
			})
		},

		// 点击页数
		currentChange() {
			this.$router.push({ path: `/allSections`, query: { onefid: this.list[this.allActive].fid, twofid: this.twofid, invitationPage: this.invitationPage } })
		},

	},

	components: {
		plateNavigation,
		indexList
	},

}
</script>

<style lang="scss" scoped>
.result-empty-box {
	height: 10.3333rem;
}

.allSections {
	display: flex;
	flex-direction: row;
	border-radius: 0.32rem;
	margin-top: 0.666667rem;
	filter: drop-shadow(0.05rem 0 0.09rem rgba(0, 0, 0, 0.1));
	margin: .64rem 0.35rem;

	height: calc(100vh - 3rem);
	overflow: auto;
}

.allSections-left {
	width: 35%;
	border-left: 0.013333rem solid #ddd;
	background-color: rgba(235, 235, 235, 0.556862745098039);
	// border-radius: 0.32rem 0 0 0.32rem;
	display: flex;
	flex-direction: column;
	text-align: center;

	overflow-y: auto;
	overflow-x: hidden;

	span {
		height: 1.28rem;
		line-height: 1.28rem;
		border-radius: 0.32rem;
		font-size: 0.32rem;
		// padding: 0 0 0 0.2rem;
		position: relative;

		&.active {
			background-color: #fff;
			font-weight: bolder;
			border-radius: 0.32rem 0 0 0.32rem;
			color: #000;
			width: 105%;
			margin-left: -0.133333rem;
			filter: drop-shadow(0 0 0.08rem rgba(0, 0, 0, 0.1));
		}

		&.active::before {
			content: "";
			width: 0.36rem;
			height: 101%;
			position: absolute;
			right: 0;
			top: -100%;
			box-shadow: 0.14rem 0.14rem #fff;
			border-radius: 0 0 0.32rem 0;
		}

		&.active::after {
			content: "";
			width: 0.36rem;
			height: 101%;
			position: absolute;
			right: 0;
			bottom: -100%;
			box-shadow: 0.14rem -0.14rem #fff;
			border-radius: 0 0.32rem 0 0;
		}

		&:first-child.active::before {
			display: none;
		}

		&:last-child.active::after {
			display: none;
		}
	}
}

.allSections-right {
	width: 65%;
	background-color: #fff;
	// border-radius: 0 0.32rem 0.32rem 0;
	display: flex;
	flex-direction: column;
	z-index: 1;
	padding-bottom: 0.4rem;
	overflow-x: hidden;
	overflow-y: auto;

	&.active {
		display: block;
	}

	.allSections-right-item {
		padding: 0.4rem 0;
		margin: 0 0.32rem 0 0.7rem;
		border-bottom: 0.013333rem solid #ddd;
		display: flex;
		justify-content: space-between;
		position: relative;

		.item-content {
			width: 80%;
		}

		.item-title {
			color: #000;
			font-size: 0.32rem;
		}

		.item-text {
			margin: 0.266667rem 0;
			color: #aaa;
			font-size: 0.28rem;
		}

		.item-star {
			display: flex;
			align-items: center;

			img {
				width: .48rem;
				height: .46rem;
			}
		}

		&::before {
			content: "";
			width: 0.12rem;
			height: 0.32rem;
			border-radius: 0.16rem;
			position: absolute;
			top: 0.48rem;
			left: -0.35rem;
			background-color: #62b1ff;
		}
	}
}


.paging {
	margin-top: .48rem;

	::v-deep {
		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background: rgba(98, 177, 255, 1);
			border-radius: 50%;
		}

		.el-pagination .btn-next .el-icon,
		.el-pagination .btn-prev .el-icon {
			font-size: .4rem;
		}
	}
}
</style>