<template>
  <div class="news-center">
    <div class="content_box">
      <h1>新闻中心</h1>
      <div class="search_box">
        <el-input
          v-model="searchQuery"
          placeholder="搜索新闻"
          clearable
          class="search_input"
          @keyup.enter="handleSearch"
        >
          <template #suffix>
            <img src="@/assets/imgs/news/search.png" class="custom-prefix-icon" alt="搜索图标" />
          </template>
        </el-input>
      </div>
      <div class="content">
        <!-- 搜索框 -->

        <div class="container">
          <!-- 左侧导航分类 -->
          <div class="sidebar">
            <div class="qbfl">全部分类</div>
            <div
              v-for="(category, index) in categories"
              :key="index"
              class="category-item"
              :class="{ active: activeCategory === category.key }"
              @click="switchCategory(category.key)"
            >
              <img
                v-if="activeCategory !== category.key"
                src="@/assets/imgs/news/prefix_icon_b.png"
                class="news_nav_image"
              />
              <img v-else src="@/assets/imgs/news/prefix_icon_w.png" class="news_nav_image" />
              <span>{{ category.name }}</span>
            </div>
          </div>

          <!-- 右侧新闻内容 -->
          <div>
            <div class="news-list" v-if="activeCategory === 'company'">
              <div
                class="news-item"
                v-for="(news, index) in newsList"
                :key="index"
                @click="toDetail('company', news.id)"
              >
                <!-- <img v-if="index === 0" :src="news.image" alt="新闻图片" class="news-image" /> -->
                <img alt="新闻图片" :src="news.imgUrl" class="news_image" />
                <div class="news-content">
                  <h3>{{ news.title }}</h3>
                  <p class="news-desc">{{ news.summary }}</p>
                  <p class="news-date"><span>更新时间：</span>{{ formatDate(news.createTime) }}</p>
                </div>
              </div>
            </div>
            <div class="news-list" v-if="activeCategory === 'project'">
              <div class="other-news-list">
                <div
                  class="other-news-item"
                  v-for="(otherNews, index) in projectlist"
                  :key="index"
                  @click="toDetail('project', otherNews.id)"
                >
                  <span>
                    <!-- <span class="circle"></span> -->
                    <span class="other-news-title">{{ otherNews.title }}</span>
                  </span>
                  <span>
                    <!-- <span class="other_news_type">通知公告</span> -->
                    <span class="other-news-date">{{ formatDate(otherNews.createTime) }}</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="news-list" v-if="activeCategory === 'managerZd'">
              <div class="other-news-list">
                <div
                  class="other-news-item"
                  v-for="(otherNews, index) in managerZdlist"
                  :key="index"
                  @click="toDetail('managerZd', otherNews.id)"
                >
                  <span>
                    <!-- <span class="circle"></span> -->
                    <span class="other-news-title">{{ otherNews.title }}</span>
                  </span>
                  <span>
                    <!-- <span class="other_news_type">通知公告</span> -->
                    <span class="other-news-date">{{ formatDate(otherNews.createTime) }}</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="news-list" v-if="activeCategory === 'notice'">
              <div class="other-news-list">
                <div
                  class="other-news-item"
                  v-for="(otherNews, index) in noticelist"
                  :key="index"
                  @click="toDetail('notice', otherNews.id)"
                >
                  <span>
                    <!-- <span class="circle"></span> -->
                    <span class="other-news-title">{{ otherNews.title }}</span>
                  </span>
                  <span>
                    <!-- <span class="other_news_type">通知公告</span> -->
                    <span class="other-news-date">{{ formatDate(otherNews.createTime) }}</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="pagination" v-if="total > 0">
              <Pagination
                layout="total, prev, pager, next"
                :total="total"
                v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize"
                @pagination="getNewsList"
              />
            </div>
          </div>
          <!-- 新闻列表 -->

          <!-- 分页 -->
          <!-- <el-pagination
          background
          layout="prev, pager, next"
          :total="filteredNews.length"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          class="pagination"
        /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Folder } from '@element-plus/icons-vue'
import * as PortalApi from '@/api/portal'
// import * as NoticeApi from '@/api/system/notice'
import * as NoticeSysApi from '@/api/system/notice'
import { NoticeApi } from '@/api/company/companynotice'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute() // 路由
const router = useRouter() // 路由
const total = ref(0) // 列表的总页数
const newsList = ref([]) // 列表的数据
const noticelist = ref([]) // 通知公告列表的数据
const projectlist = ref([]) // 项目管理列表的数据
const managerZdlist = ref([]) // 管理制度列表的数据

