<template>
	<div class="container">
		<!-- 搜索框 -->
		<div class="search-input-box flexacenter">
			<div class="search-input flexacenter">
				<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
				<input class="search-input-input flex1" @keyup.enter="handleSearchResult()" placeholder="请输入搜索关键词"
					v-model="kw" maxlength="20" />
				<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
			</div>

			<div class="search-input-cancel" @click.stop="handCancel">取消</div>
		</div>

		<!-- 结果数量 -->
		<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
		<div class="result-box flexacenter" v-if="list.length != 0 || loading">
			<div class="result-item flexflex" v-for="(item, index) in list" :key="index" @click.stop="toDetail(item.tid)">
				<div class="result-header one-line">
					<div class="result-label">{{ item.forum }}</div>
					<div class="result-title" v-html="item.subject"></div>
				</div>

				<div class="result-content two-lines" v-html="item.message"></div>

				<div class="result-info flexacenter flex1">
					<div class="user-info flexacenter">
						<img class="icon-head" :src="item.avatar">
						<div class="user-name" v-html="item.author"></div>
					</div>
					<div class="item-data flexacenter">
						<div class="item-data-item flexacenter">
							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
							<div>{{ item.views }}</div>
						</div>
						<div class="item-data-item flexacenter">
							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
							<div>{{ item.replies }}</div>
						</div>
					</div>
				</div>

				<!-- 精华 -->
				<div class="rightTop" v-if="item.digest > 0">
					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
					<span>精华</span>
				</div>

			</div>
		</div>

		<div class="result-empty-box flexcenter shadow" v-else>
			<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
		</div>

		<div v-if="count > limit" class="paging flexcenter">
			<el-pagination small background layout="prev, pager, next" @current-change="currentChange()"
				:current-page.sync="page" :page-size="limit" :total="count">
			</el-pagination>
		</div>

	</div>
</template>

<script>
export default {
	name: "SearchResult",
	data() {
		return {
			kw: "",
			count: 0,
			limit: 4,
			nextpage: true,
			page: 1,
			list: [],
			searchResultState: false,
			loading: null,
		}
	},
	components: {

	},

	mounted() {
		let { kw, page } = this.$route.query
		this.kw = kw
		if (page) this.page = Number(page)
		this.getSearchResult()

	},

	watch: {
		searchResultState(val, oldval) {
			if (val) this.$startupUnderLoading(this)
			else this.$closeUnderLoading(this)
		},
	},

	methods: {
		// 处理点击取消的返回上一页
		handCancel() {
			if (this.$route.params.page > 1) this.$router.go(-1)
			else this.$router.push('/recommend')
		},

		// 处理搜索框回车
		handleSearchResult() {
			let kw = this.kw
			if (!kw) return
			this.page = 1

			this.$router.push({ path: `/searchResult`, query: { kw: this.kw, page: this.page } })

			// this.getSearchResult()
			// this.$updateURLSearchParams({ kw: this.kw, page: this.page })
		},

		// 获取搜索结果数据
		getSearchResult() {
			if (!this.kw) return

			if (this.searchResultState) return
			this.searchResultState = true
			let kw = this.kw
			this.$http.get("/api/search", {
				keyword: kw,
				page: this.page,
				limit: this.limit
			}).then(res => {

				if (res.code != 200) return
				let data = res.data

				this.list = data.data
				this.count = data.count
				this.limit = data.limit

				document.documentElement.scrollTop = 0;
				document.body.scrollTop = 0;
				// this.searchResultState = false
			}).finally(() => {
				this.$store.commit('setHistoricalSearch', this.kw)
				this.searchResultState = false
			})
		},

		// 点击改变页数
		currentChange() {

			this.$router.push({ path: `/searchResult`, query: { kw: this.kw, page: this.page } })
			// this.getSearchResult()

		},

		// 跳转详情
		toDetail(tid) {
			this.$router.push(`/detailIndex?tid=${tid}`)
		},

		// 点击清空 input 的值
		emptyKw() {
			this.kw = ""
		},

	},
}
</script>

<style lang="scss" scoped>
.container {
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;

	.search-input-box {
		margin-left: .32rem;

		.search-input {
			width: 8.2rem;
			height: .96rem;
			border-radius: 2.56rem;
			background: rgba(235, 235, 235, 1);

			.search-input-icon,
			.search-input-cross {
				width: .4rem;
				height: .4rem;
			}

			.search-input-icon {
				padding: 0 .4rem;
			}

			.search-input-cross {
				padding-right: .4rem;
			}

			.search-input-input {
				height: 100%;
				font-size: 0.40rem;
			}

		}

		.search-input-cancel {
			color: #000;
			font-size: .36rem;
			padding-left: .46rem;
			width: .74rem;
		}
	}

	.numberResults {
		font-size: .32rem;
		color: #555;
		// margin-top: .64rem;
		margin: .64rem .32rem .48rem;

		.number {
			color: #000;
			font-weight: 650;
			margin: 0 .1667rem;
		}
	}

	.result-box {
		justify-content: center;
		flex-direction: column;
		overflow: auto;

		.result-item {
			margin-bottom: .32rem;
			width: 9.36rem;
			height: 3.96rem;
			background-color: rgba(255, 255, 255, 1);
			border: none;
			border-radius: .32rem;
			-moz-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.0784313725490196);
			-webkit-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.08);
			box-shadow: 0 0 .16rem rgba(0, 0, 0, .08);
			padding: 0.4rem;
			box-sizing: border-box;
			flex-direction: column;
			position: relative;

			.result-header {
				margin-bottom: .32rem;

				.result-label {
					font-size: .28rem;
					height: .52rem;
					line-height: .52rem;
					background: rgb(51, 51, 51);
					color: #fff;
					display: inline-block;
					border-radius: .16rem;
					padding: 0 .12rem;
					margin-right: .12rem;
				}

				.result-title {
					color: #000;
					font-size: 0.37333rem;
					line-height: 0.65rem;
					display: inline;

					/deep/ em {
						color: #F95D5D;
					}
				}

			}

			.result-content {
				line-height: .52rem;
				font-size: .3rem;
				color: #7f7f7f;
				height: 1.04rem;
			}

			.reply-visible {
				font-size: .32rem;
				height: 1.04rem;
				background: rgba(242, 242, 242, 0.7);
			}

			.result-info {
				align-items: self-end;

				justify-content: space-between;

				.user-info {
					.icon-head {
						width: .64rem;
						height: .64rem;
						border-radius: 50%;
					}

					.user-name {
						font-size: .32rem;
						color: #333;
						margin-left: .2rem;
					}
				}

				.item-data {

					font-size: .28rem;

					.item-data-item {

						&:last-of-type {
							margin-left: .4rem;
						}

						.icon-look {
							width: .4267rem;
							height: .18rem;
							margin-right: .16rem;
						}

						.icon-msg {
							width: .32rem;
							height: .28rem;
							margin-right: .16rem;
						}
					}
				}
			}

		}
	}

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

	.result-empty-box {
		height: 70vh;
		width: 9.36rem;
		background: #fff;
		margin: 0 auto;
		border-radius: 0.32rem;

		.result-empty-icon {
			width: 2.04rem;
			height: 2.4rem;
		}
	}

}
</style>
