<template>
  <Header />
  <div class="headtop"></div>
  <div class="content-container">
    <div class="topcontent">
      <div class="top-content">
        <div class="top-content-title">站点资讯 - 站点公告</div>
        <div class="top-content-subtitle">NEWS CENTER - ANNOUNCEMENT</div>
      </div>
    </div>
    <div class="maincontent">
      <!-- 筛选栏 -->
      <div class="filter-panel">
        <div class="filter-row">
          <span class="filter-label">新闻分类</span>
          <div class="filter-options">
            <span
              v-for="item in categoryList"
              :key="item.value"
              :class="[
                'filter-item',
                { active: activeCategory === item.value },
              ]"
              @click="activeCategory = item.value"
            >
              {{ item.label }}
            </span>
          </div>
        </div>

        <div class="filter-row">
          <span class="filter-label">新闻属性</span>
          <div class="filter-options">
            <span
              v-for="item in flagList"
              :key="item.value"
              :class="['filter-item', { active: activeFlag === item.value }]"
              @click="activeFlag = item.value"
            >
              {{ item.label }}
            </span>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <i class="fas fa-spinner fa-spin"></i>
        <span>加载中...</span>
      </div>

      <!-- 错误信息 -->
      <div v-else-if="error" class="error-state">
        <i class="fas fa-exclamation-circle"></i>
        <span>{{ error }}</span>
      </div>

      <!-- 新闻列表 -->
      <div v-else-if="newsData.length > 0" class="news-grid">
        <div
          v-for="news in newsData"
          :key="news.id"
          class="news-card"
          @click="goToDetail(news.id)"
        >
          <div class="card-image" v-if="news.image">
            <img :src="getImageUrl(news.image)" :alt="news.title" />
          </div>
          <div v-else class="card-image-placeholder">
            <i class="fas fa-image"></i>
          </div>
          <div class="card-content">
            <div class="card-title-container">
              <h3 class="card-title">
                <span v-if="news.top === 1" class="top-tag">置顶</span>
                <span v-if="news.recommend === 1" class="recommend-tag">
                  推荐
                </span>
                {{ news.title }}
              </h3>
            </div>
            <div class="card-meta">
              <span class="card-date">
                <i class="fa-regular fa-calendar-minus"></i>
                {{ formatDate(news.publish_date) }}
              </span>
              <span class="right-meta">
                <span class="card-date">
                  <i class="fa-regular fa-heart"></i>
                  {{ news.likes }}
                </span>
                <span class="card-date">
                  <i class="fa-regular fa-eye"></i>
                  {{ news.views }}
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 无数据状态 -->
      <div v-else class="empty-state">
        <el-empty :image-size="200" />
      </div>

      <!-- 加载更多按钮 -->
      <div
        v-if="!loading && !error && newsData.length > 0 && hasMore"
        class="load-more"
      >
        <button class="load-more-btn" @click="loadMore" :disabled="loadingMore">
          <i v-if="loadingMore" class="fas fa-spinner fa-spin"></i>
          <span v-else>加载更多</span>
        </button>
      </div>

      <!-- 没有更多数据提示 -->
      <div
        v-if="!loading && !error && newsData.length > 0 && !hasMore"
        class="no-more"
      >
        <span>已加载全部数据</span>
      </div>
    </div>
    <div class="bottomcontent"></div>
  </div>
  <Footer />
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/views/components/header.vue'
import Footer from '@/views/components/footer.vue'
import { getCompanyNews } from '@/api/newscenter'

const router = useRouter()

const newsData = ref<any[]>([])
const loading = ref(false)
const loadingMore = ref(false)
const error = ref('')
const currentPage = ref(1)
const pageSize = ref(12) // 每次加载12条
const total = ref(0)


// 写死的筛选项
const categoryList = [
  { label: '全部', value: 'all' },
  { label: '公司新闻', value: 'company' },
  { label: '行业新闻', value: 'industry' },
  { label: '媒体报道', value: 'media' },
]

const flagList = [
  { label: '全部', value: 'all' },
  { label: '置顶', value: 'top' },
  { label: '推荐', value: 'recommend' },
]

// 当前选中状态
const activeCategory = ref('all')
const activeFlag = ref('all')


// 计算是否还有更多数据
const hasMore = computed(() => {
  return newsData.value.length < total.value
})

// 获取图片URL
const getImageUrl = (image: string) => {
  if (!image) return ''
  if (image.startsWith('http')) return image
  return `${import.meta.env.VITE_API_BASE_URL || ''}${image}`
}

// 格式化日期
const formatDate = (date: string) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

const goToDetail = (id: number) => {
  router.push(`/newscenter/companyNews/detail/${id}`)
}

