<template>
  <div class="oa-home">
    <!-- 头部介绍 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">协同办公系统</h1>
        <p class="hero-description">
          企业级团队协作平台，集项目管理、任务跟踪、文档协同于一体
        </p>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-number">2000+</div>
            <div class="stat-label">企业使用</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">85%</div>
            <div class="stat-label">协作效率提升</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">99.9%</div>
            <div class="stat-label">系统可用率</div>
          </div>
        </div>
      </div>
      <div class="hero-image">
        <span class="image-placeholder">📊</span>
      </div>
    </div>

    <!-- 功能模块介绍 -->
    <div class="features-section">
      <h2 class="section-title">核心功能模块</h2>
      <p class="section-description">全面覆盖企业团队协作需求</p>
      
      <div class="features-grid">
        <div
          v-for="feature in features"
          :key="feature.id"
          class="feature-card"
          @click="navigateTo(feature.path)"
        >
          <div class="feature-icon" :style="{ backgroundColor: feature.color + '10', color: feature.color }">
            {{ feature.icon }}
          </div>
          <h3 class="feature-title">{{ feature.title }}</h3>
          <p class="feature-description">{{ feature.description }}</p>
          <div class="feature-tags">
            <span v-for="tag in feature.tags" :key="tag" class="feature-tag">{{ tag }}</span>
          </div>
          <div class="feature-action">
            <a-typography-link>立即体验 →</a-typography-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 使用流程演示 -->
    <div class="workflow-section">
      <h2 class="section-title">典型工作流程示例</h2>
      <p class="section-description">从立项到交付的一体化管理</p>
      
      <div class="workflow-steps">
        <div class="workflow-step" v-for="(step, index) in workflowSteps" :key="index">
          <div class="step-number">{{ index + 1 }}</div>
          <div class="step-content">
            <h4>{{ step.title }}</h4>
            <p>{{ step.description }}</p>
            <div class="step-modules">
              <a-tag
                v-for="module in step.modules"
                :key="module"
                color="#1890ff"
                @click="navigateToModule(module)"
              >
                {{ getModuleLabel(module) }}
              </a-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 立即开始按钮 -->
    <div class="cta-section">
      <div class="cta-content">
        <h3 class="cta-title">立即开始您的协同办公之旅</h3>
        <p class="cta-description">
          已有数据？点击任意功能模块直接进入演示，或从概览仪表板开始
        </p>
        <a-space>
          <a-button type="primary" size="large" @click="navigateTo('/oa')">
            进入概览仪表板
          </a-button>
          <a-button size="large" @click="navigateTo('/oa/projects')">
            直接体验项目管理
          </a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'

// 功能模块数据
const features = [
  {
    id: 1,
    icon: '📊',
    title: '概览仪表板',
    description: '团队工作状态全局概览，快速了解各项进度和统计',
    tags: ['数据统计', '快捷操作', '实时通知'],
    path: '/oa',
    color: '#1890ff'
  },
  {
    id: 2,
    icon: '🚀',
    title: '项目管理',
    description: '完整项目生命周期管理，从规划到交付全过程跟踪',
    tags: ['进度跟踪', '团队协作', '风险管理'],
    path: '/oa/projects',
    color: '#52c41a'
  },
  {
    id: 3,
    icon: '📋',
    title: '任务看板',
    description: '可视化任务管理，拖拽操作，实时同步团队成员任务状态',
    tags: ['看板管理', '优先级管理', '进度跟踪'],
    path: '/oa/tasks',
    color: '#722ed1'
  },
  {
    id: 4,
    icon: '📄',
    title: '文档协同',
    description: '多人实时协同编辑，版本管理，企业知识库建设',
    tags: ['实时协作', '版本控制', '权限管理'],
    path: '/oa/documents',
    color: '#fa8c16'
  },
  {
    id: 5,
    icon: '🗓️',
    title: '会议管理',
    description: '会议安排、纪要管理、任务分派一体化管理',
    tags: ['日程管理', '会议纪要', '决议跟踪'],
    path: '/oa/meetings',
    color: '#f5222d'
  },
  {
    id: 6,
    icon: '✅',
    title: '审批流程',
    description: '自定义审批流程，多级审批，移动端快速处理',
    tags: ['流程设计', '移动审批', '电子签章'],
    path: '/oa/approvals',
    color: '#faad14'
  }
]

