<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-8 w-[1440px]">
      <bread-crumb :breadcrumbItems="breadcrumbItems" />
      <div class="flex gap-6">
        <div class="flex-1">
          <!-- 列表区域 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="divide-y divide-gray-200">
              <div
                v-for="item in tableData"
                :key="item.id"
                class="p-4 hover:bg-gray-50 transition-colors"
              >
                <div class="flex items-center justify-between">
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center mb-1">
                      <h3
                        class="text-black hover:text-blue-600 cursor-pointer text-lg font-medium truncate mr-2 line-clamp-2"
                        @click="goToDetail(item.id)"
                      >
                        {{ item.contentTitle }}
                      </h3>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                      <span class="mr-4">发布人：{{ item.contentAuthor }}</span>
                      <span class="mr-4"
                        >发布时间：{{ item.contentDatetime }}</span
                      >
                      <span class="text-sm text-gray-500 flex items-center">
                        <el-icon class="mr-1"><View /></el-icon>
                        {{ item.contentHit }} 阅读
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </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>
        <div class="w-80 flex-shrink-0 space-y-6">
          <!-- 本地新闻 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-bold mb-4 flex items-center text-black">
              <el-icon class="mr-2 text-blue-500"><Location /></el-icon>
              太原新闻
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in tyNews"
                :key="index"
                class="group cursor-pointer"
                @click="goToDetail(item.id)"
              >
                <div
                  v-if="item.images != null"
                  class="h-32 mb-2 overflow-hidden rounded-lg"
                >
                  <img
                    :src="item.images"
                    :alt="item.title"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div
                  class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
                >
                  {{ item.contentTitle }}
                </div>
                <div class="mt-1 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ item.contentDatetime }}
                  </span>

                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ item.contentHit }} 阅读
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 通知公告 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-bold mb-4 flex items-center text-black">
              <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
              通知公告
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in announcements"
                :key="index"
                class="group cursor-pointer"
                @click="getToDetail(item)"
              >
                <div
                  class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
                >
                  {{ item.contentTitle }}
                </div>
                <div class="mt-1 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ item.contentDatetime }}
                  </span>

                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ item.contentHit }} 阅读
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
  Clock,
  Document,
  View,
  Star,
  Location,
  Bell,
  ArrowRight,
} from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list";
import { useRouter, useRoute } from "vue-router";
import { baseImageUrl, rdxw, sxxw, tzgg, tyxw } from "@/utils/config";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";

const router = useRouter();
const route = useRoute();
const searchKeyword = ref("");
const dateRange = ref([]);
const noticeType = ref("");
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(100);
const tableData = ref([]);
const tyNews = ref([]);
const announcements = ref([]);
const breadcrumbItems = ref([
  { title: "首页", path: "/home/home" },
  { title: "通知公告" },
]);

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);
};

getTyNewsList(5, 1);

//获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: tyxw,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response) => {
    const data = response.data;
    const rowsList = data.rows;
    rowsList.forEach((item: any) => {
      if (item.contentImg) {
        item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
      }
    });
    tyNews.value = rowsList;
  });
}

function goToDetail(id: number) {
  router.push({
    path: "/home/news/detail",
    query: {
      title: "通知公告",
      titlePath: "/home/announcements",
      type: 4,
      id: id,
    },
  });
}

getTzGgNewsList(5, 1);

//获取通知公告
function getTzGgNewsList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: tzgg,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response) => {
    const data = response.data;
    const rowsList = data.rows;
    rowsList.forEach((item: any) => {
      if (item.contentImg) {
        item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
      }
    });
    announcements.value = rowsList;
  });
}

getList(pageSize.value, pageNo.value);

//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: tzgg,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response) => {
    const data = response.data;
    const rowsList = data.rows;
    total.value = data.total;
    tableData.value = rowsList;
  });
}
</script>
<style scoped>
.el-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb inset;
}
.el-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}
.el-select :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb inset;
}
.el-select :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}
.el-date-editor :deep(.el-range-separator) {
  color: #606266;
}
</style>
