<script setup lang="ts">
import {treeNavigation} from '~/api/cms/cmsNavigation';
import type {CmsNavigation} from '~/api/cms/cmsNavigation/model';
import NewsList from '~/components/Index/NewsList.vue';
import NewsListSimple from '~/components/Index/NewsListSimple.vue';
import NewsCard from '~/components/Index/NewsCard.vue';
import {pageCmsArticle} from "~/api/cms/cmsArticle";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import {getCmsAd} from "~/api/cms/cmsAd";
import type {CmsAd} from "~/api/cms/cmsAd/model";

const categoryList = ref<CmsNavigation[]>([]);
const hotNews = ref<CmsArticle[]>([]);

// 当前激活的分类ID
const activeCategoryId = ref<number>(4264);

// 其他栏目数据
const memberNews = ref<CmsArticle[]>([]);      // 会员之家
const brandNews = ref<CmsArticle[]>([]);       // 品牌建设
const industryNews = ref<CmsArticle[]>([]);    // 行业自律
const partyNews = ref<CmsArticle[]>([]);       // 协会党建
const productNews = ref<CmsArticle[]>([]);     // 名优产品
const bannerAd = ref<any>();                 // 广告位441

// 产品轮播相关
const productCarousel = ref<HTMLElement>();
let carouselTimer: NodeJS.Timeout | null = null;

// 分类选项
const categoryTabs = [
  {id: 4266, name: '行业新闻'},
  {id: 4267, name: '工作动态'}
];

// 切换分类
const switchCategory = (categoryId: number) => {
  activeCategoryId.value = categoryId;
};

