<script lang="ts" setup>

// 文章头部信息
const articleHeader = {
  title: '共享烘干机APP方案开发与制作',
  date: '2019年05月22日 15:36',
  category: '共享解决方案'
}

// 文章主要内容
const articleContent = {
  headline: '共享干衣机方案开发',
  description: '解决用户出差旅行时衣服换洗烘干、衣服消毒去味、衣服熨烫等问题，使出行更加方便和快捷，让出差更简单。',
  heroImage: {
    src: 'https://picsum.photos/600/400?random=shared-dryer',
    alt: '共享干衣机',
    overlayText: '方案开发'
  },
  paragraphs: [
    '根据中国酒店行业市场报告调查显示，随着旅游业的快速发展，酒店行业也迎来了新的发展机遇。共享经济模式在酒店行业的应用越来越广泛，从共享酒店到共享空气净化器，再到共享烘干机，各种共享项目层出不穷。',
    '共享烘干机解决的痛点主要是酒店住宿人群的一个共享烦恼。在酒店住宿时，衣服洗完后很难快速晾干，特别是在潮湿的天气或者没有阳台的房间。共享烘干机通过手机扫码支付，提供便捷、快速、卫生的烘干服务，让用户在旅途中也能轻松处理衣物问题。'
  ],
  tags: [
    '共享烘干机方案开发',
    '共享自助干衣机软件硬件方案'
  ]
}

// 热门标签
const popularTags = [
  '景区单车',
  '政务平台',
  '共享经济',
  '共享汽车APP开发',
  '共享雨伞APP开发',
  '共享充电宝APP开发',
  '共享按摩椅APP开发',
  '共享洗衣机APP开发',
  '共享烘干机APP开发'
]

// 解决方案文章列表
const solutionsArticles = [
  {
    id: 1,
    title: '共享烘干机APP方案开发与制作',
    date: '2019-05-22',
    link: '/news/shared-dryer-solution'
  },
  {
    id: 2,
    title: '怎么样找合适的共享解决方案开发公司?',
    date: '2019-05-22',
    link: '/news/how-to-find-shared-solution-company'
  },
  {
    id: 3,
    title: '玉屏无人售货机系统软硬件一体化方案',
    date: '2019-05-21',
    link: '/news/unmanned-vending-machine-solution'
  },
  {
    id: 4,
    title: '共享充电线凭什么这么火?',
    date: '2019-05-20',
    link: '/news/why-shared-charging-cable-popular'
  },
  {
    id: 5,
    title: '玉犀无人售货机系统软硬件一体化方案',
    date: '2019-05-19',
    link: '/news/yuxi-unmanned-vending-machine'
  },
  {
    id: 6,
    title: '共享经济下的新商业模式探索',
    date: '2019-05-18',
    link: '/news/shared-economy-business-model'
  },
  {
    id: 7,
    title: '物联网技术在共享设备中的应用',
    date: '2019-05-17',
    link: '/news/iot-in-shared-devices'
  },
  {
    id: 8,
    title: '智能硬件开发的技术难点解析',
    date: '2019-05-16',
    link: '/news/smart-hardware-development-challenges'
  },
  {
    id: 9,
    title: '移动支付在共享经济中的重要性',
    date: '2019-05-15',
    link: '/news/mobile-payment-in-shared-economy'
  },
  {
    id: 10,
    title: '用户体验设计在共享APP中的关键作用',
    date: '2019-05-14',
    link: '/news/ux-design-in-shared-app'
  }
]

