<template>
  <div class="platform-container">
    <!-- 顶部导航栏 -->
<!--    <div class="header">
      <div class="header-content">
        <div class="header-left">
          <div class="logo-section">
            <img src="/img/psp/productCenter/logo.png" alt="Logo" class="logo"/>
            <span class="platform-title">公共服务平台</span>
          </div>
        </div>

        <div class="header-nav">
          <div
            v-for="item in navItems"
            :key="item.key"
            class="nav-item"
            :class="{ active: activeNav === item.key }"
            @click="activeNav = item.key"
          >
            <img :src="item.icon" :alt="item.label" class="nav-icon"/>
            <span class="nav-text">{{ item.label }}</span>
          </div>
        </div>

        <div class="header-right">
          <div class="search-box">
            <input
              v-model="searchKeyword"
              type="text"
              placeholder="输入关键词搜索"
              class="search-input"
              @keyup.enter="handleSearch"
            />
            <button class="search-btn" @click="handleSearch">
              <i class="el-icon-search"></i>
            </button>
          </div>
          <div class="user-avatar">
            <img :src="$store.state.user.avatar" alt="用户头像"/>
          </div>
        </div>
      </div>
    </div>-->

    <!-- 使用导航栏组件 -->
    <NavBar
      :active-nav="activeNav"
      :search-keyword.sync="searchKeyword"
      @nav-change="handleNavChange"
    />

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧分类菜单 -->
      <div class="sidebar">
        <div
          v-for="category in categories"
          :key="category.key"
          class="category-item"
          :class="{ active: activeCategory === category.key }"
          @click="activeCategory = category.key"
        >
          {{ category.label }}
        </div>
      </div>

      <!-- 右侧服务卡片区域 -->
      <div class="content-area">
        <div class="services-grid">
          <div
            v-for="service in filteredServices"
            :key="service.id"
            class="service-card"
            @mouseenter="handleCardHover(service.id)"
            @mouseleave="handleCardLeave"
          >
            <div class="card-image">
              <img :src="apiBase + service.image" :alt="service.title"/>
            </div>
            <div class="card-content">
              <h3 class="card-title">{{ service.title }}</h3>
              <div class="card-actions">
                <button
                  class="btn btn-primary"
                  @click="handleDemo(service)"
                >
                  访问演示
                </button>
                <button
                  class="btn btn-outline"
                  @click="handleDetail(service)"
                >
                  查看详情
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入导航栏组件
import NavBar from '@/views/psp/navBar.vue'

