<!-- 代码已包含 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="mb-6">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item
            :to="{
              path: '/home/home',
              // query: {
              //   categoryTitle: '首页',
              //   categoryId: '999',
              // },
            }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{
            route.query.categoryTitle
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex gap-6">
        <div class="flex-1">
          <div class="bg-white rounded-lg shadow-sm">
            <div
              v-for="(news, index) in newsList"
              :key="index"
              class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
              @click="getToDetail(news)"
            >
              <div
                v-if="news.images != null"
                class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg me-5"
              >
                <el-image
                  class="w-full h-full object-cover"
                  :src="news.images"
                  fit="fill"
                />
              </div>
              <div class="flex-grow">
                <h2
                  class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
                >
                  {{ news.contentTitle }}
                </h2>
                <p class="text-gray-600 text-sm line-clamp-3">
                  {{ news.contentDescription }}
                </p>
                <div class="mt-3 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ news.contentDatetime }}
                  </span>
                  <!-- <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Document /></el-icon>
                    {{ news.contentTags }}
                  </span> -->
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ news.contentHit }}
                  </span>
                </div>
              </div>
              <!-- <div class="w-24 flex-shrink-0 text-right text-blue-500">
                <el-tag
                  :type="news.contentTags"
                  size="small"
                  class="whitespace-nowrap"
                >
                  {{ news.contentTags }}
                </el-tag>
              </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"><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 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-red-500"><Star /></el-icon>
              热点新闻
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in hotNews"
                :key="index"
                class="group cursor-pointer"
                @click="getToDetail(item)"
              >
                <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"><Location /></el-icon>
              太原新闻
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in tyNews"
                :key="index"
                class="group cursor-pointer"
                @click="getToDetail(item)"
              >
                <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>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, rdxw, tyxw, tzgg } from "@/utils/config";
import {
  Clock,
  Document,
  View,
  Star,
  Location,
  Bell,
  ArrowRight,
} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { watch } from "vue";

const router = useRouter();
const route = useRoute();
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
// const categoryTitle = ref();

// const breadcrumbItems = ref([
//   { title: "首页", path: "/home/home" },
//   { title: categoryTitle },
// ]);

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);
};
const newsList = ref([]);
const tyNews = ref([]);
const announcements = ref([]);
const hotNews = ref([]);

getHotsNewsList(3, 1);

//获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: rdxw,
    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);
      }
    });
    hotNews.value = rowsList;
  });
}

getTyNewsList(3, 1);

//获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) {
  const datas = {
    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;
  });
}

getTzGgNewsList(5, 1);

//获取通知公告
function getTzGgNewsList(pageSize: number, pageNo: number) {
  const datas = {
    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;
  });
}

watch(
  () => route.query.categoryId,
  (newVal, oldVal) => {
    // categoryTitle.value = route.query.categoryTitle;
    getList(pageSize.value, pageNo.value);
  }
);

getList(pageSize.value, pageNo.value);

//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
  // newsList.value = [];
  const datas = {
    contentDisplay: "0",
    categoryId: route.query.categoryId,
    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);
      }
    });
    total.value = data.total;
    newsList.value = rowsList;
    // console.log(newsList.value);
  });
}

function getToDetail(item: any) {
  if (item.contentOutLink) {
    window.open(item.contentOutLink, "_blank");
  } else {
    router.push({
      path: "/home/news/detail",
      query: {
        categoryTitle: route.query.categoryTitle,
        // titlePath: "/home/news",
        categoryId: route.query.categoryId,
        type: 1,
        id: item.id,
      },
    });
  }
}
</script>
<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
