<template>
  <div class="about">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><InfoFilled /></el-icon>
              <span>关于 Think Tank</span>
            </div>
          </template>
          <div class="about-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <h3>项目介绍</h3>
                <p>Think Tank 是一个基于 Vue 3 + Element Plus + Vue Router 构建的现代化前端项目模板。</p>
                <p>该项目采用了最新的前端技术栈，提供了完整的开发环境配置和项目结构，帮助开发者快速启动新项目。</p>
                
                <h3>技术特性</h3>
                <el-timeline>
                  <el-timeline-item timestamp="Vue 3" placement="top">
                    <el-card>
                      <h4>Vue 3 Composition API</h4>
                      <p>使用最新的 Composition API，提供更好的逻辑复用和类型推导</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="Element Plus" placement="top">
                    <el-card>
                      <h4>Element Plus UI 组件库</h4>
                      <p>基于 Vue 3 的企业级 UI 组件库，提供丰富的组件和主题定制</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="Vue Router" placement="top">
                    <el-card>
                      <h4>Vue Router 4</h4>
                      <p>Vue.js 官方路由管理器，支持动态路由和路由守卫</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="Vite" placement="top">
                    <el-card>
                      <h4>Vite 构建工具</h4>
                      <p>下一代前端构建工具，提供极速的开发体验</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-col>
              
              <el-col :span="12">
                <h3>项目结构</h3>
                <el-tree
                  :data="projectStructure"
                  :props="treeProps"
                  default-expand-all
                  :expand-on-click-node="false"
                >
                  <template #default="{ node, data }">
                    <span class="tree-node">
                      <el-icon v-if="data.type === 'folder'"><Folder /></el-icon>
                      <el-icon v-else><Document /></el-icon>
                      <span>{{ node.label }}</span>
                    </span>
                  </template>
                </el-tree>
                
                <h3 style="margin-top: 30px;">开发指南</h3>
                <el-steps :active="3" finish-status="success">
                  <el-step title="安装依赖" description="npm install"></el-step>
                  <el-step title="启动开发" description="npm run dev"></el-step>
                  <el-step title="构建项目" description="npm run build"></el-step>
                  <el-step title="部署上线" description="部署到服务器"></el-step>
                </el-steps>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><Star /></el-icon>
              <span>版本信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="项目版本">1.0.0</el-descriptions-item>
            <el-descriptions-item label="Vue">^3.4.0</el-descriptions-item>
            <el-descriptions-item label="Element Plus">^2.4.4</el-descriptions-item>
            <el-descriptions-item label="Vue Router">^4.2.5</el-descriptions-item>
            <el-descriptions-item label="Vite">^5.0.0</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><Link /></el-icon>
              <span>相关链接</span>
            </div>
          </template>
          <div class="links">
            <el-button type="primary" link @click="openLink('https://vuejs.org/')">
              <el-icon><Link /></el-icon>
              Vue.js 官网
            </el-button>
            <el-button type="primary" link @click="openLink('https://element-plus.org/')">
              <el-icon><Link /></el-icon>
              Element Plus 官网
            </el-button>
            <el-button type="primary" link @click="openLink('https://router.vuejs.org/')">
              <el-icon><Link /></el-icon>
              Vue Router 官网
            </el-button>
            <el-button type="primary" link @click="openLink('https://vitejs.dev/')">
              <el-icon><Link /></el-icon>
              Vite 官网
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><ChatDotRound /></el-icon>
              <span>联系我们</span>
            </div>
          </template>
          <div class="contact">
            <p><el-icon><Message /></el-icon> 邮箱：contact@thinktank.com</p>
            <p><el-icon><Phone /></el-icon> 电话：+86 123-4567-8900</p>
            <p><el-icon><Location /></el-icon> 地址：北京市朝阳区</p>
            <el-button type="success" style="width: 100%; margin-top: 10px;">
              <el-icon><ChatDotRound /></el-icon>
              在线咨询
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  InfoFilled,
  Folder,
  Document,
  Star,
  Link,
  ChatDotRound,
  Message,
  Phone,
  Location
} from '@element-plus/icons-vue'

// 项目结构数据
const projectStructure = ref([
  {
    label: 'think-tank',
    type: 'folder',
    children: [
      {
        label: 'src',
        type: 'folder',
        children: [
          { label: 'views', type: 'folder' },
          { label: 'router', type: 'folder' },
          { label: 'components', type: 'folder' },
          { label: 'App.vue', type: 'file' },
          { label: 'main.js', type: 'file' }
        ]
      },
      { label: 'package.json', type: 'file' },
      { label: 'vite.config.js', type: 'file' },
      { label: 'index.html', type: 'file' }
    ]
  }
])

const treeProps = {
  children: 'children',
  label: 'label'
}

// 打开链接
const openLink = (url) => {
  window.open(url, '_blank')
  ElMessage.success('正在打开链接...')
}
</script>

<style scoped>
.about {
  max-width: 1200px;
  margin: 0 auto;
}

.about-content h3 {
  color: #409eff;
  margin-bottom: 16px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.about-content p {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
</style>