<template>
	<div>
		<div class="allSections" v-if="isPlateListState">
			<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] && 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;">
			<plate-navigation @click.native="flybackAll()" :stairname="plate.stairname"
				:subsectionsname="plate.subsectionsname" :fid="plate.fid"></plate-navigation>

			<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-bo 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: null,
			// list: [{}],
			list: this.$store.state.allForumList,
			postCollectionState: false,  // 收藏的请求的状态
			invitationList: [], // 选中板块帖子的列表
			invitationLimit: 10,
			invitationPage: 1, // 
			invitationCount: 1, // 
			plate: {
				stairname: "",// 一级版块名称
				subsectionsname: "",// 子版块名称
				fid: 0,
			},
			loading: null, // 加载状态

			isPlateListState: true, //  是否是板块列表状态

			favoriteList: [], // 收藏数据id

		}
	},

	watch: {
		"$store.state.allForumList": {
			handler(newV, oldV) {
				if (!Array.isArray(newV)) return
				this.list = newV
				if (newV && this.favoriteList.length > 0) this.handleAllCollectList()
			},
			immediate: true
		},
		"$store.state.favoriteList": {
			handler(newV, oldV) {
				this.favoriteList = newV
				if (newV && newV.length > 0 && this.list.length > 0) this.handleAllCollectList()
			},
			immediate: true
		}
	},

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

		let { invitationPage, fid } = this.$route.query
		if (fid) this.fid = fid

		if (invitationPage) this.invitationPage = Number(invitationPage)

		if (Number(fid) > 0) this.handQuery()
		else this.allActive = 0

	},

	methods: {
		// 处理收藏板块和使用板块的数据交互
		handleAllCollectList() {
			let favoriteList = this.favoriteList
			this.list.forEach(element => {
				element.data.forEach(el => {
					if (favoriteList.includes(el.fid)) el['iscollection'] = 1
					else el['iscollection'] = 0
				})
			})
			this.$forceUpdate()
		},

		// 处理 query 的参数
		handQuery() {
			if (this.list.length >= 2) {
				let list = this.list
				list.forEach((el, index) => {
					if (el.fid == this.fid) this.allActive = index
					el.data && el.data.forEach((element, i) => {
						if (element.fid == this.fid) {
							this.allActive = index
							this.plate = {
								stairname: el.name,
								subsectionsname: element.name,
								fid: el.fid,
							}
							this.getInvitationList()
							this.isPlateListState = false
						}
					})
				})

				if (!this.allActive) this.allActive = 0

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

		},

		allClick(index, fid) {
			this.allActive = index
			this.$updateURLSearchParams({ fid })
		},

		// 点击收藏
		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
				this.$store.commit('setHomeRequestState', false)
				this.$store.dispatch('getUserInfo', this)
			})
		},

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

		// 获取帖子列表
		getInvitationList() {
			this.$startupUnderLoading(this)
			this.$http.get("/api/home/threadList", {
				page: this.invitationPage,
				limit: this.invitationLimit,
				fid: this.fid
			}).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: { fid: this.fid, invitationPage: this.invitationPage } })
		},

		// 点击回归板块列表
		flybackAll() {
			this.isPlateListState = true
		},

	},

	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);

	position: relative;

	&::after {
		content: "";
		top: 0;
		left: .17rem;
		width: 3.4rem;
		// width: 100%;
		height: 100%;
		border-radius: 0.32rem 0 0 0.32rem;
		// background: #62b1ff;
		border-left: 0.013333rem solid #ddd;
		background-color: rgba(235, 235, 235, 0.556862745098039);
		position: absolute;
		z-index: -1;
	}
}

.allSections-left {
	width: 3.57rem;
	border-radius: 0.32rem 0 0 0.32rem;
	display: flex;
	flex-direction: column;
	text-align: center;

	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
	-webkit-overflow-scrolling: touch;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;



	&::-webkit-scrollbar {
		display: none;
	}


	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: 101%;
			// 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 {
	flex: 1;
	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;
			word-wrap: break-word;
		}

		.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>