<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-8 w-[1440px]">
      <!-- <bread-crumb
        :breadcrumbItems="
          route.query.titlePath == '-1' ? breadcrumbItems2 : breadcrumbItems
        "
      /> -->
      <div class="mb-6">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/home/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item
            v-if="route.query.type != '0'"
            :to="{
              path: '/home/news',
              query: {
                categoryTitle: route.query.categoryTitle,
                categoryId: route.query.categoryId,
              },
            }"
            >{{ route.query.categoryTitle }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 主要内容区 -->
      <div class="grid grid-cols-3 gap-8">
        <!-- 左侧主要新闻内容 -->
        <div class="col-span-2 bg-white rounded-lg shadow-sm p-6">
          <h1 class="text-3xl font-bold mb-4 text-black">
            {{ details.title }}
          </h1>

          <div class="flex items-center text-gray-600 mb-6 space-x-4">
            <div class="flex items-center">
              <el-icon><User /></el-icon>
              <span class="ml-1">{{ details.author }}</span>
            </div>
            <div class="flex items-center">
              <el-icon><Clock /></el-icon>
              <span class="ml-1">{{ details.date }}</span>
            </div>
            <div class="flex items-center">
              <el-icon><View /></el-icon>
              <span class="ml-1">阅读 {{ details.hit }}</span>
            </div>
          </div>

          <div class="editor-content" v-html="details.content"></div>
        </div>

        <!-- 右侧边栏 -->
        <div class="space-y-3">
          <!-- 通知公告 -->
          <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-6">
            <h2 class="text-xl font-bold mb-4 flex items-center text-black">
              <el-icon class="text-red-500 mr-2"><Star /></el-icon>
              热点新闻
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in hotNews"
                :key="index"
                class="group cursor-pointer"
                @click="itemTyClick(item)"
              >
                <div
                  v-if="item.images != null"
                  class="relative h-40 mb-2 overflow-hidden rounded-lg"
                >
                  <img
                    :src="item.images"
                    :alt="item.contentTitle"
                    class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <h3
                  class="text-base font-medium group-hover:text-blue-600 text-black"
                >
                  {{ item.contentTitle }}
                </h3>
                <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-3">
            <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, watch } from "vue";
import {
  User,
  Clock,
  View,
  Star,
  Location,
  Bell,
  Document,
  ArrowRight,
} from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { getHit } from "@/api/home/news/list";
import { getNewsDetail } from "@/api/home/news/details";
import {
  baseImageUrl,
  XW_RD_ID,
  TY_XW_ID,
  SX_XW_ID,
  TZ_GG_ID,
  tyxw,
} from "@/utils/config";
import { getNewsList } from "@/api/home/news/list";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";

const route = useRoute();
const router = useRouter();

const hotNews = ref([]);
const announcements = ref([]);
const tyNews = ref([]);

getHotsNewsList(5, 1);

//获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    categoryId: XW_RD_ID,
    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(5, 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;
  });
}

function itemTyClick(item: any) {
  if (item.contentOutLink) {
    window.open(item.contentOutLink, "_blank");
  } else {
    getNewsDetails(item.id);
  }
}

getTzGgNewsList(5, 1);

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

const details = ref({});

//统计点击数量
getHit(route.query.id);

const data = {
  id: route.query.id,
};

// 监听数据变化
watch(
  () => route.query.id,
  (newVal, oldVal) => {
    if (newVal) {
      getNewsDetails(newVal);
    }
  }
);

getNewsDetails(route.query.id);

function getNewsDetails(id: any) {
  const data = {
    id: id,
  };
  getNewsDetail(data).then((res) => {
    details.value = res.data;
    console.log(details.value);
  });
}
</script>

<style scoped>
.prose img {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.prose p {
  margin-bottom: 1.5rem;
  line-height: 1.75;
}

:deep(.editor-content p img) {
  max-width: 100%;
}
</style>