// 格式化日期
const formatDate = (dateStr: string | undefined) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${month}-${day}`;
};

// 启动产品轮播
const startProductCarousel = () => {
  if (!productCarousel.value || productNews.value.length <= 4) return;

  carouselTimer = setInterval(() => {
    const container = productCarousel.value;
    if (!container) return;

    const itemWidth = 200; // 每个产品项的宽度
    const currentScroll = container.scrollLeft;
    const maxScroll = container.scrollWidth - container.clientWidth;

    if (currentScroll >= maxScroll) {
      // 滚动到末尾，重置到开始
      container.scrollTo({left: 0, behavior: 'smooth'});
    } else {
      // 继续向右滚动
      container.scrollTo({left: currentScroll + itemWidth, behavior: 'smooth'});
    }
  }, 3000); // 每3秒滚动一次
};

// 停止产品轮播
const stopProductCarousel = () => {
  if (carouselTimer) {
    clearInterval(carouselTimer);
    carouselTimer = null;
  }
};


const reload = async () => {
  treeNavigation({
    recommend: true
  }).then(data => {
    categoryList.value = data || [];
    console.log(data, '123132');
  });

  // 获取热门新闻
  const hot_news = await pageCmsArticle({
    limit: 5,
    recommend: 1
  });
  if (hot_news) {
    hotNews.value = hot_news?.list || [];
  }

  // 获取会员之家数据
  const memberData = await pageCmsArticle({
    limit: 4,
    parentId: 4297
  });
  if (memberData) {
    memberNews.value = memberData?.list || [];
  }

  // 获取品牌建设数据
  const brandData = await pageCmsArticle({
    limit: 4,
    parentId: 4301
  });
  if (brandData) {
    brandNews.value = brandData?.list || [];
  }

  // 获取行业自律数据
  const industryData = await pageCmsArticle({
    limit: 4,
    parentId: 4300
  });
  if (industryData) {
    industryNews.value = industryData?.list || [];
  }

  // 获取协会党建数据
  const partyData = await pageCmsArticle({
    limit: 4,
    categoryId: 4310
  });
  if (partyData) {
    partyNews.value = partyData?.list || [];
  }

  // 获取名优产品数据
  const productData = await pageCmsArticle({
    limit: 8,
    categoryId: 4299
  });
  if (productData) {
    productNews.value = productData?.list || [];
  }

  // 获取广告位441数据
  try {
    const adData = await getCmsAd(441);
    if (adData && adData.status == 0) {
      bannerAd.value = adData.imageList[0];
    }
  } catch (error) {
    console.log('获取广告位441失败:', error);
  }
};

onMounted(() => {
  reload();
  // 延迟启动轮播，确保DOM已渲染
  nextTick(() => {
    setTimeout(() => {
      startProductCarousel();
    }, 1000);
  });
});

onUnmounted(() => {
  stopProductCarousel();
});
</script>

<template>
  <!-- 通知公告样式的新闻专区 -->
  <div class="news-section-wrapper">
    <div class="xl:w-screen-xl m-auto">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-carousel height="324px" class="bg-white rounded-lg overflow-hidden">
            <el-carousel-item v-for="(item,index) in hotNews" :key="index">
              <el-image :src="item.image" fit="cover" class="w-full h-full"
                        @click="navigateTo(`/detail/${item.articleId}.html`, { target: '_blank' })"/>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="16">
          <div
            class="w-full h-[324px] bg-white border-1 border-solid border-gray-200 rounded-lg overflow-hidden flex flex-col">
            <div
              class="title flex justify-between items-center bg-green-50 py-3 px-4 text-lg border-b-1 border-b-solid border-gray-200 flex-shrink-0"
            >
              <a-space class="flex items-center gap-1">

                <span
                  class="cursor-pointer transition-colors duration-200"
                  :class="{ 'active': activeCategoryId === 4264 }"
                  @click="switchCategory(4264)"
                >
                  通知公告
                </span>
                <el-divider direction="vertical"/>
                <span
                  class="cursor-pointer transition-colors duration-200"
                  :class="{ 'active': activeCategoryId === 4266 }"
                  @click="switchCategory(4266)"
                >
                  行业新闻
                </span>
                <el-divider direction="vertical"/>
                <span
                  class="cursor-pointer transition-colors duration-200"
                  :class="{ 'active': activeCategoryId === 4267 }"
                  @click="switchCategory(4267)"
                >
                  工作动态
                </span>
              </a-space>
              <a :href="`/article/${activeCategoryId}`" class="text-sm hover:text-green-600 transition-colors">更多</a>
            </div>
            <div class="flex-1 overflow-hidden">
              <NewsListSimple :categoryId="activeCategoryId" :row="6" :key="activeCategoryId"/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <!-- 其他栏目内容 -->
  <div class="other-sections-wrapper">
    <div class="xl:w-screen-xl m-auto">
      <!-- 会员之家单独一排 -->
      <el-row :gutter="20" class="mb-8">
        <!-- 名优产品(带封面图) -->
        <el-col :span="16">
          <div class="section-card product-card">
            <div class="section-header">
              <h3 class="section-title">名优产品</h3>
              <a href="/article/4299" class="more-link">更多</a>
            </div>
            <div class="section-content">
              <div class="product-carousel-container">
                <div class="product-carousel" ref="productCarousel">
                  <div v-for="(item, index) in productNews" :key="index" class="product-item">
                    <a :href="`/detail/${item.articleId}`" class="product-link">
                      <div class="product-image">
                        <el-image
                          :src="item.image || '/default-product.jpg'"
                          fit="cover"
                          class="w-full h-full"
                          :alt="item.title"
                        />
                      </div>
                      <div class="product-info">
                        <h4 class="product-title">{{ item.title }}</h4>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 协会党建 -->
        <el-col :span="8">
          <div class="section-card">
            <div class="section-header">
              <h3 class="section-title">协会党建</h3>
              <a href="/article/4310" class="more-link">更多</a>
            </div>
            <div class="section-content">
              <div class="news-list">
                <div v-for="(item, index) in partyNews" :key="index" class="news-item">
                  <a :href="`/detail/${item.articleId}`" class="news-link">
                    <span class="news-title">{{ item.title }}</span>
                    <span class="news-date">{{ formatDate(item.createTime) }}</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </el-col>

      </el-row>


      <!-- 广告位1000x125 -->
      <div v-if="bannerAd" class="ad-banner-wrapper">
        <div class="xl:w-screen-xl m-auto">
          <div class="ad-banner-container">
            <a
              :href="bannerAd.url || '#'"
              :target="bannerAd.url ? '_blank' : '_self'"
              class="ad-banner-link"
            >
              <el-image
                :src="bannerAd.url"
                :alt="bannerAd.url"
                fit="cover"
                class="ad-banner-image"
              />
            </a>
          </div>
        </div>
      </div>
      <!-- 其他三个栏目一排 -->
      <el-row :gutter="20" class="mb-8">

        <!-- 会员之家文本列表 -->
        <el-col :span="8">
          <div class="section-card">
            <div class="section-header">
              <h3 class="section-title">会员之家</h3>
              <a href="/article/4297" class="more-link">更多</a>
            </div>
            <div class="section-content">
              <div class="news-list">
                <div v-for="(item, index) in memberNews" :key="index" class="news-item">
                  <a :href="`/detail/${item.articleId}`" class="news-link">
                    <span class="news-title">{{ item.title }}</span>
                    <span class="news-date">{{ formatDate(item.createTime) }}</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 品牌建设 -->
        <el-col :span="8">
          <div class="section-card">
            <div class="section-header">
              <h3 class="section-title">品牌建设</h3>
              <a href="/article/4301" class="more-link">更多</a>
            </div>
            <div class="section-content">
              <div class="news-list">
                <div v-for="(item, index) in brandNews" :key="index" class="news-item">
                  <a :href="`/detail/${item.articleId}`" class="news-link">
                    <span class="news-title">{{ item.title }}</span>
                    <span class="news-date">{{ formatDate(item.createTime) }}</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 行业自律 -->
        <el-col :span="8">
          <div class="section-card">
            <div class="section-header">
              <h3 class="section-title">政策法规</h3>
              <a href="/article/4419" class="more-link">更多</a>
            </div>
            <div class="section-content">
              <div class="news-list">
                <div v-for="(item, index) in industryNews" :key="index" class="news-item">
                  <a :href="`/detail/${item.articleId}`" class="news-link">
                    <span class="news-title">{{ item.title }}</span>
                    <span class="news-date">{{ formatDate(item.createTime) }}</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<style scoped lang="scss">
.news-section-wrapper {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 40px 0;
  margin: 0;
}

.active {
  font-weight: bold;
  color: #1b850c;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 1px;
  }
}

.cursor-pointer {
  padding: 4px 8px;
  border-radius: 4px;
  position: relative;

  &:hover {
    background-color: rgba(27, 133, 12, 0.1);
    color: #1b850c;
  }

  &:not(.active):hover {
    font-weight: 500;
  }
}

// 轮播图样式优化
.el-carousel {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

// 新闻区域卡片样式
.bg-white {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

// 其他栏目样式
.other-sections-wrapper {
  background: #f8fafc;
  padding: 40px 0;
}

.section-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 280px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1b850c 0%, #22c55e 100%);
  color: white;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.more-link {
  color: white;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.9;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 1;
    text-decoration: underline;
  }
}

.section-content {
  flex: 1;
  padding: 16px 20px;
  overflow: hidden;
}

.news-list {
  height: 100%;
  overflow: hidden;
}

.news-item {
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }
}

.news-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;

  &:hover {
    color: #1b850c;
    background-color: rgba(27, 133, 12, 0.05);
    padding-left: 8px;
    border-radius: 4px;
    border-bottom-color: transparent;
  }
}

.news-title {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}

.news-date {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

// 产品轮播样式
.product-card {
  height: 280px;
}

.product-carousel-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.product-carousel {
  display: flex;
  gap: 16px;
  height: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */

  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
}

.product-item {
  flex: 0 0 180px; /* 固定宽度，不收缩不扩展 */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

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

.product-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.product-image {
  height: 135px; /* 4:3 比例，宽度180px对应高度135px */
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  position: relative;
}

.product-info {
  padding: 12px;
  height: calc(100% - 135px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 广告位样式
.ad-banner-wrapper {
  padding-bottom: 30px;
}

.ad-banner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ad-banner-link {
  display: block;
  width: 1000px;
  height: 125px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

.ad-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// 响应式设计
@media (max-width: 1200px) {
  .ad-banner-link {
    width: 100%;
    max-width: 1000px;
  }
}

@media (max-width: 768px) {
  .ad-banner-link {
    height: 80px;
  }

  .ad-banner-wrapper {
    padding: 15px 0;
  }
}
</style>
