<template>
  <view class="container">
	      
    <view class="header">{{ post.title }}</view>
    <view class="content">{{ post.content }}</view>
    <view class="comments">
      <view v-for="comment in comments" :key="comment.id" class="comment">
        <view class="username">{{ comment.username }}</view>
        <view class="text">{{ comment.text }}</view>
      </view>
    </view>
    <view class="add-comment">
      <input v-model="newComment" placeholder="发表评论" />
      <button @click="addComment">发表</button>
    </view>
  </view>
</template>

<script setup>
	import {
		reactive,ref
	} from 'vue';

  
      const post = ref({
        title: "这是一个讨论帖子",
        content: "这是帖子的内容，大家可以在评论区讨论。",
      } )
      const comments = ref([
        { id: 1, username: "Alice", text: "非常好的帖子！" },
        { id: 2, username: "Bob", text: "同意楼上的观点！" },
      ]) 
      const newComment = ref("") 


   const  addComment = () =>  {
      const newId = comments.value.length + 1;
      comments.value.push({
        id: newId,
        username: "匿名用户",
        text: this.newComment,
      });
      newComment.value = "";
    
  
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.header {
  font-size: 24px;
  font-weight: bold;
}

.content {
  margin-top: 20px;
  line-height: 1.5;
}

.comments {
  margin-top: 20px;
  width: 100%;
}

.comment {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.username {
  font-weight: bold;
}

.add-comment {
  margin-top: 20px;
  display: flex;
}

input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
