<!-- src/views/ProductsDetail.vue -->
<template>
  <div class="products-page">
    <!-- 顶部导航栏 -->
    <HeaderComponent />

    <!-- 页面内容 -->
    <main class="products-content">
      <!-- 头部 Banner 区域 -->
      <section class="products-banner">
        <div class="banner-wrapper">
          <h1 class="banner-title">多元布局，科技赋能，满足全行业设备与材料供应需求</h1>
          <p class="banner-description">
            依托多元业务矩阵与合规经营体系，我们以专业品质保障产品与服务的可靠、适配与高效。从设备研发制造到材料加工销售，从智能化设计到全球贸易，覆盖多场景需求，提供一站式解决方案。
          </p>
        </div>
      </section>

      <!-- 产品分类筛选 -->
      <section class="category-filter">
        <div class="filter-wrapper">
          <span class="filter-label">按分类筛选</span>
          <div class="filter-tags">
            <span
              v-for="(category, index) in categories"
              :key="index"
              :class="['filter-tag', { active: currentCategory === category }]"
              @click="selectCategory(category)"
            >
              {{ category }}
            </span>
          </div>
        </div>
      </section>

      <!-- 产品展示区域 -->
      <section class="products-grid">
        <div class="products-wrapper">
          <div class="product-card" v-for="(product, index) in filteredProducts" :key="product.name">
            <div class="product-image-section">
              <el-carousel
                height="340px"
                indicator-position="outside"
                :autoplay="false"
                :interval="3000"
                trigger="click"
                arrow="always"
              >
                <el-carousel-item v-for="(img, imgIndex) in product.images" :key="imgIndex">
                  <img :src="img" :alt="product.name" class="product-img" />
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>

              <div class="product-tags">
                <span class="tag" v-for="(tag, tagIndex) in product.tags" :key="tagIndex">{{ tag }}</span>
              </div>

              <p class="product-description">{{ product.description }}</p>

              <div class="product-specs">
                <div class="specs-header">
                  <span class="specs-title">基础配置</span>
                  <span class="specs-subtitle">BASIC CONFIGURATION</span>
                </div>
                <div class="spec-row" v-for="(spec, specIndex) in getVisibleSpecs(product, product.name)" :key="specIndex">
                  <div class="spec-label-cn">{{ spec.label }}</div>
                  <div class="spec-label-en">{{ spec.enLabel }}</div>
                  <div class="spec-value-cn">{{ spec.value }}</div>
                  <div class="spec-value-en">{{ spec.valueEn || '' }}</div>
                </div>
                <div class="show-more-btn" v-if="product.specs.length > 3" @click="toggleSpecs(product.name)">
                  <span>{{ expandedIndices.has(product.name) ? '收起' : '查看更多' }}</span>
                  <el-icon><ArrowDown v-if="!expandedIndices.has(product.name)" /><ArrowUp v-else /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部 Footer -->
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import HeaderComponent from '@/components/HeaderComponent.vue'
import FooterComponent from '@/components/FooterComponent.vue'

import productImg1 from '@/assets/images/img1-1.png'
import productImg2 from '@/assets/images/img1-2.png'
import productImg3 from '@/assets/images/img2-1.png'
import productImg4 from '@/assets/images/img2-2.png'
import productImg5 from '@/assets/images/img3-1.png'
import productImg6 from '@/assets/images/img3-2.jpg'
import productImg7 from '@/assets/images/img4-1.png'
import productImg8 from '@/assets/images/img4-2.png'
import productImg9 from '@/assets/images/img5-1.png'
import productImg10 from '@/assets/images/img5-2.png'
import productImg11 from '@/assets/images/img6-1.png'
import productImg12 from '@/assets/images/img6-2.png'
import productImg13 from '@/assets/images/img7-1.png'
import productImg14 from '@/assets/images/img7-2.png'
import productImg15 from '@/assets/images/img8-1.png'
import productImg16 from '@/assets/images/img8-2.png'
import productImg17 from '@/assets/images/img9-1.png'
import productImg18 from '@/assets/images/img9-2.png'
import productImg19 from '@/assets/images/img10-1.png'
import productImg20 from '@/assets/images/img11-1.png'
import productImg21 from '@/assets/images/img12-1.png'

const categories = [
  '全部产品',
  '电动自行车系列',
  '电动摩托车系列',
  '民用三轮车系列',
  '小型农机车系列',
]

