<template>
  <div class="news-view-page">
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
    <div class="orb orb-3"></div>

    <section class="news-hero">
      <div class="news-hero-glow news-hero-glow-1"></div>
      <div class="news-hero-glow news-hero-glow-2"></div>
      <div class="news-shell">
        <div class="hero-content">
          <span class="hero-badge">COMPANY NEWS</span>
          <div class="hero-title-row">
            <h1>企业动态</h1>
            <button type="button" class="about-link" @click="goAbout">关于我们 →</button>
          </div>
          <p>了解开元云最新动态，把握AI行业前沿资讯，与我们一起见证智能跃迁</p>
        </div>
      </div>
    </section>

    <section class="filter-section">
      <div class="news-shell">
        <div class="filter-tabs">
          <button
            v-for="item in filterTabs"
            :key="item.value"
            type="button"
            class="filter-tab"
            :class="{ active: activeCategory === item.value }"
            @click="activeCategory = item.value"
          >
            {{ item.label }}
          </button>
        </div>
      </div>
    </section>

    <section class="featured-section">
      <div class="news-shell">
        <article v-if="featuredNews" class="news-featured">
          <div class="news-item-glow"></div>
          <span class="hover-detail">详情 <i class="el-icon-arrow-right"></i></span>
          <div class="news-featured-inner">
            <div class="news-featured-img">
              <img :src="featuredNews.img || fallbackNewsImage" :alt="featuredNews.title">
            </div>
            <div class="news-featured-body">
              <div class="news-featured-date">
                <span class="category-pill" :style="{ background: featuredNews.tagColor }">{{ featuredNews.tag }}</span>
                {{ featuredNews.date }}
              </div>
              <h2>{{ featuredNews.title }}</h2>
              <p>{{ featuredNews.desc }}</p>
            </div>
          </div>
        </article>
      </div>
    </section>

    <section class="news-list-section">
      <div class="news-shell">
        <div class="news-grid">
          <article
            v-for="(item, index) in filteredNewsList"
            :key="item.id"
            class="news-item"
            :style="{ animationDelay: `${(index + 1) * 0.08}s` }"
          >
            <div class="news-item-glow"></div>
            <span class="hover-detail">详情 <i class="el-icon-arrow-right"></i></span>
            <div class="news-item-img">
              <img :src="item.img || fallbackNewsImage" :alt="item.title">
              <div class="news-item-img-overlay"></div>
              <span class="news-item-tag" :style="{ background: item.tagColor }">{{ item.tag }}</span>
            </div>
            <div class="news-item-body">
              <div class="news-item-date">{{ item.date }}</div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </div>
          </article>
        </div>

        <div class="pagination">
          <button type="button" class="pagination-btn"><i class="el-icon-arrow-left"></i></button>
          <button type="button" class="pagination-btn active">1</button>
          <button type="button" class="pagination-btn">2</button>
          <button type="button" class="pagination-btn">3</button>
          <button type="button" class="pagination-btn"><i class="el-icon-arrow-right"></i></button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'NewsView',
  data() {
    return {
      fallbackNewsImage: require('@/assets/image/news.jpg'),
      activeCategory: 'all',
      filterTabs: [
        { label: '全部', value: 'all' },
        { label: '企业动态', value: 'company' },
        { label: '产品动态', value: 'product' },
        { label: '行业洞察', value: 'industry' },
        { label: '活动资讯', value: 'event' }
      ],
      newsList: [
        {
          id: 0,
          category: 'company',
          tag: '企业动态',
          tagColor: 'rgba(16,185,129,0.85)',
          date: '2026.6.15',
          title: '开元云随贸促会走访东盟',
          desc: '开元云科技随贸促会广西分会经贸代表团密集出访越南、老挝，深度参与中国-东盟经贸合作，以AI技术赋能区域产业升级，推动智能体工厂落地东南亚市场。',
          img: '',
          featured: true,
          content: '<p>开元云科技随贸促会广西分会经贸代表团密集出访越南、老挝，深度参与中国-东盟经贸合作。</p><p>在此次出访中，开元云向东南亚市场全面展示了AI智能体工厂的工业级交付能力，涵盖智慧工程、智能运维、能源管理等多个核心领域的技术方案。</p><p>此次东盟之行标志着开元云正式开启东南亚市场战略布局，未来将持续深化与东盟各国在AI领域的合作，以技术赋能区域产业升级。</p>'
        },
        {
          id: 1,
          category: 'company',
          tag: '企业动态',
          tagColor: 'rgba(16,185,129,0.85)',
          date: '2026.05.17',
          title: '开元云荣登福布斯中国人工智能商业落地示范企业',
          desc: '凭借AI智能体工厂的工业级交付能力与央国企标杆案例，开元云入选福布斯中国人工智能商业落地示范企业，成为行业AI落地标杆。',
          content: '<p>凭借AI智能体工厂的工业级交付能力与央国企标杆案例，开元云入选福布斯中国人工智能商业落地示范企业。</p><p>此次评选从技术实力、商业落地、行业影响力等多维度综合评估，开元云凭借智能体工厂产品创新力成功跻身示范企业榜单。</p>'
        },
        {
          id: 2,
          category: 'product',
          tag: '产品动态',
          tagColor: 'rgba(99,102,241,0.85)',
          date: '2026.05.10',
          title: '智能体工厂2.0正式发布，全面升级AI交付能力',
          desc: '开元云智能体工厂2.0版本重磅上线，新增多智能体协同编排、可视化工作流设计等核心功能，AI应用交付效率提升300%。',
          content: '<p>开元云智能体工厂2.0版本重磅上线，新增多智能体协同编排、可视化工作流设计等核心功能。</p><p>2.0版本支持复杂业务场景的智能体协作、拖拽式工作流构建和增强的文档智能处理能力。</p>'
        },
        {
          id: 3,
          category: 'industry',
          tag: '行业洞察',
          tagColor: 'rgba(13,148,136,0.85)',
          date: '2026.04.28',
          title: '2026年AI+能源行业趋势：从预测性维护到智能调度',
          desc: 'AI技术正在重塑能源行业，从发电设备的预测性维护到电网智能调度，开元云深度解析行业变革趋势与落地实践。',
          content: '<p>AI技术正在重塑能源行业，从发电设备的预测性维护到电网智能调度，行业正在进入智能化深水区。</p><p>基于机器视觉和传感器数据融合的预测性维护方案已在火电、风电领域广泛应用。</p>'
        },
        {
          id: 4,
          category: 'event',
          tag: '活动资讯',
          tagColor: 'rgba(245,158,11,0.85)',
          date: '2026.04.15',
          title: '开元云亮相2026中国人工智能大会',
          desc: '开元云受邀出席2026中国人工智能大会，现场展示智能体工厂最新技术成果，与行业领袖共话AI产业化新路径。',
          content: '<p>开元云受邀出席2026中国人工智能大会，现场展示智能体工厂最新技术成果。</p><p>在大会主论坛上，开元云系统阐述了AI技术从实验创新到工业级交付的方法论。</p>'
        },
        {
          id: 5,
          category: 'company',
          tag: '企业动态',
          tagColor: 'rgba(16,185,129,0.85)',
          date: '2026.03.22',
          title: '开元云与南宁林业局达成智慧林业战略合作',
          desc: '开元云携手南宁林业局打造林业空间采伐智审系统，融合GIS空间分析、卫星遥感等多源数据，审批周期从数天压缩至分钟级。',
          img: '',
          content: '<p>开元云携手南宁林业局打造林业空间采伐智审系统，融合GIS空间分析、卫星遥感等多源数据。</p><p>项目上线后，采伐审批效率显著提升，成为智慧林业标杆案例。</p>'
        },
        {
          id: 6,
          category: 'product',
          tag: '产品动态',
          tagColor: 'rgba(236,72,153,0.85)',
          date: '2026.03.08',
          title: '机器视觉检测平台升级，支持工业质检全场景覆盖',
          desc: '开元云机器视觉检测平台全面升级，新增缺陷分类、尺寸测量、表面检测三大能力模块，覆盖制造业全场景质检需求。',
          content: '<p>开元云机器视觉检测平台全面升级，新增缺陷分类、尺寸测量、表面检测三大能力模块。</p><p>该平台已在汽车零部件、3C电子、半导体封装等行业完成部署。</p>'
        },
        {
          id: 7,
          category: 'industry',
          tag: '行业洞察',
          tagColor: 'rgba(37,99,235,0.85)',
          date: '2026.02.20',
          title: 'AI+教育：大模型如何重构个性化学习路径',
          desc: '从知识图谱构建到学习路径智能推荐，大模型正在从根本上改变教育模式。开元云分享AI+教育的最新落地实践与思考。',
          content: '<p>从知识图谱构建到学习路径智能推荐，大模型正在从根本上改变教育模式。</p><p>基于大模型的自适应学习系统可以实时评估学习者知识掌握程度，动态调整学习路径。</p>'
        },
        {
          id: 8,
          category: 'event',
          tag: '活动资讯',
          tagColor: 'rgba(124,58,237,0.85)',
          date: '2026.02.05',
          title: '开元云荣获2025年度AI创新企业TOP50',
          desc: '在2025年度人工智能创新企业评选中，开元云凭借卓越的技术创新能力和丰富的行业落地经验，成功入选AI创新企业TOP50。',
          content: '<p>在2025年度人工智能创新企业评选中，开元云凭借卓越的技术创新能力和丰富的行业落地经验成功入选。</p>'
        },
        {
          id: 9,
          category: 'company',
          tag: '企业动态',
          tagColor: 'rgba(234,88,12,0.85)',
          date: '2026.01.18',
          title: '开元云完成B轮融资，加速AI智能体产业布局',
          desc: '开元云科技宣布完成B轮融资，融资金额将用于加速AI智能体工厂产品研发、行业解决方案深化及海外市场拓展。',
          content: '<p>开元云科技宣布完成B轮融资，融资金额将用于加速AI智能体工厂产品研发、行业解决方案深化及海外市场拓展。</p>'
        }
      ]
    }
  },
  computed: {
    featuredNews() {
      return this.newsList.find(item => item.featured)
    },
    filteredNewsList() {
      return this.newsList.filter(item => !item.featured && (this.activeCategory === 'all' || item.category === this.activeCategory))
    }
  },
  methods: {
    goAbout() {
      this.$router.push('/homePage/about')
    }
  }
}
</script>

<style scoped lang="less">
@import url('../../../assets/less/news/news.less');
</style>
