<template>
  <div class="min-h-screen bg-gray-50">
    <div class="w-[1440px] mx-auto px-0 py-5">
      <!-- <bread-crumb
        :breadcrumbItems="
          route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
        "
      /> -->
      <div class="mb-6">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/py/pyhome' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.query.type != '0'" :to="{
            path: '/py/authority',
            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-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 list0" :key="index" class="group cursor-pointer" @click="goToDetail(item)">
                <div v-if="item.images != null" class="relative h-40 mb-2 overflow-hidden rounded-lg">
                  <img :src="item.images"
                    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 line-clamp-1">
                  {{ item.contentTitle }}
                </h3>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <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 list1" :key="index" class="group cursor-pointer" @click="goToDetail(item)">
                <div v-if="item.images != null" class="relative h-40 mb-2 overflow-hidden rounded-lg">
                  <img :src="item.images"
                    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 line-clamp-1">
                  {{ item.contentTitle }}
                </h3>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <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">
                <Bell />
              </el-icon>
              专家解读
            </h2>
            <div class="space-y-4">
              <div v-for="(item, index) in list2" :key="index" class="group cursor-pointer" @click="goToDetail(item)">
                <h3 class="text-base font-medium group-hover:text-blue-600 text-black line-clamp-1">
                  {{ item.contentTitle }}
                </h3>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <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 list3" :key="index" class="group cursor-pointer" @click="goToDetail(item)">
                <div v-if="item.images != null" class="relative h-40 mb-2 overflow-hidden rounded-lg">
                  <img :src="item.images"
                    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 line-clamp-1">
                  {{ item.contentTitle }}
                </h3>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <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, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { getNewsList } from "@/api/home/news/list";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";

const route = useRoute();
const router = useRouter();
const details = ref({});
const list0 = ref([]);
const list1 = ref([]);
const list2 = ref([]);
const list3 = ref([]);

getList0(3, 1);
getList1(3, 1);
getList2(3, 1);
getList3(3, 1);

//获取测边列表 0
function getList0(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: qwfb,
    pageSize: 3,
    pageNo: 1,
  };
  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);
      }
    });
    list0.value = rowsList;
  });
}

function getList1(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: pyzq,
    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);
      }
    });
    list1.value = rowsList;
  });
}

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

//获取通知公告
function getList2(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: zjjd,
    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);
      }
    });
    list2.value = rowsList;
  });
}

//获取通知公告
function getList3(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: flfg,
    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);
      }
    });
    list3.value = rowsList;
  });
}

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

// 监听数据变化
// watch(
//   () => route.query.id,
//   (newVal, oldVal) => {
//     if (newVal) {
//       data.id = 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%;
  display: block;
  margin: 0 auto;
}

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