<template>
  <div class="app-container home">
    <!-- 欢迎区块 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card hover-card">
          <div class="welcome-content">
            <div class="user-info">
              <h2>欢迎使用审计之家总控管理系统</h2>
              <div class="welcome-desc">
                <span>您好，{{ userStore.nickname || '管理员' }}！系统运行平稳，这是您今天的业务概览。</span>
                <el-tag size="small" effect="dark" type="success" class="ml10">系统版本 v5.5.3</el-tag>
              </div>
            </div>
            <div class="welcome-img">
              <svg-icon icon-class="guide" style="font-size: 80px; opacity: 0.2" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 核心指标区块 -->
    <el-row :gutter="20" class="mt20">
      <el-col :sm="12" :lg="6" v-for="(stat, index) in statConfig" :key="index">
        <el-card shadow="hover" class="stat-card hover-card" v-loading="loading[stat.key]">
          <template #header>
            <div class="card-header">
              <span class="header-title">{{ stat.title }}</span>
              <el-tag :type="stat.tagType" size="small">{{ stat.tag }}</el-tag>
            </div>
          </template>
          <div class="stat-body">
            <div class="stat-main">
              <div class="stat-value">{{ stats[stat.key + 'Count'] }}</div>
              <div class="stat-icon" :style="{ color: stat.iconColor }">
                <el-icon :size="32"><component :is="stat.icon" /></el-icon>
              </div>
            </div>
            <div class="stat-footer">
              <span class="footer-label">{{ stat.footerLabel }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt20">
      <!-- 平台概况与职责 -->
      <el-col :sm="24" :lg="16">
        <el-card shadow="hover" class="intro-card hover-card">
          <template #header>
            <div class="card-header">
              <span class="header-title"><el-icon class="mr5"><InfoFilled /></el-icon>平台概况</span>
            </div>
          </template>
          <div class="intro-body">
            <div class="platform-header">
              <h3 class="platform-title">审计之家 (Audit House)</h3>
              <div class="feature-tags">
                <el-tag effect="plain" size="small">多租户</el-tag>
                <el-tag effect="plain" size="small" type="success">智能测评</el-tag>
                <el-tag effect="plain" size="small" type="info">在线教育</el-tag>
                <el-tag effect="plain" size="small" type="warning">人才匹配</el-tag>
                <el-tag effect="plain" size="small" type="danger">微信支付</el-tag>
              </div>
            </div>
            <p class="platform-desc">
              审计之家致力于打造专业的审计行业一站式服务平台。通过先进的数字化技术，连接企业与专业审计人才，
              提供职业测评、技能培训、求职招聘及行业咨询等全方位服务。
            </p>
            <el-divider content-position="left">总控端核心职责</el-divider>
            <div class="duty-grid">
              <div class="duty-item">
                <el-icon color="#409EFF"><Management /></el-icon>
                <span>租户接入与资源分配</span>
              </div>
              <div class="duty-item">
                <el-icon color="#67C23A"><Collection /></el-icon>
                <span>测评库与培训资源维护</span>
              </div>
              <div class="duty-item">
                <el-icon color="#E6A23C"><DataAnalysis /></el-icon>
                <span>系统监控与业务流分析</span>
              </div>
              <div class="duty-item">
                <el-icon color="#F56C6C"><Checked /></el-icon>
                <span>企业与人才资质审核</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 最近订单列表 - 填充底部空白 -->
        <el-card shadow="hover" class="mt20 hover-card recent-order-card" v-loading="loading.order">
          <template #header>
            <div class="card-header">
              <span class="header-title"><el-icon class="mr5"><List /></el-icon>最新订单概览</span>
              <el-button type="primary" link @click="goTarget('/system/order/index')">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentOrders" size="small" style="width: 100%">
            <el-table-column prop="orderNo" label="订单编号" width="180" show-overflow-tooltip>
              <template #default="scope">
                <el-link type="primary" :underline="false" @click="handleOrderDetail(scope.row)">{{ scope.row.orderNo }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="studentName" label="学员" width="100" />
            <el-table-column prop="totalAmount" label="金额">
              <template #default="scope">
                <span class="text-danger">¥ {{ scope.row.totalAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="payStatus" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.payStatus === 2 ? 'success' : 'warning'" size="small">
                  {{ scope.row.payStatus === 2 ? '已支付' : '待支付' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" width="160" />
          </el-table>
        </el-card>
      </el-col>

      <!-- 右侧辅助区块 -->
      <el-col :sm="24" :lg="8">
        <el-card shadow="hover" class="link-card hover-card">
          <template #header>
            <div class="card-header">
              <span class="header-title"><el-icon class="mr5"><Pointer /></el-icon>快速入口</span>
            </div>
          </template>
          <div class="link-grid">
            <div class="link-item" @click="goTarget('/system/tenant')">
              <el-icon color="#409EFF"><User /></el-icon>
              <span>租户管理</span>
            </div>
            <div class="link-item" @click="goTarget('/system/assessment')">
              <el-icon color="#67C23A"><Reading /></el-icon>
              <span>测评中心</span>
            </div>
            <div class="link-item" @click="goTarget('/monitor/online')">
              <el-icon color="#E6A23C"><Monitor /></el-icon>
              <span>在线用户</span>
            </div>
            <div class="link-item" @click="goTarget('/system/order/index')">
              <el-icon color="#909399"><Document /></el-icon>
              <span>订单查看</span>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover" class="status-card mt20 hover-card">
          <template #header>
            <div class="card-header">
              <span class="header-title"><el-icon class="mr5"><Cpu /></el-icon>系统状态</span>
            </div>
          </template>
          <div class="status-body">
            <div class="status-item" v-for="(item, index) in systemStatus" :key="index">
              <div class="status-label">
                <el-icon :color="item.iconColor" class="mr5"><component :is="item.icon" /></el-icon>
                <span>{{ item.label }}</span>
              </div>
              <el-tag size="small" :type="item.tagType">{{ item.tag }}</el-tag>
            </div>
          </div>
        </el-card>

        <!-- 系统通知/公告占位 -->
        <el-card shadow="hover" class="mt20 hover-card notice-card">
          <template #header>
            <div class="card-header">
              <span class="header-title"><el-icon class="mr5"><Bell /></el-icon>系统公告</span>
            </div>
          </template>
          <div class="notice-list">
            <div class="notice-item" v-for="i in 3" :key="i">
              <span class="notice-dot"></span>
              <span class="notice-text">关于 2024 年第二季度平台资源维护升级的通知...</span>
              <span class="notice-time">04-14</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { listStudent } from '@/api/main/student';
import { listEvaluation } from '@/api/main/evaluation';
import { listTraining } from '@/api/main/training';
import { listOrder } from '@/api/system/order';

const router = useRouter();
const userStore = useUserStore();

const loading = reactive({
  student: false,
  evaluation: false,
  training: false,
  order: false
});

const stats = reactive({
  studentCount: 0,
  evaluationCount: 0,
  trainingCount: 0,
  orderCount: 0
});

const recentOrders = ref([]);

const statConfig = [
  { key: 'student', title: '累计学员', tag: '实时', tagType: 'success', icon: 'User', iconColor: '#409EFF', footerLabel: '平台注册学员总数' },
  { key: 'evaluation', title: '测评任务', tag: '活跃', tagType: 'info', icon: 'EditPen', iconColor: '#67C23A', footerLabel: '已发布的测评项目' },
  { key: 'training', title: '培训项目', tag: '热门', tagType: 'warning', icon: 'Reading', iconColor: '#E6A23C', footerLabel: '已发布的培训课程' },
  { key: 'order', title: '订单数量', tag: '业务', tagType: 'danger', icon: 'Wallet', iconColor: '#F56C6C', footerLabel: '全平台累计订单数' }
];

const systemStatus = [
  { label: '后端服务', tag: '运行中', tagType: 'success', icon: 'Connection', iconColor: '#67C23A' },
  { label: 'Redis 缓存', tag: '连接正常', tagType: 'success', icon: 'Orange', iconColor: '#67C23A' },
  { label: '数据库', tag: '负载正常', tagType: 'success', icon: 'Coin', iconColor: '#67C23A' },
  { label: '文件存储', tag: '可用', tagType: 'info', icon: 'Files', iconColor: '#909399' }
];

const goTarget = (url: string) => {
  if (url.startsWith('http')) {
    window.open(url, '__blank');
  } else {
    router.push(url);
  }
};

const handleOrderDetail = (row: any) => {
  router.push({
    path: '/system/order/detail',
    query: { id: row.id }
  });
};

/** 查询统计数据 */
const getStats = async () => {
  const query = { pageNum: 1, pageSize: 1 };
  
  loading.student = true;
  listStudent(query).then((res: any) => {
    stats.studentCount = res.total || 0;
  }).finally(() => {
    loading.student = false;
  });

  loading.evaluation = true;
  listEvaluation(query).then((res: any) => {
    stats.evaluationCount = res.total || 0;
  }).finally(() => {
    loading.evaluation = false;
  });

  loading.training = true;
  listTraining(query).then((res: any) => {
    stats.trainingCount = res.total || 0;
  }).finally(() => {
    loading.training = false;
  });

  loading.order = true;
  listOrder({ pageNum: 1, pageSize: 6 }).then((res: any) => {
    stats.orderCount = res.total || 0;
    recentOrders.value = res.rows || [];
  }).finally(() => {
    loading.order = false;
  });
};

onMounted(() => {
  getStats();
});
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);

  .mr5 { margin-right: 5px; }
  .ml10 { margin-left: 10px; }
  .mt20 { margin-top: 20px; }

  .hover-card {
    transition: all 0.3s;
    border: none;
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-title {
      font-weight: 600;
      color: #303133;
      display: flex;
      align-items: center;
    }
  }

  .welcome-card {
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    color: white;
    .welcome-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      h2 { margin: 0 0 10px; font-weight: 600; }
      .welcome-desc { 
        font-size: 14px; 
        opacity: 0.9;
        display: flex;
        align-items: center;
      }
    }
  }

  .stat-card {
    .stat-body {
      .stat-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: #303133;
        }
      }
      .stat-footer {
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .intro-card {
    .intro-body {
      .platform-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        .platform-title { margin: 0; color: #303133; }
        .feature-tags { display: flex; gap: 5px; }
      }
      .platform-desc { color: #606266; line-height: 1.6; font-size: 14px; margin-bottom: 20px; }
      .duty-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        .duty-item {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #606266;
          .el-icon { font-size: 18px; margin-right: 10px; }
        }
      }
    }
  }

  .link-card {
    .link-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      .link-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
        &:hover { background: #eef1f6; }
        .el-icon { font-size: 24px; margin-bottom: 8px; }
        span { font-size: 13px; color: #606266; }
      }
    }
  }

  .status-card {
    .status-body {
      .status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        &:last-child { margin-bottom: 0; }
        .status-label {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }

  .notice-card {
    .notice-list {
      .notice-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        font-size: 13px;
        color: #606266;
        cursor: pointer;
        &:hover { color: #1890ff; }
        &:last-child { margin-bottom: 0; }
        .notice-dot {
          width: 6px;
          height: 6px;
          background: #1890ff;
          border-radius: 50%;
          margin-right: 10px;
        }
        .notice-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .notice-time { color: #909399; margin-left: 10px; }
      }
    }
  }

  .recent-order-card {
    :deep(.el-table) {
      &::before { display: none; }
      th.el-table__cell { background: #f8f9fa; color: #303133; }
    }
  }
}
</style>