const currentCategory = ref('全部产品')

const selectCategory = (category: string) => {
  currentCategory.value = category
}

const expandedIndices = ref<Set<string>>(new Set())

const getVisibleSpecs = (product: any, productName: string) => {
  if (expandedIndices.value.has(productName)) {
    return product.specs
  }
  return product.specs.slice(0, 3)
}

const toggleSpecs = (productName: string) => {
  if (expandedIndices.value.has(productName)) {
    expandedIndices.value.delete(productName)
  } else {
    expandedIndices.value.add(productName)
  }
}

const products = ref([
  {
    name: '长虹',
    category: '电动自行车系列',
    images: [productImg1, productImg2],
    tags: [ '锂电铅酸', '长续航'],
    description: '长虹智能电动车 | 双电池可选 液压减震 碟刹安全。',
    specs: [
      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
      { value: '3.0-10, 铁轮真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
      { value: '液压前叉、7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
      { value: '透镜大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
      { value: '1790*680*1060mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1790*680*1060mm' }
    ]
  },
  {
    name: 'MU5PRO',
    category: '电动自行车系列',
    images: [productImg3, productImg4],
    tags: [ '锂电铅酸','大容量电池'],
    description: 'MU5PRO 长续航电动车 | 1000W 动力 90-100KM 续航。',
    specs: [
      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
      { value: '3.0-12中颗粒, 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
      { value: '液压前叉，莲花座7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
      { value: '大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
      { value: '1940*670*1130mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1940*670*1130mm' }
    ]
  },
  {
    name: '超级骑士',
    category: '电动自行车系列',
    images: [productImg5, productImg6],
    tags: ['独立大容量电池', '前后碟刹', '智能解锁'],
    description: '超级骑士 通勤电动车 | 1200W 动力 NFC 智能解锁。',
    specs: [
      { value: '锂电60V24AH', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
      { value: '1200W', label: '电机', enLabel: 'MOTOR', valueEn: '800W sine wave motor' },
      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: 'Dual 18-channel controller' },
      { value: '轮胎90/90-12CY610 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: 'Front and rear 400-10 vacuum tires' },
      { value: '液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Independent suspension' },
      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front and rear disc brakes' },
      { value: 'NFC', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
      { value: '凸镜大灯;尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
      { value: '1850*670*1150mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1850*670*1150mm' }
    ]
  },
  {
    name: '儿童载1.8',
    category: '民用三轮车系列',
    images: [productImg7, productImg8],
    tags: ['民用三轮', '重载', '嘉陵电控', '短途运输'],
    description: 'JL重载1.8民用三轮车，载重能力强，配备嘉陵磁浮电控系统，适合短途运输。',
    specs: [
      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '3300*1380*1415', valueEn: '3300*1380*1415mm' },
      { label: '动力系统', enLabel: 'POWER SYSTEM', value: '嘉陵磁浮电控系统1200W方壳', valueEn: 'Jialing maglev electronic control system 1200W' },
      { label: '轮胎规格', enLabel: 'TIRE SPEC', value: '前400-12后450-12钢丝胎', valueEn: 'Front 400-12 Rear 450-12 steel wire tire' },
      { label: '减震系统', enLabel: 'SHOCK SYSTEM', value: '43外簧减震', valueEn: '43 external spring shock absorber' },
      { label: '后桥规格', enLabel: 'REAR AXLE', value: '全悬浮变档180', valueEn: 'Full floating gear shift 180' }
    ]
  },
  {
    name: '茉莉V1',
    category: '民用三轮车系列',
    images: [productImg9, productImg10],
    tags: ['民用三轮', '独立悬挂', '前后碟刹', '倒车影像'],
    description: '茉莉V1民用三轮车，时尚设计，独立悬挂，前后碟刹，配备倒车影像和暖风，驾乘舒适。',
    specs: [
      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2750X1225X1670mm', valueEn: '2750X1225X1670mm' },
      { label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
      { label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
      { label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
      { label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
      { label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
      { label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
    ]
  },
  {
    name: '茉莉V2',
    category: '民用三轮车系列',
    images: [productImg11, productImg12],
    tags: ['民用三轮', '小巧', '独立悬挂', '城市代步'],
    description: '茉莉V2民用三轮车，小巧灵活，同样配备独立悬挂和暖风，适合城市代步。',
    specs: [
      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2410X1225X1670mm', valueEn: '2410X1225X1670mm' },
      { label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
      { label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
      { label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
      { label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
      { label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
      { label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
    ]
  },
  {
    name: '雅迪冠能 IF8',
    category: '电动摩托车系列',
    images: [productImg13, productImg14],
    tags: ['石墨烯电池', '无刷电机', '前后碟刹', '长续航'],
    description: '雅迪冠能 IF8 电动摩托车 | 石墨烯三代 PLUS 电池 1200W 无刷电机 续航约 85km。',
    specs: [
      { label: '电池', enLabel: 'BATTERY', value: 'TTFAR 石墨烯三代 PLUS 铅酸电池 72V23Ah（可选锂电版本）', valueEn: 'TTFAR Graphene 3rd PLUS lead-acid battery 72V23Ah (lithium version optional)' },
      { label: '电机', enLabel: 'MOTOR', value: '1200W 直流无刷电机', valueEn: '1200W DC brushless motor' },
      { label: '控制器', enLabel: 'CONTROLLER', value: '雅迪 TTFAR 智能控制器', valueEn: 'Yadea TTFAR intelligent controller' },
      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉 + 后置双减震', valueEn: 'Hydraulic front fork + rear dual shock absorber' },
      { label: '刹车', enLabel: 'BRAKE', value: '前后双碟刹', valueEn: 'Front and rear disc brakes' },
      { label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航约 85km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage about 85km' },
      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '高亮透镜大灯 + LED 尾灯 + 转向灯', valueEn: 'High-brightness lens headlights + LED taillights + turn signals' },
      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
    ]
  },
  {
    name: '锋速幻影',
    category: '电动摩托车系列',
    images: [productImg15, productImg16],
    tags: ['双电池可选', '高性能电机', '前后碟刹', '长续航'],
    description: '锋速幻影 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
    specs: [
      { label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah（可选）', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah (optional)' },
      { label: '电机', enLabel: 'MOTOR', value: '1000W 高性能直流无刷电机', valueEn: '1000W high-performance DC brushless motor' },
      { label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、后置液压减震', valueEn: 'Hydraulic front fork + rear hydraulic shock absorber' },
      { label: '刹车', enLabel: 'BRAKE', value: '前 / 后碟刹', valueEn: 'Front and rear disc brakes' },
      { label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航 90-100Km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage 90-100Km' },
      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、LED 转向灯', valueEn: 'Lens headlights, LED taillights, LED turn signals' },
      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
    ]
  },
  {
    name: '暗影骑士',
    category: '电动摩托车系列',
    images: [productImg17, productImg18],
    tags: ['双电池可选', '无刷电机', '前后碟刹', '长续航'],
    description: '暗影骑士 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
    specs: [
      { label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah' },
      { label: '电机', enLabel: 'MOTOR', value: '1000W 高性能无刷电机', valueEn: '1000W high-performance brushless motor' },
      { label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 铁轮真空胎', valueEn: '3.0-10 Iron Wheel Vacuum Tire' },
      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、7.0*290 液压减震', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
      { label: '刹车', enLabel: 'BRAKE', value: '前/后碟刹', valueEn: 'Front and rear disc brakes' },
      { label: '仪表', enLabel: 'DASHBOARD', value: '中速平表里程 90-100Km', valueEn: 'Medium speed flat road mileage 90-100km' },
      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、动态流光转向灯', valueEn: 'Lens headlights, LED taillights, dynamic flow turn signals' },
      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
    ]
  },
  {
    name: '动力王 6090 拖拉机',
    category: '小型农机车系列',
    images: [productImg19],
    tags: ['300 马力', '四驱动力', '液压系统', '智能导航'],
    description: '动力王 6090 拖拉机 | 300HP 六缸涡轮增压发动机 PowerShift 变速箱 全液压制动。',
    specs: [
      { label: '发动机', enLabel: 'ENGINE', value: 'PowerTech™ PVS 6090 6 缸 9.0L 增压式帕四发动机', valueEn: '6-cylinder 9.0L H pressure Commc Engine' },
      { label: '标定功率', enLabel: 'POWER RATING', value: '300HP / 220.5kW', valueEn: '300HP / 220.5kW' },
      { label: '净功率', enLabel: 'NET POWER', value: '326.3HP / 240kW', valueEn: '326.3HP / 240kW' },
      { label: '变速箱', enLabel: 'TRANSMISSION', value: '16×4 全动力换挡（PowerShift）', valueEn: '16×4 Full PowerShift Transmission' },
      { label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速；187.5kW 输出功率', valueEn: '1000r/min Stand 187.5kW Output' },
      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '4 组电控液压输出阀；最大提升力 288.3kN', valueEn: '4 Electro-Hydraulic Valves; Max. Lift 288.3kN' },
      { label: '轮胎', enLabel: 'TIRES', value: '标配：600/70R30（前）/650/85R38（后）选装：420/85R34/480/80R50 双后轮', valueEn: 'Standard: 600/70 (R) 650/85R38 (R) Optional: 420/85R34/480/80 Rear' },
      { label: '悬挂', enLabel: 'HITCH', value: '后置 3 类 / 4N 三点悬挂', valueEn: 'Category 3/4N R point Hitch' },
      { label: '制动', enLabel: 'BRAKE', value: '全液压湿式制动系统', valueEn: 'Full Hydraulic Wet System' },
      { label: '驾驶室', enLabel: 'CAB', value: '1750 系列豪华空气悬浮驾驶，冷暖空调', valueEn: '1750 Series Air S Premium Cab, Air Conditioning' },
      { label: '导航', enLabel: 'NAVIGATION', value: 'CommandCenter 中文触屏显示；ATI 自动驾驶', valueEn: 'CommandCenter Display, ATI Auto' },
      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '6613×3012-3351×3403mm', valueEn: '6613×3012-3351×3403mm' }
    ]
  },
  {
    name: '挑战者 MT665D 拖拉机',
    category: '小型农机车系列',
    images: [productImg20],
    tags: ['340 马力', '无级变速', '全液压制动', '全景驾驶室'],
    description: '挑战者 MT665D 农用拖拉机 | 340HP 六缸柴油发动机 CVT 无级变速 全液压湿式制动。',
    specs: [
      { label: '发动机', enLabel: 'ENGINE', value: 'AGCO Power 8.4L 直列 6 缸柴油发动机', valueEn: 'AGCO Power 8.4L Inline 6-cylinder Diesel Engine' },
      { label: '额定功率', enLabel: 'POWER RATING', value: '340HP / 253.5kW（发动机总功率）', valueEn: '340HP / 253.5kW (Engine Gross Power)' },
      { label: '动力输出轴功率', enLabel: 'PTO POWER', value: '290HP / 216.3kW', valueEn: '290HP / 216.3kW' },
      { label: '变速箱', enLabel: 'TRANSMISSION', value: '无级变速（CVT）双机械挡位', valueEn: 'Continuously Variable Transmission (CVT) with 2 Mechanical Ranges' },
      { label: '动力输出轴', enLabel: 'PTO', value: '标准 1000r/min，支持双速调节', valueEn: 'Standard 1000r/min, with two-speed adjustment' },
      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '中心闭心式液压系统，流量 160L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate 160L/min' },
      { label: '轮胎', enLabel: 'TIRES', value: '标配：前 480/70R34，后 520/85R46 支持双轮胎选装', valueEn: 'Standard: Front 480/70R34, Rear 520/85R46 Dual Rear Wheels Optional' },
      { label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥85kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥85kN' },
      { label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
      { label: '驾驶室', enLabel: 'CAB', value: '全景玻璃悬浮驾驶室，配备冷暖空调', valueEn: 'Panoramic Glass Suspended Cab with Air Conditioning System' },
      { label: '燃油箱', enLabel: 'FUEL TANK', value: '约 632L 大容量油箱', valueEn: '632L Large Capacity Fuel Tank' },
      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 5500×2700×3200mm', valueEn: 'Approx. 5500×2700×3200mm' },
      { label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 11500kg', valueEn: 'Approx. 11500kg Operating Weight' }
    ]
  },
  {
    name: '雷霆 300HP 拖拉机',
    category: '小型农机车系列',
    images: [productImg21],
    tags: ['300 马力', '六缸发动机', '全动力换挡', '全液压制动'],
    description: '雷霆 300HP 拖拉机 | 六缸高压共轨柴油发动机 全动力换挡变速箱 全液压湿式制动。',
    specs: [
      { label: '发动机', enLabel: 'ENGINE', value: '直列六缸高压共轨柴油发动机', valueEn: 'Inline 6-cylinder High-pressure Common Rail Diesel Engine' },
      { label: '额定功率', enLabel: 'POWER RATING', value: '220kW / 约 300HP', valueEn: '220kW / Approx. 300HP Rated Power' },
      { label: '变速箱', enLabel: 'TRANSMISSION', value: '全动力换挡变速箱', valueEn: 'Full PowerShift Transmission' },
      { label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速', valueEn: '1000r/min Standard Speed PTO' },
      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '闭心式液压系统，流量 ≥150L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate ≥150L/min' },
      { label: '轮胎', enLabel: 'TIRES', value: '标配：前 540/65R30，后 650/85R38，支持双后轮', valueEn: 'Standard: Front 540/65R30, Rear 650/85R38, Dual Rear Wheels Optional' },
      { label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥90kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥90kN' },
      { label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
      { label: '驾驶室', enLabel: 'CAB', value: '全景悬浮驾驶室，配备冷暖空调与减震座椅', valueEn: 'Panoramic Suspended Cab with Air Conditioning and Air Seat' },
      { label: '燃油箱', enLabel: 'FUEL TANK', value: '约 500L 大容量油箱', valueEn: 'Approx. 500L Large Capacity Fuel Tank' },
      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 6200×3000×3300mm', valueEn: 'Approx. 6200×3000×3300mm' },
      { label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 10500kg', valueEn: 'Approx. 10500kg Operating Weight' }
    ]
  },
])

const filteredProducts = computed(() => {
  if (currentCategory.value === '全部产品') {
    return products.value
  }
  return products.value.filter(product => product.category === currentCategory.value)
})
</script>

<style scoped lang="less">
.products-page {
  width: 100%;
  min-height: 100vh;
  background: #f8f9fa;
}

.products-content {
  width: 100%;
  background: #f8f9fa;
  padding-top: 70px;
}

.products-banner {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  padding: 80px 0 60px;
  text-align: center;

  .banner-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
  }

  .banner-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.4;
  }

  .banner-description {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

.category-filter {
  background: #fff;
  padding: 24px 0;
  border-bottom: 1px solid #e8e8e8;

  .filter-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .filter-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
  }

  .filter-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .filter-tag {
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
    background: #f5f5f5;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;

    &:hover {
      background: #e8e8e8;
      color: #1a1a1a;
    }

    &.active {
      background: #1a1a1a;
      color: #fff;
    }
  }
}

.products-grid {
  padding: 40px 0 80px;

  .products-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

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

  .product-image-section {
    width: 100%;
    height: 340px;
    background: #f5f5f5;
    overflow: hidden;
    position: relative;

    .product-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .product-info {
    padding: 20px;

    .product-name {
      font-size: 18px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 12px;
    }

    .product-tags {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;

      .tag {
        padding: 4px 12px;
        font-size: 12px;
        color: #666;
        background: #f5f5f5;
        border-radius: 12px;
      }
    }

    .product-description {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
      margin: 0 0 20px;
    }

    .product-specs {
      .specs-header {
        background: #ff5722;
        padding: 10px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .specs-title {
          font-size: 16px;
          font-weight: 700;
          color: #fff;
        }

        .specs-subtitle {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.9);
        }
      }

      .spec-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
        align-items: flex-start;
        border-bottom: 1px solid #f0f0f0;

        &:nth-child(even) {
          background: #fafafa;
        }

        .spec-label-cn {
          font-size: 14px;
          font-weight: 600;
          color: #1a1a1a;
          min-width: 80px;
          flex-shrink: 0;
        }

        .spec-label-en {
          font-size: 12px;
          color: #999;
          min-width: 120px;
          flex-shrink: 0;
        }

        .spec-value-cn {
          font-size: 14px;
          color: #333;
          flex: 1;
          word-break: break-all;
          line-height: 1.5;
        }

        .spec-value-en {
          font-size: 12px;
          color: #666;
          flex: 1;
          word-break: break-all;
          line-height: 1.5;
          text-align: left;
        }
      }

      .show-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 12px;
        color: #1890ff;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: #f0f8ff;
        }

        .el-icon {
          font-size: 16px;
        }
      }
    }
  }
}

@media (max-width: 1400px) {
  .products-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .products-wrapper {
    grid-template-columns: 1fr !important;
  }

  .banner-wrapper,
  .filter-wrapper,
  .products-wrapper {
    padding: 0 24px;
  }

  .banner-title {
    font-size: 28px;
  }
}
</style>