<template>
	<div class="main-container">
		<!-- 主内容区 -->
		<div class="content-wrapper">
			<!-- 左侧内容 -->
			<div class="main-content">
				<h2 class="section-title">人气创作 / 为你推荐</h2>

				<!-- 推荐内容列表 -->
				<div class="recommend-list">
					<article
						v-for="(post, index) in state.getList"
						:key="index"
						class="post-card"
					>
						<!-- 小组信息 -->
						<div class="group-info">
							<el-tag
								:type="post.groupType === 'default' ? '' : 'warning'"
								size="small"
							>
								{{ post.nickName }}
							</el-tag>
							<span class="post-time">{{ post.createTime }}</span>
						</div>
						<!-- 内容主体 -->
						<div class="post-content">
							<p class="post-excerpt">
								{{ post.title }}
								<a
									v-if="post.title"
									class="expand-link"
									@click="toggleExpand(index)"
								>
									{{ expandedIndexes.includes(index) ? '收起' : '查看全文' }}
								</a>
							</p>
							<transition name="el-fade-in">
								<p
									v-show="expandedIndexes.includes(index)"
									class="post-fulltext"
								>
									<div v-html="post.content "></div>
								</p>
							</transition>
						</div>
						<!-- 互动数据 -->
						<div class="interaction-data" 	@click="to(post.id)">
							<div class="stats">
								<span class="stat-item">
                  <el-icon><comment /></el-icon>
                  {{ post.replies }} 回复
                </span>
							</div>

						</div>
					</article>
				</div>
			</div>

			<!-- 右侧边栏 -->
			<div class="sidebar">
				<div class="trending-topics">
					<h3 class="sidebar-title">热门话题 ······</h3>

					<el-button  class="more-btn" @click="state.dialogVisible = true">添加文创</el-button>

					<div class="topic-list">
						<div
							v-for="(topic, index) in state.trendingTopics"
							:key="index"
							class="topic-item"
						>
							<div class="topic-meta">
								<span class="topic-index">{{ index + 1 }}</span>
								<span class="topic-name">{{ topic.title }}</span>
							</div>
							<div class="topic-stats">


								<span class="stat-number">{{ topic.view }}次浏览</span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<el-dialog v-model="state.dialogVisible" title="新增" width="50%">
		<el-form
			:model="state.formData"
			ref="formRef"
			label-width="100px"
		>

			<!--				表单开始===============================================================================================================================-->
			<el-form-item label="文创名称" prop="title" :rules="[{ required: true, message: '请输入文创名称', trigger: 'blur' }]">
				<el-input v-model="state.formData.title"/>
			</el-form-item>

			<el-form-item label="内容" prop="content" :rules="[{ required: true, message: '请编写内容', trigger: 'blur' }]">
				<e-editor  :content="state.formData.content" @update:content="handleImageUrl" />
			</el-form-item>
			<!--表单结束===============================================================================================================================-->
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="state.dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="saveTransaction(formRef)">保存</el-button>
		</div>
	</el-dialog>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElTag, ElButton, ElIcon, type FormInstance } from 'element-plus'
import { Comment } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const formRef = ref<FormInstance>()
// 推荐帖子数据
const state = reactive({
	route:"api/topic",
	dialogVisible:false,
	query: {
		total: 0, // 总记录数
		page: 1, // 当前页码
		limit: 9999, // 每页显示的记录数
		title: '',
		type: '1'
	},
	getList: [],
	trendingTopics:[],
	formData:{},
})
/**
 * 跳转
 */
const to = (id:number) => {
	router.push(`/topicInfo/${id}`)
}
// 接收子组件传递的路径
function handleImageUrl(content: string) {
	state.formData.content = content
}
function init() {
	frontRequest.get('/api/topic/page', {
		params: state.query
	}).then(res => {
		state.getList = res.data.list
		loading.close()
	})
}

onMounted(() => {
	if (!userStore().frontIsLogin){
		toast.warning("登录失效")
		router.push("/login")
	}
	init()
	let query = state.query
	query.view='view'
	frontRequest.get("/api/topic/page",{
		params: query
	}).then(res =>{
		state.trendingTopics = res.data.list
	})
})

const saveTransaction = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			state.formData.type = 1
			// 新增交易记录
			frontRequest.post(`${state.route}`, state.formData).then(()=>{
				init()
				state.dialogVisible = false
				ElMessage.success("提交成功~")
			})
		}
	})
}
// 交互状态
const expandedIndexes = ref<number[]>([])


// 方法
const toggleExpand = (index: number) => {
	const idx = expandedIndexes.value.indexOf(index)
	idx === -1
		? expandedIndexes.value.push(index)
		: expandedIndexes.value.splice(idx, 1)
}

</script>

<style lang="scss" scoped>
.main-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
}

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

.section-title {
	font-size: 20px;
	color: #1a1a1a;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
}


.post-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	margin-bottom: 24px;
	padding: 20px;
	transition: transform 0.2s;

	&:hover {
		transform: translateY(-2px);
	}

	.group-info {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;

		.post-time {
			color: #8590a6;
			font-size: 12px;
		}
	}

	.post-title {
		font-size: 16px;
		color: #1a1a1a;
		margin: 0 0 12px;
	}

	.post-excerpt {
		color: #646464;
		line-height: 1.6;
		margin: 0 0 8px;

		.expand-link {
			color: #06a;
			cursor: pointer;
			margin-left: 8px;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.post-fulltext {
		color: #444;
		line-height: 1.7;
		margin: 12px 0 0;
		padding-top: 12px;
		border-top: 1px dashed #eee;
	}

	.interaction-data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid #f5f5f5;

		.stats {
			display: flex;
			gap: 24px;
			.stat-item {
				cursor: pointer;
				display: flex;
				align-items: center;
				gap: 4px;
				color: #8590a6;
				font-size: 13px;
			}
		}

		.follow-btn {
			color: #06a;
			padding: 4px 8px;
		}
	}
}

.sidebar {
	.trending-topics {
		background: #fff;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}

	.sidebar-title {
		font-size: 16px;
		color: #1a1a1a;
		margin: 0 0 16px;
	}

	.topic-item {
		padding: 12px 0;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.topic-meta {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 6px;

			.topic-index {
				width: 20px;
				height: 20px;
				background: #f5f5f5;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: #8590a6;
			}

			.topic-name {
				font-size: 14px;
				color: #1a1a1a;
			}
		}

		.topic-stats {
			display: flex;
			gap: 8px;
			font-size: 12px;
			color: #8590a6;

			.stat-divider {
				color: #ddd;
			}
		}
	}

	.more-btn {
		width: 100%;
		margin-top: 16px;
		color: #06a;
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
