<template>
  <div class=base>
    
    <div class=leftinfo>
        <div class=focus style="position: absolute; font-weight: bold; font-size: 18px; left:8%;top:1%">
        你的关注
        </div>
        <div class=num style="position:absolute;  font-size: 14px; right:20%; top:1.5%; color: #45D4CF;">
          {{myfollows.weidu}}条新动态
          </div>
          <div class=followslist style="position:absolute;display: flex;flex-direction: column;top:7%;width:100%;gap:7%">
            <div>
              <div class= "alldongtai" style="display: flex; flex-direction: row;justify-content:center;  position: relative; align-items: center;">
                <el-icon color="#45D4CF" size="30px"> <Grid /></el-icon>
                <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">全部动态</div>
              </div>
              <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8;margin-top: 3%;">
            </div>
            <div v-for="(follow, index) in myfollows.list" :key="index" style="margin-top: 8%;">
              <div class="follows" style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;width: 100%;">
                <img class="touxiang" src="../../assets/pictures/touxiang.png" style="width: 18%; height: auto;" />
                <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.name }}</div>
              </div>
              <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 5%;">
            </div>
            
            
          </div>
    </div>
    <div class=middle>
        
          <div class="post-list">
            <div
              v-for="(post, index) in posts"
              :key="index"
              class="post-card"
            >
              <PostCard
                :avatarUrl="post.avatarUrl"
                :username="post.username"
                :timestamp="post.timestamp"
                :content="post.content"
                :imageUrl="post.imageUrl"
                :likeCount="post.likeCount"
                :commentCount="post.commentCount"
                :isCommentsVisible="post.isCommentsVisible"
                :comments="post.comments"
                @updateLikeCount="updateLikeCount(index, $event)"
                @updateCommentCount="updateCommentCount(index, $event)"
                @toggleCommentsVisibility="toggleCommentsVisibility(index)"
                @addComment="addComment(index, $event)"
              />
            </div>
          </div>
      
      
    </div>
    <div class=rightheat style="display: flex;flex-direction:column;">

      <div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
        <el-icon color="red" size="30px"><Odometer /></el-icon>
        <div style="font-weight:550; font-size: 18px;">热门动态</div>
      </div>
     <div class= heatlist style="margin-top:20px;display: flex;flex-direction:row;">
        <div style="position:relative; display: flex;flex-direction:column;  color: white; font-weight: bold;margin-left: 20px ;gap:11px">
            <div class=Hotsearchnum style="background-color:red;">1</div>
            <div class=Hotsearchnum style="background-color:#FF7E38;">2</div>
            <div class=Hotsearchnum style="background-color:#FFC74F;">3</div>
            <div class=Hotsearchnum style="background-color:gray;">4</div>
            <div class=Hotsearchnum style="background-color:gray;">5</div>
            <div class=Hotsearchnum style="background-color:gray;">6</div>
            <div class=Hotsearchnum style="background-color:gray;">7</div>
        </div>
        <div style=" font-size: 14px;font-weight:500;margin-left: 30px;display: flex;flex-direction:column;gap:17px">
          <li style="list-style-type: none;" v-for="(item, index) in HotsearchList" :key="index">{{ item }}</li>
        </div>
        
      </div>
      <div style="width: 100%; height: 1px; background: linear-gradient(to right, transparent, gray, transparent);margin-top: 20px"></div>
      <div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
        <el-icon color="#FEB7D9" size="25px"><Notebook /></el-icon>
        <div style="font-weight:550; font-size: 18px;">热门家族故事</div>
      </div>
      <div class="familystorelist" style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
        <div v-for="(story, index) in familystories" :key="index" class="familystore" style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;">
          <img class="touxiang" src="../../assets/pictures/touxiang.png" />
          <div class="familytitle">{{ story.title }}</div>
          <div class="familycontent">{{ story.content }}</div>
        </div>
      </div>
      
      
    </div>

  </div>
  
</template>
<style scoped>
.base
{
  height: 100vh;
  background-image: url("../../assets/pictures/communityback.png");
  background-size: 90%;
  background-attachment: fixed;  /* 背景固定 */
  background-position: -600px; /* 向左移动背景图像 50px */
  background-position: center;  /* 可以选择让背景居中 */
  z-index: -1; 
}
.touxiang
{
  position: absolute;
  top:50%;
  left:5%;
  border-radius: 10px;
  width: 50px;
  height:50px;
  transform: translateY(-50%)
}
.leftinfo
{
      background-color: rgba(255,255,255,0.8);
      width: 15%;
      position: fixed;
      left:0%;
      border: 3px solid  orchid;
      height:100%;
        
}
.rightheat
{

    background-color: rgba(255,255,255,0.8);
    position: fixed;
    right:0%;
    width: 15%;
    border: 3px solid  orchid;
    height:100%;
    
}
.familytitle
{
  position: absolute;
  top:8%;
  left:35%;
  font-size: 14px;
  font-weight: bold; 

}
.familycontent
{
  position: absolute;
  bottom:12%;
  left:35%;
  font-size: 13px;

}
.Hotsearchnum{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.middle
{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width: 65%;
  border: 3px solid  orchid;
  height:100%;
  z-index:1;
}
.post-list {
   
  }
  </style>
<script>
import PostCard from '../../components/PostCard.vue';
export default {
  name: 'CommunityIndex', // 添加组件名称
  components: { PostCard },
  // 其他组件选项
  data() {
    return {
      isLiked: false, 
      HotsearchList: ["麦琳爱吃烧鸡","马思唯收官战","国足绝杀","再见爱人","杨子黄圣依","黄磊的豆角","邪恶栀子花计划"],
      familystories: [
      { title: '我是怎么起家的', content: '我的父母来自于印度，后面通过自己的打拼...' },
      { title: '我的祖父', content: '我的祖父曾经参加过二战，有一次在诺曼底...' },
      { title: '我竟然是皇室成员！', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
      

    ],
    myfollows:{weidu:7,list:[{name:'乔一鱼'},{name:'邓紫棋'},{name:'马思唯'},{name:'陶喆'}]},
    posts: [
          {
            avatarUrl: 'https://via.placeholder.com/40',
            username: '小明',
            timestamp: '1小时前',
            content: '今天的天气真好，适合出去玩！',
            imageUrl: 'https://via.placeholder.com/400x200',
            likeCount: 24,
            commentCount: 6,
            isCommentsVisible: false,
            comments: []  // 存储评论
          },
          {
            avatarUrl: 'https://via.placeholder.com/40',
            username: '小红',
            timestamp: '2小时前',
            content: '刚看完一场电影，真是太感人了！',
            imageUrl: '',
            likeCount: 36,
            commentCount: 12,
            isCommentsVisible: false,
            comments: []  // 存储评论
          },
        ]
    };
  },
  methods: {
      updateLikeCount(index, newLikeCount) {
        this.posts[index].likeCount = newLikeCount;
      },
      updateCommentCount(index, newCommentCount) {
        this.posts[index].commentCount = newCommentCount;
      },
      toggleCommentsVisibility(index) {
        this.posts[index].isCommentsVisible = !this.posts[index].isCommentsVisible;
      },
      addComment(index, commentText) {
        this.posts[index].comments.push({
          username: '匿名用户',
          text: commentText
        });
        this.posts[index].commentCount += 1;
      }
    }
}
</script>