<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="mx-auto w-[1440px] px-4">
    <!-- 面包屑导航 -->
    <div class="flex items-center justify-between py-2 border-b mb-5">
      <bread-crumb :breadcrumbItems="breadcrumbItems" />
    </div>
    <!-- 回复列表 -->
    <div>
      <div
        v-for="(item, index) in displayItems"
        :key="index"
        class="bg-white rounded-lg p-6 mb-4 shadow-sm hover:shadow-md transition-shadow"
        @click="clickList(item.id)"
      >
        <div class="flex justify-between items-start mb-3">
          <h3 class="text-lg font-medium text-gray-900">{{ item.title }}</h3>
          <span
            :class="[
              'px-3 py-1 rounded-full text-sm',
              item.status === '已处理'
                ? 'bg-green-50 text-green-600'
                : 'bg-orange-50 text-orange-600',
            ]"
            >{{ item.status }}</span
          >
        </div>
        <p class="text-gray-600 mb-4">{{ item.content }}</p>
        <div class="text-sm text-gray-400">{{ item.time }}</div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="flex justify-center mt-8">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        :pager-count="5"
        layout="prev, pager, next"
        class="!rounded-button"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";

const router = useRouter();
const searchText = ref("");
const currentPage = ref(1);
const pageSize = ref(5);
const breadcrumbItems = ref([
  { title: "首页", path: "/wm/wmhome" },
  { title: "搜索结果" },
]);
const allItems = [
  {
    title: "关于东湖公园设施改善的回复",
    content:
      "感谢您的建议。我局已安排相关部门实地考察，将在东湖公园增设 25 组休闲椅和 10 处遮阳凉亭，预计本月内完工。",
    time: "2024-12-27 09:41",
    status: "已处理",
  },
  {
    title: "关于龙泉山交通问题的回复",
    content:
      "关于龙泉山拥堵问题，我们已制定改善方案：1. 优化信号灯配时；2. 增设潮汐车道；3. 加强交通疏导。预计一周内见效。",
    time: "2024-12-02 12:24",
    status: "已处理",
  },
  {
    title: "关于金融大厦停车问题的回复",
    content:
      "金融大厦地下停车场扩建工程已列入今年重点项目，将新增车位 600 个，预计 6 月完工。",
    time: "2024-12-02 12:24",
    status: "已处理",
  },
  {
    title: "关于市民广场交通设施的回复",
    content:
      "我们将对市民广场周边道路进行优化：1. 新增人行天桥；2. 扩建非机动车道；3. 增设智能红绿灯。预计两周内完成。",
    time: "2024-12-02 12:24",
    status: "未处理",
  },
  {
    title: "关于青山湖环境整治的回复",
    content:
      "青山湖环境整治工程已启动，包括水质净化、垃圾清理、绿化提升等多项工作，预计三个月内完成。",
    time: "2024-12-02 12:24",
    status: "未处理",
  },
];

const totalItems = computed(() => allItems.length);

const displayItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const filtered = allItems.filter(
    (item) =>
      item.title.includes(searchText.value) ||
      item.content.includes(searchText.value)
  );
  return filtered.slice(start, start + pageSize.value);
});
function clickList(id: number) {
  router.push({
    path: "/wm/recoverdetail",
    query: {
      title: "搜索结果",
      pathType: "/wm/search",
      id: id,
    },
  });
}
</script>

<style scoped>
.el-pagination {
  justify-content: center;
}
</style>
