<template>
  <div class="py-16 bg-white dark:bg-gray-900 min-h-screen flex items-stretch">
    <div class="container w-full">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-900 p-8 w-full" v-if="product">
        <h1 class="text-3xl font-bold text-primary dark:text-blue-400 mb-4">{{ product.title }}</h1>
        <div class="mb-4">
          <span
            class="inline-block bg-primary/10 dark:bg-blue-500/20 text-primary dark:text-blue-300 px-3 py-1 rounded-full text-sm mr-2"
            v-for="tag in product.tags"
            :key="tag"
          >{{ tag }}</span>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-lg mb-6">{{ product.description }}</p>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-2 text-primary dark:text-blue-400">产品用途</h2>
          <ul class="list-disc pl-6 text-gray-600 dark:text-gray-400">
            <li v-for="use in product.uses" :key="use">{{ use }}</li>
          </ul>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-2 text-primary dark:text-blue-400">产品价格</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-2">{{ product.price }}</p>
          <NuxtLink
            :to="product.priceUrl"
            target="_blank"
            class="inline-block mt-2 px-4 py-2 bg-primary dark:bg-blue-600 text-white rounded hover:bg-primary/90 dark:hover:bg-blue-700 transition"
          >
            产品价格查询
          </NuxtLink>
        </div>
        <!-- Nuxt Content 板块：产品详细介绍 -->
        <div class="mt-10">
          <ContentDoc :path="`tag/${tag}`" class="prose dark:prose-invert max-w-none" />
        </div>
        <NuxtLink to="/contact" class="inline-block mt-8 px-6 py-2 bg-primary dark:bg-blue-600 text-white rounded hover:bg-primary/90 dark:hover:bg-blue-700 transition">立即咨询</NuxtLink>
      </div>
      <div v-else class="text-center text-gray-500 dark:text-gray-400 text-xl py-20">未找到该产品</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed } from 'vue'
const route = useRoute()
const tag = computed(() => {
  const t = route.params.tag
  return Array.isArray(t) ? t[0] : t
})

