<!--详情底部-->
<template>
	<el-row :gutter="20">
		<el-col :span="12">
			<el-row>
				<el-col :span="24">
					<el-input v-model="state.content"  class="commit " placeholder="发表神秘评论" />
					<div style="margin-bottom: 10px">
						<el-button color="#626aef" :dark="isDark" plain @click="comment">发表</el-button>
					</div>
				</el-col>
			</el-row>
			<!--评论区-->
			<div class="comment"  v-for="item in state.commentList">
				<el-row :gutter="20">
					<el-col :span="3" ><span style="color: #598bd3;">{{ item.nickName }}</span></el-col>
					<el-col :span="6">
						<span class="time">
				{{item.createTime}}
						</span>
					</el-col>
				</el-row>
				<div class="content">
					{{ item.content }}
				</div>
					<el-divider />
				</div>

		</el-col>
		<!--热门-->
		<el-col :span="12">
			<div v-html="state.info.description"></div>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
const  state =reactive(<any>{
	commentList:[],
	content:"",
	info:""
})

const itemId = route.params.id;
function init() {
	frontRequest.get(`/api/item/${itemId}`).then(response =>{
		state.info = response.data
	})
	frontRequest.get("/api/comment/list",{
		params:{itemId:itemId}
	}).then(response =>{
		state.commentList = response.data
		console.log( response.data)
	})
}

function comment() {
	if (state.content ==""){
		ElMessage.error("内容不能为空")
		return
	}

	frontRequest.post("/api/comment",{itemId:itemId,content:state.content}).then(response =>{
		ElMessage.success("发表成功")
		state.comment=""
		init()
	})
}

onMounted(()=>{
	init()
})
</script>
<style scoped>
.comment{
	color: #666;
	font-size: 13px;
	word-wrap: break-word;
	.content{
		padding-top: 15px;
		font-size: 14px;
		color: #111;
		text-indent: 2em; /* 中文缩进 */
	}
	.time{
		color: #598bd3;
	}
}
:deep(.el-image){
	border-radius: 10px;
	height: 420px;
	margin-left: 30px;
}

.commit{
	width: 500px;
}
:deep(.el-input__wrapper){

	height: 100px;
	border-radius: 10px;

}
</style>