// 开发知识文章列表
const devKnowledgeArticles = [
  {
    id: 1,
    title: '怎么样找合适的共享解决方案开发公司?',
    date: '2019-05-22',
    link: '/news/how-to-find-shared-solution-company'
  },
  {
    id: 2,
    title: '共享APP开发的技术架构选择',
    date: '2019-05-21',
    link: '/news/shared-app-tech-architecture'
  },
  {
    id: 3,
    title: '移动端开发的最佳实践',
    date: '2019-05-20',
    link: '/news/mobile-development-best-practices'
  },
  {
    id: 4,
    title: '云服务在共享经济中的应用',
    date: '2019-05-19',
    link: '/news/cloud-services-in-shared-economy'
  },
  {
    id: 5,
    title: '数据库设计在共享系统中的考虑',
    date: '2019-05-18',
    link: '/news/database-design-shared-system'
  },
  {
    id: 6,
    title: 'API设计的最佳实践',
    date: '2019-05-17',
    link: '/news/api-design-best-practices'
  },
  {
    id: 7,
    title: '前端框架选择指南',
    date: '2019-05-16',
    link: '/news/frontend-framework-selection'
  },
  {
    id: 8,
    title: '后端技术栈推荐',
    date: '2019-05-15',
    link: '/news/backend-tech-stack-recommendation'
  },
  {
    id: 9,
    title: 'DevOps在项目开发中的应用',
    date: '2019-05-14',
    link: '/news/devops-in-project-development'
  },
  {
    id: 10,
    title: '代码质量保证的方法',
    date: '2019-05-13',
    link: '/news/code-quality-assurance'
  }
]

// 行业动态文章列表
const industryTrendsArticles = [
  {
    id: 1,
    title: '酒店共享烘干机 引领共享经济新革命',
    date: '2019-05-22',
    link: '/news/hotel-shared-dryer-revolution'
  },
  {
    id: 2,
    title: '玉犀科技浅析共享碾米机方案开发的发展潜力',
    date: '2019-05-21',
    link: '/news/shared-rice-mill-development-potential'
  },
  {
    id: 3,
    title: '共享经济市场规模持续增长',
    date: '2019-05-20',
    link: '/news/shared-economy-market-growth'
  },
  {
    id: 4,
    title: '物联网技术推动共享设备智能化',
    date: '2019-05-19',
    link: '/news/iot-promotes-shared-device-intelligence'
  },
  {
    id: 5,
    title: '移动支付普及加速共享经济发展',
    date: '2019-05-18',
    link: '/news/mobile-payment-accelerates-shared-economy'
  },
  {
    id: 6,
    title: '人工智能在共享服务中的应用',
    date: '2019-05-17',
    link: '/news/ai-in-shared-services'
  },
  {
    id: 7,
    title: '区块链技术为共享经济带来新机遇',
    date: '2019-05-16',
    link: '/news/blockchain-opportunities-shared-economy'
  },
  {
    id: 8,
    title: '5G技术将如何改变共享经济',
    date: '2019-05-15',
    link: '/news/5g-changes-shared-economy'
  },
  {
    id: 9,
    title: '可持续发展理念在共享经济中的体现',
    date: '2019-05-14',
    link: '/news/sustainability-in-shared-economy'
  },
  {
    id: 10,
    title: '共享经济监管政策的最新动态',
    date: '2019-05-13',
    link: '/news/shared-economy-regulation-updates'
  }
]