// 加载更多数据
const loadMore = async () => {
  if (loadingMore.value || !hasMore.value) return

  loadingMore.value = true
  currentPage.value++

  try {
    const response = await getCompanyNews(currentPage.value, pageSize.value)
    if (response.code === 200) {
      // 追加新数据到现有列表
      newsData.value = [...newsData.value, ...(response.list || [])]
      total.value = response.total || 0
    } else {
      error.value = response.msg || '加载更多数据失败'
      currentPage.value-- // 回退页码
    }
  } catch (err: any) {
    error.value = '加载更多数据时发生错误'
    console.error('加载更多数据错误:', err)
    currentPage.value-- // 回退页码
  } finally {
    loadingMore.value = false
  }
}

// 初始加载新闻数据
const loadNews = async () => {
  loading.value = true
  error.value = ''
  currentPage.value = 1

  try {
    const response = await getCompanyNews(currentPage.value, pageSize.value)
    if (response.code === 200) {
      newsData.value = response.list || []
      total.value = response.total || 0
    } else {
      error.value = response.msg || '获取新闻数据失败'
    }
  } catch (err: any) {
    error.value = '获取新闻数据时发生错误'
    console.error('获取新闻数据错误:', err)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadNews()
})
</script>
<style lang="scss" scoped>
.headtop {
  height: 80px;
  flex-shrink: 0;
}

.content-container {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  .filter-panel {
    background: #fff;
    padding: 20px 30px;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .filter-row {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px dashed #eee;

      &:last-child {
        border-bottom: none;
      }

      .filter-label {
        width: 90px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        flex-shrink: 0;
      }

      .filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        .filter-item {
          font-size: 14px;
          color: #666;
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            color: #1890ff;
          }

          &.active {
            color: #1890ff;
            font-weight: 600;
          }
        }
      }
    }
  }
  .topcontent {
    height: 450px;
    width: 100%;
    background-image: url(@/assets/images/newscenter.jpg);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;

    .top-content {
      padding-top: 180px;
      width: 1200px;
      margin: 0 auto;

      .top-content-title {
        font-size: 35px;
        font-weight: 600;
        color: #fff;
      }

      .top-content-subtitle {
        width: 300px;
        margin-top: 20px;
        padding-top: 20px;
        font-size: 16px;
        color: #fff;
        border-top: 2px solid #fff;
      }
    }
  }

  .maincontent {
    flex: 1;
    width: 1200px;
    margin: 80px auto;
    padding: 0 20px;

    .loading-state,
    .error-state,
    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
      color: #666;
      font-size: 16px;

      i {
        margin-right: 10px;
        font-size: 24px;
      }
    }

    .error-state {
      color: #f56c6c;

      i {
        color: #f56c6c;
      }
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-bottom: 40px;

      @media (max-width: 992px) {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }

      @media (max-width: 576px) {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .news-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          transform: translateY(-4px);
        }

        .card-image {
          width: 100%;
          height: 140px;
          overflow: hidden;
          background: #f5f5f5;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
          }

          &:hover img {
            transform: scale(1.05);
          }
        }

        .card-image-placeholder {
          width: 100%;
          height: 140px;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ccc;
          font-size: 48px;
        }

        .card-content {
          padding: 20px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          flex: 1;

          .card-title-container {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            flex-wrap: wrap;

            .recommend-tag {
              padding: 4px 10px;
              background: #1890ff;
              color: #fff;
              font-size: 12px;
              border-radius: 4px;
              white-space: nowrap;
              flex-shrink: 0;
            }

            .top-tag {
              padding: 4px 10px;
              background: #ff5050;
              color: #fff;
              font-size: 12px;
              border-radius: 4px;
              white-space: nowrap;
              flex-shrink: 0;
            }

            .card-title {
              font-size: 14px;
              font-weight: 600;
              color: #333;
              margin: 0;
              height: 40px;
              line-height: 1.4;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              flex: 1;
              min-width: 0;
            }
          }

          .card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: #999;

            .right-meta {
              display: flex;
              gap: 6px;
            }

            span {
              margin-right: 6px;
            }

            .card-date {
              display: flex;
              align-items: center;
              gap: 5px;
            }
          }

          .card-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex: 1;
          }
        }
      }
    }

    .load-more {
      display: flex;
      justify-content: center;
      margin-top: 40px;
      padding: 20px 0;

      .load-more-btn {
        padding: 12px 40px;
        border: 1px solid #1890ff;
        border-radius: 6px;
        background: #fff;
        color: #1890ff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 8px;

        &:hover:not(:disabled) {
          background: #1890ff;
          color: #fff;
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
    }

    .no-more {
      display: flex;
      justify-content: center;
      margin-top: 40px;
      padding: 20px 0;
      color: #999;
      font-size: 14px;
    }
  }

  .bottomcontent {
    flex-shrink: 0;
  }
}
</style>
