<template>
	<div class="topic-square">
		<!-- 顶部导航 -->
		<header class="header">
			<div class="search-bar">
				<el-input placeholder="搜索话题" v-model="state.query.title" @input="init">
					<template #prefix>
						<el-icon><search /></el-icon>
					</template>
				</el-input>
			</div>
			<nav class="nav-tabs">
				<div class="tab active">话题总览</div>
			</nav>
		</header>

		<!-- 主体内容 -->
		<main class="main-content">
			<!-- 左侧动态列表 -->
			<div class="dynamic-list">
				<div v-for="topic in state.getList" :key="topic.id" class="topic-item" @click="to(topic.id)">
					<div class="content">
						<h3 class="title" style="color: #34cdfe">{{ topic.title }}</h3>
						<p class="text"><div v-html=" topic.content"></div></p>
						<div class="topic-tag">
							<el-tag type="info" size="small">来自话题 {{ topic.topic }}</el-tag>
						</div>
						<div class="interaction">
							<span class="stats"> 我要回应 </span>
							<div class="actions">
								<el-button type="text">
									 {{topic.view}} 预览
								</el-button>

							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 右侧热门话题 -->
			<div class="trending-topics">
				<div class="section-title">话题榜单</div>
				<div v-for="(topic, index) in state.trendingTopics" :key="topic.id" class="trend-item"  @click="to(topic.id)">
					<div class="rank">{{ index + 1 }}</div>
					<div class="info">
						<div class="title">{{ topic.title }}</div>
						<div class="views">{{ topic.view }}次浏览</div>
					</div>
				</div>
			</div>
		</main>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { ElLoading } from 'element-plus'
const loading = ElLoading.service({
	lock: true,
	text: 'Loading',
	background: 'rgba(0, 0, 0, 0.7)',
})
const state = reactive({
	getList:[],
	trendingTopics:[],
	query:{
		total: 0, // 总记录数
		page: 1, // 当前页码
		limit: 9999, // 每页显示的记录数
		title:"",
		type:"0",
	}
})

function init() {
	frontRequest.get("/api/topic/page",{
		params: state.query
	}).then(res =>{
			state.getList = res.data.list
			loading.close()
	})
}

/**
 * 跳转
 */
const to = (id:number) => {
	router.push(`/topicInfo/${id}`)
}


onMounted(()=>{
	init()
	let query = state.query
	query.view='view'
	frontRequest.get("/api/topic/page",{
		params: query
	}).then(res =>{
		state.trendingTopics = res.data.list
	})
})
// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
</script>

<style scoped>
.topic-square {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.header {
	margin-bottom: 30px;
}

.nav-tabs {
	display: flex;
	margin-top: 20px;
	border-bottom: 1px solid #eee;

	.tab {
		padding: 12px 20px;
		cursor: pointer;

		&.active {
			border-bottom: 2px solid #07a;
			color: #07a;
		}
	}
}

.main-content {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 30px;
}

.dynamic-list {
	.topic-item {
		padding: 20px;
		margin-bottom: 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		cursor: pointer;
		.topic-tag {
			margin: 15px 0;
			.el-tag {
				margin-right: 8px;
			}
		}
		.interaction {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #666;
			font-size: 0.9em;

			.stats {
				flex: 1;
			}
		}
	}
}

.trending-topics {
	cursor: pointer;
	.section-title {
		font-weight: 500;
		margin-bottom: 15px;

	}

	.trend-item {
		display: flex;
		align-items: center;
		padding: 12px;
		margin-bottom: 10px;
		background: #f8f9fa;
		border-radius: 4px;

		.rank {
			width: 24px;
			height: 24px;
			background: #07a;
			color: white;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
		}

		.info {
			flex: 1;

			.views {
				color: #666;
				font-size: 0.9em;
			}
		}
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