// 分页导航
const pagination = {
  previous: {
    title: '共享充电线凭什么这么火?',
    link: '/news/why-shared-charging-cable-popular'
  },
  next: {
    title: '玉犀无人售货机系统软硬件一体化方案',
    link: '/news/yuxi-unmanned-vending-machine'
  }
}
</script>

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- 页面布局 -->
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

        <!-- 主内容区域 -->
        <div class="lg:col-span-3">
          <!-- 文章头部 -->
          <header class="mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              {{ articleHeader.title }}
            </h1>
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between text-gray-600 dark:text-gray-400">
              <span class="text-lg mb-2 sm:mb-0">{{ articleHeader.date }}</span>
              <span class="text-lg">分类: {{ articleHeader.category }}</span>
            </div>
          </header>

          <!-- 文章内容 -->
          <article class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
            <!-- 文章标题 -->
            <h2 class="text-2xl md:text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">
              {{ articleContent.headline }}
            </h2>

            <!-- 文章描述 -->
            <p class="text-lg text-gray-700 dark:text-gray-300 mb-8 leading-relaxed">
              {{ articleContent.description }}
            </p>

            <!-- 主图展示 -->
            <div class="relative mb-8">
              <div class="relative overflow-hidden rounded-xl">
                <img
                    :alt="articleContent.heroImage.alt"
                    :src="articleContent.heroImage.src"
                    class="w-full h-64 md:h-80 object-cover"
                >
                <!-- 红色覆盖按钮 -->
                <div class="absolute bottom-4 right-4">
                  <div class="bg-red-600 text-white px-4 py-2 rounded-lg font-semibold shadow-lg">
                    {{ articleContent.heroImage.overlayText }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 文章段落 -->
            <div class="space-y-6 mb-8">
              <p
                  v-for="(paragraph, index) in articleContent.paragraphs"
                  :key="index"
                  class="text-gray-700 dark:text-gray-300 leading-relaxed"
              >
                {{ paragraph }}
              </p>
            </div>

            <!-- 文章标签 -->
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">标签:</h3>
              <div class="flex flex-wrap gap-2">
                <span
                    v-for="tag in articleContent.tags"
                    :key="tag"
                    class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-200"
                >
                  {{ tag }}
                </span>
              </div>
            </div>

            <!-- 分页导航 -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
              <div class="flex flex-col sm:flex-row sm:justify-between gap-4">
                <div v-if="pagination.previous" class="flex-1">
                  <NuxtLink
                      :to="pagination.previous.link"
                      class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200"
                  >
                    <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">上一篇:</div>
                    <div class="text-gray-900 dark:text-white font-medium">{{ pagination.previous.title }}</div>
                  </NuxtLink>
                </div>
                <div v-if="pagination.next" class="flex-1">
                  <NuxtLink
                      :to="pagination.next.link"
                      class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 text-right"
                  >
                    <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">下一篇:</div>
                    <div class="text-gray-900 dark:text-white font-medium">{{ pagination.next.title }}</div>
                  </NuxtLink>
                </div>
              </div>
            </div>
          </article>
        </div>

        <!-- 侧边栏 -->
        <div class="lg:col-span-1">
          <div class="space-y-8">

            <!-- 热门标签 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                热门标签
              </h3>
              <div class="flex flex-wrap gap-2">
                <NuxtLink
                    v-for="tag in popularTags"
                    :key="tag"
                    class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200"
                    to="/tags"
                >
                  {{ tag }}
                </NuxtLink>
              </div>
            </div>

            <!-- 解决方案 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                解决方案
              </h3>
              <div class="space-y-3">
                <NuxtLink
                    v-for="article in solutionsArticles"
                    :key="article.id"
                    :to="article.link"
                    class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
                >
                  <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
                    {{ article.title }}
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">
                    {{ article.date }}
                  </div>
                </NuxtLink>
              </div>
            </div>

            <!-- 开发知识 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                开发知识
              </h3>
              <div class="space-y-3">
                <NuxtLink
                    v-for="article in devKnowledgeArticles"
                    :key="article.id"
                    :to="article.link"
                    class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
                >
                  <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
                    {{ article.title }}
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">
                    {{ article.date }}
                  </div>
                </NuxtLink>
              </div>
            </div>

            <!-- 行业动态 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                行业动态
              </h3>
              <div class="space-y-3">
                <NuxtLink
                    v-for="article in industryTrendsArticles"
                    :key="article.id"
                    :to="article.link"
                    class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
                >
                  <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
                    {{ article.title }}
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">
                    {{ article.date }}
                  </div>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 文本截断样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* 悬停效果 */
.hover\:bg-gray-50:hover {
  background-color: rgb(249 250 251);
}

.dark .hover\:bg-gray-50:hover {
  background-color: rgb(55 65 81);
}

.hover\:bg-gray-100:hover {
  background-color: rgb(243 244 246);
}

.dark .hover\:bg-gray-100:hover {
  background-color: rgb(75 85 99);
}
</style>