<template>
	<div class="topic-container">
		<!-- 话题头部 -->
		<div class="topic-header">
			<div class="header-main">
				<h1 class="title">{{ state.info.title }}</h1>
			</div>
			<div class="stats">{{state.info.view }}次浏览</div>
		</div>
		<!-- 话题描述 -->
		<div class="topic-description">
			<p><div v-html="state.info.content"></div></p>
		</div>
		<!-- 发帖入口 -->
		<div class="post-actions">
			<el-button type="text" icon="edit" @click="dialogVisible = true">说点什么</el-button>
		</div>
		<!-- 内容筛选 -->
		<div class="filter-tabs">
			<div
				v-for="tab in tabs"
				:key="tab"
				:class="['tab', { active: activeTab === tab }]"
				@click="activeTab = tab"
			>
				{{ tab }}
			</div>
		</div>
		<!-- 广播列表 -->
		<div  v-if="state.info.commentEntityList" class="broadcast-list">
			<div
				v-for="(item, index) in state.info.commentEntityList"
				:key="index"
				class="broadcast-item"
			>
				<div class="user-info">
					<div class="meta">
						<div class="username">{{ item.nickName }}</div>
						<div class="time">{{item.createTime}}</div>
					</div>
				</div>

				<div class="content">
					<p class="text"><div v-html="item.content" class="rich-text-container"></div></p>
<!--					<div class="interactions">-->
<!--						<span class="response">{{ item.responses }} 回应</span>-->
<!--					</div>-->
				</div>
			</div>
		</div>
		<el-empty  v-else description="评论哪去了？" />
		<el-dialog
			v-model="dialogVisible"
			title="评论"
			width="500"
		>
			<e-editor  :content="state.form.content" @update:content="handleImageUrl" />
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="comment">
						提交
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElButton, ElAvatar, ElLoading } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const itemId = route.params.id
const dialogVisible = ref(false)
import { useRouter } from 'vue-router'
const router = useRouter()
const activeTab = ref('评论')
const tabs = ['评论']
// 广播数据
const state = reactive({
	info: {},
	broadcasts: [],
	form:{}
})
const loading = ElLoading.service({
	lock: true,
	text: 'Loading',
	background: 'rgba(0, 0, 0, 0.7)',
})
const comment = () => {
  state.form.topicId = itemId
	if (state.form.content == '<p><br></p>' || state.form.content == ''){
		ElMessage.warning("不能为空！")
		return
	}
	frontRequest.post("/api/comment",{itemId:itemId,content:state.form.content}).then(response =>{
		ElMessage.success("发表成功")
		state.form.content=  ""
		init()
		dialogVisible.value = false
	})
}
function init() {
	frontRequest.get(`/api/topic/${itemId}`).then((res) => {
		state.info = res.data
		loading.close()
	})

}
onMounted(() => {
	if (!userStore().frontIsLogin){
		toast.warning("登录失效")
		router.push("/login")
	}
	init()

})

// 接收子组件传递的路径
function handleImageUrl(content: string) {
	state.form.content = content
}

</script>

<style scoped>

.rich-text-container {
	width: 100%;             /* 设置宽度为容器的100%或指定的宽度 */

	overflow: hidden;        /* 内容超出部分将被隐藏 */
	text-overflow: ellipsis; /* 如果需要，可以加上省略号 */
	word-wrap: break-word;   /* 防止长单词或链接溢出 */
	white-space: normal;     /* 允许换行 */
	box-sizing: border-box;  /* 确保padding不会影响布局 */
}
.topic-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.topic-header {
	margin-bottom: 30px;
	.header-main {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 10px;

		.title {
			margin: 0;
			font-size: 28px;
		}
	}
	.stats {
		color: #666;
		font-size: 14px;
	}
}

.topic-description {
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	margin-bottom: 20px;
	p {
		margin: 0;
		line-height: 1.6;
		color: #444;
	}
}

.post-actions {
	display: flex;
	gap: 15px;
	margin-bottom: 30px;
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
}

.filter-tabs {
	display: flex;
	margin-bottom: 20px;
	.tab {
		padding: 8px 20px;
		cursor: pointer;
		color: #666;

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

.broadcast-item {
	padding: 20px;
	margin-bottom: 25px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.meta {
			margin-left: 12px;
			.username {
				font-weight: 500;
			}
			.time {
				color: #666;
				font-size: 12px;
			}
		}
	}

	.content {
		.text {
			margin: 0 0 15px 0;
			line-height: 1.6;
			color: #333;
		}

		.interactions {
			display: flex;
			align-items: center;
			color: #666;
			.response {
				margin-right: 20px;
			}
		}
	}
}
</style>
<route lang="json">
{
	"meta": {
		"layout": "front"
	}
}
</route>