// 工作流程步骤
const workflowSteps = [
  {
    title: '项目立项与规划',
    description: '创建项目，明确目标，制定计划，分配资源',
    modules: ['projects', 'teams']
  },
  {
    title: '任务分解与分配',
    description: '将项目目标分解为具体任务，分配给团队成员',
    modules: ['tasks', 'teams']
  },
  {
    title: '文档协作与共享',
    description: '团队协同编写文档，共享资源和知识',
    modules: ['documents', 'chat']
  },
  {
    title: '进度跟踪与会议',
    description: '定期会议讨论进度，调整计划，解决问题',
    modules: ['meetings', 'tasks', 'calendar']
  },
  {
    title: '成果交付与审批',
    description: '交付成果，进行质量审查和最终审批',
    modules: ['approvals', 'documents']
  },
  {
    title: '回顾总结与归档',
    description: '项目复盘，总结经验，知识归档',
    modules: ['documents', 'projects']
  }
]

// 功能模块对应关系
const moduleLabels: Record<string, string> = {
  'projects': '项目管理',
  'tasks': '任务看板',
  'documents': '文档协同',
  'meetings': '会议管理',
  'approvals': '审批流程',
  'teams': '团队协作',
  'calendar': '日程日历',
  'chat': '即时通讯'
}

// 方法
function navigateToModule(module: string) {
  const path = `/oa/${module}`
  navigateTo(path)
}

function getModuleLabel(module: string) {
  return moduleLabels[module] || module
}
</script>

<style scoped>
.oa-home {
  min-height: calc(100vh - 140px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0;
}

/* Hero 区域 */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
  background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(24, 144, 255, 0.08);
}

.hero-content {
  flex: 1;
}

.hero-title {
  font-size: 40px;
  font-weight: 700;
  color: #1a3353;
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero-description {
  font-size: 18px;
  color: rgba(26, 51, 83, 0.8);
  margin-bottom: 32px;
  line-height: 1.6;
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 32px;
}

.stat-item {
  text-align: left;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #1890ff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: rgba(26, 51, 83, 0.6);
}

.hero-image {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 32px rgba(24, 144, 255, 0.3);
}

.image-placeholder {
  font-size: 80px;
}

/* 功能模块区域 */
.features-section {
  margin-bottom: 64px;
}

.section-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #1a3353;
  margin-bottom: 8px;
}

.section-description {
  text-align: center;
  font-size: 16px;
  color: rgba(26, 51, 83, 0.6);
  margin-bottom: 48px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: transparent;
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 20px;
}

.feature-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a3353;
  margin-bottom: 12px;
}

.feature-description {
  font-size: 14px;
  color: rgba(26, 51, 83, 0.7);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.feature-tag {
  font-size: 12px;
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.feature-action {
  margin-top: auto;
}

/* 工作流程区域 */
.workflow-section {
  margin-bottom: 64px;
  background: #fafafa;
  border-radius: 20px;
  padding: 40px;
}

.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.workflow-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
}

.step-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1a3353;
  margin-bottom: 8px;
}

.step-content p {
  font-size: 14px;
  color: rgba(26, 51, 83, 0.7);
  line-height: 1.6;
  margin-bottom: 12px;
}

.step-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step-modules :deep(.ant-tag) {
  cursor: pointer;
  transition: all 0.2s ease;
}

.step-modules :deep(.ant-tag):hover {
  opacity: 0.8;
}

/* CTA 区域 */
.cta-section {
  text-align: center;
  padding: 48px;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  border-radius: 20px;
  color: white;
}

.cta-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 16px;
}

.cta-description {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-section :deep(.ant-btn-primary:not(.ant-btn-background-ghost)) {
  background: white;
  border-color: white;
  color: #1890ff;
}

.cta-section :deep(.ant-btn-primary:not(.ant-btn-background-ghost)):hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.cta-section :deep(.ant-btn-background-ghost) {
  background: transparent;
  border-color: white;
  color: white;
}

.cta-section :deep(.ant-btn-background-ghost):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  
  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
  }
  
  .hero-title {
    font-size: 32px;
  }
  
  .hero-description {
    font-size: 16px;
  }
  
  .hero-image {
    width: 150px;
    height: 150px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .workflow-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  
  .step-modules {
    justify-content: center;
  }
  
  .cta-section {
    padding: 32px 24px;
  }
  
  .cta-title {
    font-size: 24px;
  }
}
</style>