<template>
  <div class="container">
    <!-- 图片展示区 -->
    <div class="publicity">
      <Publicity />
    </div>

    <!-- 主内容区域，包含文章展示区和系统消息发布区 -->
    <div class="main-content">
      <!-- 系统消息发布区 -->
      <div class="system-messages">
        <Announcement/>
      </div>

      <!-- 文章展示区 -->
      <div class="articles">
        <div class="articles-header">
          <b class="articles-title">全部文章</b>
          按照
          <select v-model="selectedOption" class="dropdown-select">
            <option value="byLike">最受欢迎</option>
            <option value="byData">发布日期</option>
          </select>
          排序
          <button class="confirm-button" @click="handleConfirm">确认</button>
        </div>

        <div class="article">
          <!-- 文章内容 -->
          <div v-for="p in postOverviewList" :key="p.post_id">
            <Article :post_id="p.post_id" :user_id="p.user_id" :username="p.username" :title="p.title" :updated_at="p.updated_at" :Likes="p.Likes" :showButtons="false" />
          </div>
        </div>
        <!-- 更多文章可以继续添加 -->
      </div>
    </div>
    <!-- 开始写作按钮 -->  
    <StartWriting buttonText="开始写作" />
    <!-- 底部查询栏 -->
    <button class="scroll-to-top find-button" @click="openModal">查询</button>
    <!-- 回到顶部按钮 -->
    <button class="scroll-to-top" @click="scrollToTop">回到顶部</button>

    <!-- 模态框 -->
    <Modal 
      title="查询选择"
      :visible="isModalVisible"
      @update:visible="isModalVisible = $event"
      @select="handleSelect"
    />

    <!-- 评论浮窗 -->
    <CommentModal 
      title="全部评论"
      :visible="isCommentModalVisible"
      :comments="commentList"
      @update:visible="isCommentModalVisible = $event"
    />

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import Modal from '@/components/Modal.vue';
import CommentModal from '@/components/CommentModal.vue';
// 引入宣传图片组件
import Publicity from '../components/home/Publicity.vue';
// 引入文章概览
import Article from '@/components/utils/Article.vue'
//引入公告栏
import Announcement from './Announcement.vue';
//引入开始写作按钮
import StartWriting from '@/components/utils/StartWriting.vue';
console.log('home');
// -----------------------------------------
interface postOverview {
  post_id: number;
  user_id: number;
  Likes: number;
  username: string;
  title: string;
  updated_at: string;
}
let postOverviewList = reactive<postOverview[]>([]);

interface comment {
  comment_id: number;
  post_id: number;
  user_id: number;
  content: string;
  updated_at: string;
  username: string;
  post_title:string;
  
}
let commentList = reactive<comment[]>([]);

// 获取文章概览列表
function getAll(by: string) {
  axios.get('http://127.0.0.1:8080/post/overview', {
    params: { by: by },
    headers: { token: '' }
  })
  .then(res => {
    // 使用扩展运算符来保持响应性
    postOverviewList.splice(0, postOverviewList.length)
    postOverviewList.push(...res.data.data)
    console.log("获取文章概览数据成功", res.data.data);
  })
  .catch(error => console.error('There was an error fetching the data!', error))
}

//---------------------------------------
// 下拉选择框的选项值
const selectedOption = ref('byData'); // 默认值为选项1
// 回到顶部方法
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 查询按钮
const isModalVisible = ref(false);
const isCommentModalVisible = ref(false);

const openModal = () => {
  isModalVisible.value = true;
};

const closeModal = () => {
  isModalVisible.value = false;
};

const handleSelect = (type: string, criteria: string, query: string) => {
  console.log('选择的类型:', type);
  console.log('选择的条件:', criteria);
  console.log('查询内容:', query);
  // 根据选择的类型和条件进行查询
  if (type === 'blog') {
    if (criteria === 'author') {
      // 根据作者名称查询博客
      console.log('根据作者名称查询博客');
      searchBlogByAuthor(query);
    } else if (criteria === 'title') {
      // 根据文章名称查询博客
      console.log('根据文章名称查询博客');
      searchBlogByTitle(query);
    }
  } else if (type === 'comment') {
    if (criteria === 'user') {
      // 根据用户名称查询评论
      console.log('根据用户名称查询评论');
      searchCommentByUser(query);
    } else if (criteria === 'content') {
      // 根据评论内容查询评论
      console.log('根据评论内容查询评论');
      searchCommentByContent(query);
    }
  }
  closeModal();
};

