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

<template>
  <div class="mx-auto w-[1440px] px-4 mb-10">
    <!-- 面包屑导航 -->
    <div class="flex items-center justify-between py-2 border-b mb-5">
      <bread-crumb :breadcrumbItems="breadcrumbItems" />
      <!-- 搜索框 -->
      <div class="relative">
        <input
          type="text"
          v-model="searchText"
          placeholder="搜索回复"
          class="w-[300px] h-8 pl-4 pr-10 rounded-lg border-none bg-white shadow-sm focus:ring-2 focus:ring-blue-500 text-sm"
          @keyup.enter="handleSearch"
        />
        <el-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
          ><Search
        /></el-icon>
      </div>
    </div>
    <!-- 回复列表 -->
    <div>
      <div
        v-for="(item, index) in recoverList"
        :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-1">
          <h3 class="text-lg font-medium text-gray-900 line-clamp-2">
            {{ item.title }}
          </h3>
          <span
            :class="[
              'px-3 py-1 rounded-full text-sm',
              item.replyStatus === '1'
                ? 'bg-green-50 text-green-600'
                : 'bg-orange-50 text-orange-600',
            ]"
            >{{ item.replyStatus === "1" ? "已回复" : "未回复" }}</span
          >
        </div>

        <!-- <p class="text-gray-600 mb-4">{{ item.content }}</p>
          <div class="text-sm text-gray-400">{{ item.contentDatetime }}</div> -->
        <div class="flex items-center text-sm text-gray-500">
          <span>{{ item.contentDatetime }}</span>
          <span class="mx-5">留言人：***</span>
        </div>
        <p class="mt-2 text-gray-700 line-clamp-3">{{ item.content }}</p>
      </div>
    </div>

    <!-- 分页 -->
    <div class="flex justify-center mt-8">
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        background
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </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";
import { getRecoverList } from "@/api/wm/wm";

const router = useRouter();
const searchText = ref("");
const pageNo = ref(1);
const pageSize = ref(10);
const recoverList = ref([]);
const total = ref(0);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
  pageSize.value = pageSize.value;
  pageNo.value = val;
  getList(pageSize.value, pageNo.value);
};

getList(pageSize.value, pageNo.value);

function handleSearch() {
  getList(10, 1);
}
//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
  const datas = {
    title: searchText.value,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getRecoverList(datas).then((response) => {
    const data = response.data;
    const rowsList = data.rows;
    recoverList.value = rowsList;
  });
}

const breadcrumbItems = ref([
  { title: "首页", path: "/wm/wmhome" },
  { title: "回复列表" },
]);

function clickList(id: number) {
  router.push({
    path: "/wm/messagedetail",
    query: {
      title: "回复列表",
      pathType: "/wm/recoverlist",
      id: id,
    },
  });
}
</script>

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