const products: Record<string, any> = {
  ec2: {
    title: 'EC2 云服务器',
    description: 'EC2 云服务器为企业和开发者提供高性能、弹性可扩展的计算资源，支持多种操作系统和实例类型，满足不同业务需求。',
    tags: ['云服务器', '弹性伸缩', '安全'],
    uses: [
      '网站和应用托管',
      '高性能计算任务',
      '弹性扩展的业务系统',
      '大数据分析与处理'
    ],
    price: '按需计费，最低￥0.05/小时，支持包年包月和预留实例优惠',
    priceUrl: 'https://aws.amazon.com/cn/ec2/pricing/'
  },
  s3: {
    title: 'S3 对象存储',
    description: 'S3 对象存储为企业提供安全、可靠、可扩展的数据存储服务，适用于备份、归档、静态网站托管等多种场景。',
    tags: ['对象存储', '安全', '大数据'],
    uses: [
      '数据备份与归档',
      '静态网站托管',
      '大数据分析',
      '多媒体内容分发'
    ],
    price: '按存储量计费，低至￥0.12/GB/月',
    priceUrl: 'https://aws.amazon.com/cn/s3/pricing/'
  },
  rds: {
    title: 'RDS 数据库服务',
    description: 'RDS 提供高可用、可扩展的关系型数据库服务，支持多种主流数据库引擎，简化数据库运维。',
    tags: ['数据库', '高可用', '自动备份'],
    uses: [
      '企业级数据库托管',
      '弹性扩展的业务系统',
      '自动备份与恢复',
      '高可用架构'
    ],
    price: '按实例规格和存储量计费，支持包年包月和按需付费',
    priceUrl: 'https://aws.amazon.com/cn/rds/pricing/'
  },
  lambda: {
    title: 'Lambda 无服务器计算',
    description: 'Lambda 让你无需管理服务器即可运行代码，按实际消耗资源计费，适合事件驱动和自动化场景。',
    tags: ['无服务器', '自动扩展', '事件驱动'],
    uses: [
      '自动化任务处理',
      'API 后端服务',
      '实时数据处理',
      '事件驱动架构'
    ],
    price: '按请求次数和运行时间计费，免费额度友好',
    priceUrl: 'https://aws.amazon.com/cn/lambda/pricing/'
  },
  emr: {
    title: 'EMR 大数据平台',
    description: 'EMR 提供基于云的 Hadoop、Spark 等大数据处理平台，弹性伸缩，适合大规模数据分析。',
    tags: ['大数据', '数据分析', '弹性伸缩'],
    uses: [
      '大规模数据处理',
      '数据仓库',
      '机器学习数据预处理',
      '日志分析'
    ],
    price: '按集群资源和使用时长计费',
    priceUrl: 'https://aws.amazon.com/cn/emr/pricing/'
  },
  sagemaker: {
    title: 'SageMaker AI 平台',
    description: 'SageMaker 提供一站式机器学习开发、训练和部署平台，助力企业快速构建 AI 应用。',
    tags: ['AI', '机器学习', '自动化'],
    uses: [
      '模型训练与部署',
      '自动化机器学习',
      '大数据智能分析',
      'AI 应用开发'
    ],
    price: '按实例类型和使用时长计费',
    priceUrl: 'https://aws.amazon.com/cn/sagemaker/pricing/'
  },
  waf: {
    title: 'WAF 云防火墙',
    description: 'WAF 提供强大的 Web 应用防护能力，抵御常见攻击，保障网站和 API 安全。',
    tags: ['安全', '防护', 'DDoS'],
    uses: [
      'Web 应用安全防护',
      'API 安全加固',
      '防止 SQL 注入和 XSS',
      'DDoS 攻击防护'
    ],
    price: '按规则数和请求量计费',
    priceUrl: 'https://aws.amazon.com/cn/waf/pricing/'
  },
  autoscaling: {
    title: 'Auto Scaling 弹性伸缩',
    description: 'Auto Scaling 根据业务负载自动调整计算资源，提升可用性并优化成本。',
    tags: ['弹性伸缩', '自动扩展', '高可用'],
    uses: [
      '自动扩容与缩容',
      '高可用架构',
      '应对流量高峰',
      '成本优化'
    ],
    price: '按实际使用的资源计费',
    priceUrl: 'https://aws.amazon.com/cn/autoscaling/pricing/'
  },
  cloudfront: {
    title: 'CloudFront 内容分发网络',
    description: 'CloudFront 为全球用户提供快速、安全的内容分发服务，支持静态和动态内容加速。',
    tags: ['CDN', '加速', '安全'],
    uses: [
      '网站内容加速',
      '视频点播与直播',
      'API 加速',
      '安全内容分发'
    ],
    price: '按流量和请求次数计费，全球节点覆盖',
    priceUrl: 'https://aws.amazon.com/cn/cloudfront/pricing/'
  },
  dynamodb: {
    title: 'DynamoDB NoSQL 数据库',
    description: 'DynamoDB 是高性能、无服务器的 NoSQL 数据库，适合大规模应用和实时数据处理。',
    tags: ['NoSQL', '高性能', '无服务器'],
    uses: [
      '实时数据存储',
      '高并发应用',
      '物联网数据管理',
      '游戏后端'
    ],
    price: '按读写容量和存储量计费',
    priceUrl: 'https://aws.amazon.com/cn/dynamodb/pricing/'
  },
  cloudwatch: {
    title: 'CloudWatch 监控与告警',
    description: 'CloudWatch 提供全面的云资源监控、日志收集和自动告警，助力运维自动化。',
    tags: ['监控', '日志', '自动化'],
    uses: [
      '云资源监控',
      '日志分析',
      '自动化告警',
      '性能优化'
    ],
    price: '按监控项和日志量计费',
    priceUrl: 'https://aws.amazon.com/cn/cloudwatch/pricing/'
  },
  sns: {
    title: 'SNS 消息推送服务',
    description: 'SNS 支持高可用的消息推送和通知，适合分布式系统和移动应用。',
    tags: ['消息推送', '通知', '分布式'],
    uses: [
      '系统通知',
      '移动推送',
      '事件驱动架构',
      '跨服务消息分发'
    ],
    price: '按推送次数和消息量计费',
    priceUrl: 'https://aws.amazon.com/cn/sns/pricing/'
  },
  sqs: {
    title: 'SQS 消息队列服务',
    description: 'SQS 提供可靠的消息队列，解耦微服务和分布式系统，提升系统弹性。',
    tags: ['消息队列', '解耦', '分布式'],
    uses: [
      '微服务解耦',
      '异步任务处理',
      '高并发消息传递',
      '事件驱动架构'
    ],
    price: '按请求次数计费，免费额度友好',
    priceUrl: 'https://aws.amazon.com/cn/sqs/pricing/'
  },
  route53: {
    title: 'Route 53 域名解析',
    description: 'Route 53 提供高可用、可扩展的 DNS 服务，支持域名注册和智能流量调度。',
    tags: ['DNS', '域名解析', '高可用'],
    uses: [
      '域名解析',
      '智能流量调度',
      '全球负载均衡',
      '健康检查'
    ],
    price: '按域名和查询量计费',
    priceUrl: 'https://aws.amazon.com/cn/route53/pricing/'
  },
  elasticache: {
    title: 'ElastiCache 内存数据库',
    description: 'ElastiCache 支持 Redis 和 Memcached，提升应用性能，适合缓存和会话管理。',
    tags: ['缓存', '高性能', '数据库'],
    uses: [
      '数据缓存',
      '会话管理',
      '排行榜',
      '高并发应用'
    ],
    price: '按节点规格和使用时长计费',
    priceUrl: 'https://aws.amazon.com/cn/elasticache/pricing/'
  },
  redshift: {
    title: 'Redshift 数据仓库',
    description: 'Redshift 是高性能、可扩展的数据仓库服务，适合大数据分析和商业智能。',
    tags: ['数据仓库', '大数据', '分析'],
    uses: [
      '大数据分析',
      '商业智能',
      '数据集市',
      '报表生成'
    ],
    price: '按节点类型和存储量计费',
    priceUrl: 'https://aws.amazon.com/cn/redshift/pricing/'
  }
}

const product = computed(() => products[tag.value] || null)
</script>