// 处理选择确认按钮点击事件的方法
const handleConfirm = () => {
  console.log('选择的选项是:', selectedOption.value);
  getAll(selectedOption.value);
  // 在这里可以添加更多的逻辑来处理选择确认的操作
};
onMounted(() => {
  getAll(selectedOption.value);
});

// 查询后，有文章显示在主页，没有文章，引入pinia提xing
// 查询博客根据作者名称
const searchBlogByTitle = (author: string) => {
  axios.get('http://127.0.0.1:8080/post/search', {
    params: {  title: "",username: author },
    headers: { token: '' }
  })
  .then(res => {
    postOverviewList.splice(0, postOverviewList.length);
    postOverviewList.push(...res.data.data);
    console.log("根据作者名称查询博客成功", res.data.data);
  })
  .catch(error => console.error('There was an error fetching the data!', error));
};

// 查询博客根据文章名称
const searchBlogByAuthor = (title: string) => {
  axios.get('http://127.0.0.1:8080/post/search', {
    params: { title: title ,username:''},
    headers: { token: '' }
  })
  .then(res => {
    postOverviewList.splice(0, postOverviewList.length);
    postOverviewList.push(...res.data.data);
    console.log("根据文章名称查询博客成功", res.data.data);
  })
  .catch(error => console.error('There was an error fetching the data!', error));
};

// 评论再做一个页面
// 查询评论根据用户名称
const searchCommentByUser = (user: string) => {
  axios.get('http://127.0.0.1:8080/comment/search', {
    params: { content: "",username: user },
    headers: { token: '' }
  })
  .then(res => {
    commentList.splice(0, commentList.length);
    commentList.push(...res.data.data);
    console.log("根据用户名称查询评论成功", res.data.data);
    isCommentModalVisible.value = true;
  })
  .catch(error => console.error('There was an error fetching the data!', error));
};

// 查询评论根据评论内容
const searchCommentByContent = (content: string) => {
  axios.get('http://127.0.0.1:8080/comment/search', {
    params: { content: content,username: "" },
    headers: { token: '' }
  })
  .then(res => {
    commentList.splice(0, commentList.length);
    commentList.push(...res.data.data);
    console.log("根据评论内容查询评论成功", res.data.data);
    isCommentModalVisible.value = true;
  })
  .catch(error => console.error('There was an error fetching the data!', error));
};
</script>

<style scoped>
/* 容器样式，设置为flex布局，垂直排列 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 最小高度为视口高度 */
}

/* 图片展示区样式 */
.publicity {
  width: 100%;
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 主内容区域样式，包含文章展示区和系统消息发布区 */
.main-content {
  display: flex;
  flex: 1; /* 占据剩余空间 */
}

/* 系统消息发布区样式 */
.system-messages {
  width: 300px; /* 固定宽度 */
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  position: sticky; /* 始终固定在左侧 */
  top: 0;
  bottom: 0;
  overflow-y: auto; /* 滚动条 */
}

/* 文章展示区样式 */
.articles {
  flex: 1; /* 占据剩余空间 */
  padding: 20px;
  overflow-y: auto; /* 滚动条 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 垂直方向从顶部开始 */
}

/* 单篇文章样式 */
.article {
  margin-bottom: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
}

/* 回到顶部按钮样式 */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000; /* 确保按钮在最上层 */
}

/* 查询按钮样式 */
.find-button {
  bottom: 100px; /* 调整为比回到顶部按钮更大的值 */
}

/* 回到顶部按钮悬停效果 */
.scroll-to-top:hover {
  background-color: #0056b3;
}

/* 文章标题样式 */
.articles-title {
  font-size: 24px;
  color: #333; 
  font-weight: bold;
  margin-bottom: 10px;
}

/* 下拉选择框样式 */
.dropdown-select {
  margin-left: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 确认按钮样式 */
.confirm-button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-button:hover {
  background-color: #0056b3;
}
</style>