const queryParams = reactive({
  pageNo: 1,
  pageSize: 5
  // embeddingModelId: undefined,
  // embeddingModel: undefined,
  // name: undefined,
  // datasourceId: undefined,
  // tableNames: undefined,
  // vectorStoreFile: undefined,
  // createTime: []
})
// 模拟分类数据
const categories = [
  // { key: 'all', name: '全部分类' },
  { key: 'company', name: '公司资讯' },
  // { key: 'culture', name: '企业文化' },
  { key: 'project', name: '项目管理' },
  { key: 'managerZd', name: '管理制度' },
  // { key: 'training', name: '培训社区' },
  // { key: 'employee', name: '员工指引' },
  // { key: 'address', name: '公司地址' },
  { key: 'notice', name: '通知公告' }
]

// 当前激活的分类
const activeCategory = ref('company')

// 模拟新闻数据
const newsData = [
  { id: 1, category: 'company', content: '这是公司资讯内容...', updateTime: '2023-06-04' },
  { id: 2, category: 'culture', content: '这是企业文化内容...', updateTime: '2023-06-03' },
  { id: 3, category: 'project', content: '这是项目管理内容...', updateTime: '2023-06-02' }
  // 更多数据...
]

const searchQuery = ref('') // 搜索关键词
const currentPage = ref(1) // 当前页码
const pageSize = 5 // 每页显示条数