export default {
  name: 'PlatformIndex',
  components: {
    NavBar
  },
  data() {
    return {
      activeNav: 'products',
      activeCategory: 'all',
      searchKeyword: '',
      hoveredCard: null,
      apiBase: process.env.VUE_APP_BASE_API,
      navItems: [
        { key: 'products',label: '产品中心', icon: '/img/psp/productCenter/products.png' },
        { key: 'components', label: '公共组件', icon: '/img/psp/productCenter/components.png' },
        { key: 'materials', label: '宣传物料', icon: '/img/psp/productCenter/materials.png'},
        { key: 'docs', label: '文档中心', icon: '/img/psp/productCenter/docs.png'}
      ],
      categories: [
        {key: 'all', label: '全部'},
        {key: 'smart', label: '智慧基建'},
        {key: 'system', label: '智慧后勤'},
        {key: 'safety', label: '数智安监'}
      ],
      services: [
        {
          id: 1,
          title: '绿智食堂',
          image: '/profile/avatar/2025/09/03/001_20250903132300A001.JPG',
          category: 'smart',
          description: '智能化食堂管理系统'
        },
        {
          id: 2,
          title: '智能机具管理系统',
          image: '/placeholder.svg?height=200&width=300',
          category: 'system',
          description: '设备智能化管理平台'
        },
        {
          id: 3,
          title: '智慧楼宇',
          image: '/placeholder.svg?height=200&width=300',
          category: 'smart',
          description: '楼宇智能化控制系统'
        },
        {
          id: 4,
          title: '产业工人实名制',
          image: '/placeholder.svg?height=200&width=300',
          category: 'system',
          description: '工人身份认证管理'
        },
        {
          id: 5,
          title: '安全质量智慧决策中心',
          image: '/placeholder.svg?height=200&width=300',
          category: 'safety',
          description: '安全质量智能决策平台'
        },
        {
          id: 6,
          title: '智慧工地',
          image: '/placeholder.svg?height=200&width=300',
          category: 'smart',
          description: '工地智能化管理系统'
        },
        {
          id: 7,
          title: 'VR警示教育室',
          image: '/placeholder.svg?height=200&width=300',
          category: 'safety',
          description: 'VR安全教育培训系统'
        },
        {
          id: 8,
          title: '应急智中心建设',
          image: '/placeholder.svg?height=200&width=300',
          category: 'safety',
          description: '应急响应智能化中心'
        }
      ]
    }
  },
  computed: {
    filteredServices() {
      let filtered = this.services

      // 按分类筛选
      if (this.activeCategory !== 'all') {
        filtered = filtered.filter(service => service.category === this.activeCategory)
      }

      // 按搜索关键词筛选
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(service =>
          service.title.toLowerCase().includes(keyword) ||
          service.description.toLowerCase().includes(keyword)
        )
      }

      return filtered
    }
  },
  methods: {
    handleNavChange(navKey) {
      this.activeNav = navKey
      // 可以根据导航项做页面跳转或其他操作
    },

    handleDemo(service) {
      console.log('访问演示:', service.title)
      // 这里可以跳转到演示页面
      this.$message.success(`正在打开 ${service.title} 演示`)
    },
    // 在 index.vue 中的 handleDetail 方法
    handleDetail(service) {
      console.log('查看详情:', service.title)
      this.$router.push({
        name: 'ProductDetail',
        params: { id: service.id }
      })
    },
    handleCardHover(serviceId) {
      this.hoveredCard = serviceId
    },
    handleCardLeave() {
      this.hoveredCard = null
    }
  }
}
</script>

<style scoped>
.platform-container {
  height: 100%;
}

/* 顶部导航栏 */
.header {
  background-image: url("/img/psp/productCenter/topbg.png");
  color: white;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100vw;
  margin: 0 auto;
  padding: 12px 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.platform-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.header-nav {
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

.nav-item {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.nav-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 10px;
  flex-shrink: 0;
}

.nav-text {
  white-space: nowrap;
}

.nav-item:hover,
.nav-item.active {
  background-color: rgba(255, 255, 255, 0.15);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 6px 12px;
}

.search-input {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 14px;
  width: 200px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
}

.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* 主体内容 */
.main-content {
  display: flex;
  max-width: 95%;
  margin: 0 auto;
  padding: 24px 20px;
  gap: 24px;
}

/* 左侧分类菜单 */
.sidebar {
  width: 160px;
  flex-shrink: 0;
}

.category-item {
  padding: 12px 16px;
  margin-bottom: 8px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #666;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.category-item:hover {
  background-color: #f0f7ff;
  color: #4a90e2;
}

.category-item.active {
  background-color: #4a90e2;
  color: white;
}

/* 服务卡片区域 */
.content-area {
  flex: 1;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.service-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%; /* 让卡片高度撑满 grid 单元格 */
}

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

.card-image {
  height: 180px; /* 固定高度，可根据设计调整 */
  overflow: hidden;
  background-color: #f8f9fa; /* 图片加载前的占位背景 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
  transition: transform 0.3s ease;
}

.service-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  line-height: 1.4;
  text-align: center;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  flex: 1;
  text-align: center;
}

.btn-primary {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.btn-primary:hover {
  background-color: #357abd;
  border-color: #357abd;
}

.btn-outline {
  background-color: transparent;
  color: #4a90e2;
  border-color: #4a90e2;
}

.btn-outline:hover {
  background-color: #4a90e2;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .header-nav {
    gap: 16px;
  }

  .main-content {
    flex-direction: column;
    padding: 16px;
  }

  .sidebar {
    width: 100%;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .search-input {
    width: 150px;
  }
}
</style>
