<template>
    <div class="dashboard">
        <section class="intro">
            <p class="eyebrow">欢迎使用 · Dashboard</p>
            <h1>组件管理系统</h1>
            <p class="subtitle">
                基于若依框架和Element
                Plus组件库构建的企业级组件管理系统，提供丰富的组件展示和系统管理功能。
            </p>
        </section>

        <section class="stats-grid">
            <el-card
                v-for="stat in stats"
                :key="stat.id"
                shadow="hover"
                class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon" :style="{ background: stat.color }">
                        <svg-icon :icon-class="stat.icon" class="icon" />
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">{{ stat.value }}</div>
                        <div class="stat-label">{{ stat.label }}</div>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-grid">
            <el-card
                v-for="card in featureCards"
                :key="card.id"
                shadow="hover"
                class="feature-card">
                <template #header>
                    <div class="card-header">
                        <h3>{{ card.title }}</h3>
                        <span>{{ card.caption }}</span>
                    </div>
                </template>
                <p class="card-description">{{ card.description }}</p>
                <div class="card-actions">
                    <ComButton
                        v-if="card.route"
                        type="primary"
                        @click="handleNavigate(card.route)">
                        {{ card.actionText }}
                    </ComButton>
                    <ComButton v-else type="info" plain disabled>
                        {{ card.actionText }}
                    </ComButton>
                </div>
            </el-card>
        </section>

        <section class="card-full">
            <el-card shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h3>快速开始</h3>
                        <span>快速了解系统功能和使用方法</span>
                    </div>
                </template>
                <div class="quick-start">
                    <div
                        v-for="(item, index) in quickStartItems"
                        :key="index"
                        class="quick-item">
                        <div class="quick-number">{{ index + 1 }}</div>
                        <div class="quick-content">
                            <h4>{{ item.title }}</h4>
                            <p>{{ item.description }}</p>
                        </div>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-full guide-card">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <h3>系统说明</h3>
                        <span>了解系统架构和技术栈</span>
                    </div>
                </template>
                <ul class="guide-list">
                    <li v-for="tip in systemTips" :key="tip">
                        {{ tip }}
                    </li>
                </ul>
            </el-card>
        </section>
    </div>
</template>

<script setup name="Index">
    import { ref } from "vue";
    import { useRouter } from "vue-router";
    import ComButton from "@/components/ComButton/index.vue";

    const router = useRouter();

    const stats = ref([
        {
            id: "components",
            label: "组件数量",
            value: "12+",
            icon: "component",
            color: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
        },
        {
            id: "users",
            label: "在线用户",
            value: "128",
            icon: "user",
            color: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
        },
        {
            id: "modules",
            label: "功能模块",
            value: "8",
            icon: "tree-table",
            color: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
        },
        {
            id: "performance",
            label: "系统性能",
            value: "98%",
            icon: "monitor",
            color: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
        },
    ]);

    const featureCards = ref([
        {
            id: "components",
            title: "组件展示",
            caption: "Component Showcase",
            description:
                "浏览和体验基于Element Plus二次封装的各类组件，包括按钮、表单、表格等常用组件。",
            actionText: "查看组件",
            route: "/showComponents/showButton",
        },
        {
            id: "system",
            title: "系统管理",
            caption: "System Management",
            description:
                "管理用户、角色、菜单、部门等系统基础数据，配置系统参数和权限。",
            actionText: "进入管理",
            route: "/system/user",
        },
        {
            id: "monitor",
            title: "系统监控",
            caption: "System Monitor",
            description:
                "实时监控系统运行状态，查看在线用户、操作日志、服务监控等信息。",
            actionText: "查看监控",
            route: "/monitor/online",
        },
        {
            id: "tools",
            title: "系统工具",
            caption: "System Tools",
            description:
                "使用表单构建、代码生成等工具提升开发效率，快速构建业务功能。",
            actionText: "使用工具",
            route: "/tool/build",
        },
    ]);

    const quickStartItems = ref([
        {
            title: "浏览组件",
            description:
                "访问组件展示页面，查看和体验各种封装的组件，了解组件的使用方法和最佳实践。",
        },
        {
            title: "系统配置",
            description:
                "在系统管理模块中配置用户权限、菜单结构、系统参数等基础信息。",
        },
        {
            title: "监控运维",
            description:
                "通过系统监控模块实时了解系统运行状态，查看日志和性能指标。",
        },
        {
            title: "开发工具",
            description:
                "使用系统提供的表单构建和代码生成工具，快速开发业务功能。",
        },
    ]);

    const systemTips = ref([
        "系统基于Vue 3 + Vite + Element Plus构建，采用组合式API开发模式。",
        "使用Pinia进行状态管理，支持模块化的store设计。",
        "路由采用动态加载方式，根据用户权限动态生成菜单和路由。",
        "组件库基于Element Plus进行二次封装，保持API一致性的同时增强功能。",
        "支持Mock数据模拟，可在无后端的情况下进行前端开发和测试。",
        "采用响应式设计，支持多端适配和暗色主题切换。",
    ]);

    const handleNavigate = (route) => {
        router.push(route);
    };
</script>

<style scoped>
    .dashboard {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 32px 40px 48px;
        background: linear-gradient(
            160deg,
            #f6f8ff 0%,
            #ffffff 55%,
            #f9fbff 100%
        );
        min-height: 100%;
    }

    .intro {
        max-width: 720px;
        text-align: left;
    }

    .eyebrow {
        font-size: 14px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #5c6aff;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .intro h1 {
        font-size: 32px;
        font-weight: 700;
        margin: 0 0 12px;
        color: #1f2a56;
    }

    .subtitle {
        font-size: 16px;
        line-height: 1.7;
        color: #4c5a7a;
        margin: 0;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
    }

    .stat-card {
        border-radius: 18px;
        overflow: hidden;
    }

    .stat-card :deep(.el-card__body) {
        padding: 24px;
    }

    .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .stat-icon .icon {
        width: 28px;
        height: 28px;
        color: #ffffff;
    }

    .stat-info {
        flex: 1;
        min-width: 0;
    }

    .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #1f2a56;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .stat-label {
        font-size: 14px;
        color: #8792b0;
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }

    .feature-card {
        border-radius: 18px;
        overflow: hidden;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }

    .card-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1f2a56;
    }

    .card-header span {
        font-size: 14px;
        color: #8792b0;
    }

    .card-description {
        font-size: 14px;
        line-height: 1.6;
        color: #4c5a7a;
        margin-bottom: 20px;
        min-height: 44px;
    }

    .card-actions {
        display: flex;
        gap: 12px;
    }

    .quick-start {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
    }

    .quick-item {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

    .quick-number {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 16px;
        flex-shrink: 0;
    }

    .quick-content h4 {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 600;
        color: #1f2a56;
    }

    .quick-content p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: #4c5a7a;
    }

    .card-full {
        width: 100%;
    }

    .guide-card :deep(.el-card__body) {
        padding: 20px 28px 28px;
    }

    .guide-list {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 10px;
        color: #4c5a7a;
        font-size: 14px;
        line-height: 1.6;
    }

    .guide-list li {
        list-style: disc;
    }

    @media (max-width: 1024px) {
        .dashboard {
            padding: 24px 24px 36px;
        }

        .stats-grid {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        }

        .card-grid {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }
    }

    @media (max-width: 600px) {
        .intro h1 {
            font-size: 26px;
        }

        .subtitle {
            font-size: 15px;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .card-grid {
            grid-template-columns: 1fr;
        }

        .quick-start {
            grid-template-columns: 1fr;
        }
    }
</style>