const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}年${month}月${day}日`
}

const toDetail = (categoryKey, id) => {
  if (categoryKey === 'company') {
    router.push({
      name: 'NewsDetail',
      query: { id }
    })
  }
  if (categoryKey === 'project') {
    router.push({
      name: 'ProjectDetail',
      query: { id }
    })
  }
  if (categoryKey === 'managerZd') {
    router.push({
      name: 'ManagerZdDetail',
      query: { id }
    })
  }
  if (categoryKey === 'notice') {
    router.push({
      name: 'NoticeDetail',
      query: { id }
    })
  }
}
// 切换分类
const switchCategory = (categoryKey) => {
  activeCategory.value = categoryKey
  queryParams.pageNo = 1 // 切换分类时重置到第一页
  if (categoryKey === 'company') {
    getNewsList()
  }
  if (categoryKey === 'project') {
    getCompanyProjectList()
  }
  if (categoryKey === 'managerZd') {
    getCompanyZdList()
  }
  if (categoryKey === 'notice') {
    getNoticeList()
  }
}

// 过滤后的新闻数据（根据分类和搜索关键词）
const filteredNews = computed(() => {
  let data = newsData

  // 按分类过滤
  if (activeCategory.value !== 'all') {
    data = data.filter((item) => item.category === activeCategory.value)
  }

  // 按搜索关键词过滤
  if (searchQuery.value) {
    data = data.filter((item) => item.content.includes(searchQuery.value))
  }

  return data
})

// 分页后的新闻数据
const paginatedNews = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  return filteredNews.value.slice(start, end)
})

// 搜索新闻
const handleSearch = () => {
  currentPage.value = 1 // 搜索时重置到第一页
}

/** 查询列表 */
const getNewsList = async () => {
  // loading.value = true
  try {
    const data = await PortalApi.getNewsList(queryParams)
    newsList.value = data.list
    total.value = data.total
  } finally {
    // loading.value = false
  }
}

/** 查询公告列表 */
const getNoticeList = async () => {
  try {
    const data = await NoticeSysApi.getNoticePageList(queryParams)
    noticelist.value = data.list
    total.value = data.total
  } finally {
  }
}
/** 查询管理制度列表 */
const getCompanyZdList = async () => {
  const obj = {
    typeFlag: 2,
    pageNo: 1,
    pageSize: 5
  }
  try {
    const data = await NoticeApi.getNoticePageList(obj)
    managerZdlist.value = data.list
    total.value = data.total
  } finally {
  }
}
/** 查询项目管理列表 */
const getCompanyProjectList = async () => {
  const obj = {
    typeFlag: 3,
    pageNo: 1,
    pageSize: 5
  }
  try {
    const data = await NoticeApi.getNoticePageList(obj)
    projectlist.value = data.list
    total.value = data.total
  } finally {
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getNewsList()
}
// 切换分页
const handlePageChange = (page) => {
  currentPage.value = page
}
/** 初始化 **/
onMounted(() => {
  // getNewsList()
  const key = route.query.key
  if (!key) {
    getNewsList()
    return
  }
  activeCategory.value = key
  if (route.query.key === 'company') {
    getNewsList()
  }
  if (route.query.key === 'project') {
    getCompanyProjectList()
  }
  if (route.query.key === 'managerZd') {
    getCompanyZdList()
  }
  if (route.query.key === 'notice') {
    getNoticeList()
  }
})
</script>

<style scoped lang="less">
.pagination {
  display: flex;
  justify-content: end !important;
  margin-top: 0px !important;
}
.news-center {
  background: #f8fcff;
  border-radius: 8px;
  height: calc(100vh - 120px);
  overflow: auto;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */

  .content_box {
    padding: 20px;
    background: url('@/assets/imgs/news/news_bg.png') no-repeat top center;
    background-size: 1680px 460px;
  }
  h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 32px;
    color: #000000;
  }
}

.sidebar {
  width: 216px;
  // border-right: 1px solid #eee;
  padding-right: 20px;
  .qbfl {
    margin-left: 12px;
    margin-bottom: 5px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
  }
}

.category-item {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #000;
  font-size: 14px;
  height: 36px;
  width: 216px;
  .news_nav_image {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}

.category-item:hover {
  background: #f5f7fa;
}

.category-item.active {
  background: #fa9905;
  color: #ffffff;
  font-weight: bold;
}

.category-item .el-icon {
  margin-right: 8px;
}

.content {
  // flex: 1;
  // padding-left: 20px;
  display: flex;
  justify-content: center;
  .container {
    width: 1280px;
    // height: 818px;
    min-height: 420px;
    padding: 30px 30px 10px 6px;
    background: #fff;
    margin-top: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
  }
}

.search_box {
  display: flex;
  justify-content: center;
}
.search_input {
  width: 566px;
  max-width: 566px;
  // margin: 0 auto 20px;
  // display: block;
}
.search_input :deep(.el-input__wrapper) {
  border: 1px solid #dcdcdc; /* 自定义边框颜色 */
  border-radius: 4px; /* 可选：调整圆角 */
  //padding: 0 12px; /* 可选：调整内边距 */
  box-shadow: none; /* 移除默认阴影 */
  font-size: 14px;
}
.search_input :deep(.el-input__inner) {
  /* 如果使用非包装器版本（旧版） */
  height: 40px; /* 直接设置高度 */
  line-height: 40px; /* 垂直居中文本 */
}

.news-list {
  margin-top: 10px;
  width: 1000px;
}

.news-item {
  display: flex;
  padding: 10px 0 10px 25px;
  border-bottom: 1px solid #eee;
  margin-left: 25px;
  cursor: pointer;
  .news_image {
    width: 128px;
    height: 88px;
    object-fit: cover;
    margin-right: 16px;
  }
}

.news-tag {
  margin-right: 15px;
  flex-shrink: 0;
}

.news-content {
  flex: 1;
  h3 {
    font-size: 18px;
    color: #000;
  }
  .news-desc {
    color: #333;
    font-size: 15px;
    margin-top: 10px;
  }
  .news-date {
    color: #9a9a9a;
    font-size: 14px;
    margin-top: 12px;
  }
}

.news-footer {
  margin-top: 10px;
  color: #999;
  font-size: 14px;
}

.update-time {
  margin-left: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
<!-- 通知公告 -->
<style lang="less" scoped>
.other-news-list {
  padding: 0px 15px 0px 15px;
  margin-left: 50px;
  // margin-top: 12px;
}

.other-news-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 1px solid #eeeeee;
  .circle {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background: #999;
    display: inline-block;
  }
  .other-news-title {
    // flex: 1;
    // width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // 文字过多时显示省略号
    margin-left: 6px;
    font-size: 14px;
    color: #666;
  }
  .other-news-date {
    color: #999;
    font-size: 14px;
    margin-left: auto;
  }
}
.other_news_type {
  color: #999;
  font-size: 14px;
  margin-right: 25px;
}
</style>
