<!-- Dashboard 工作台 -->
<script setup lang="ts">
import { useUserStore } from '@/stores';
import ChatWidget from './components/ChatWidget.vue';
import PendingTasks from './components/PendingTasks.vue';
import QuickActions from './components/QuickActions.vue';
import RecentActivities from './components/RecentActivities.vue';

const userStore = useUserStore();

// 根据当前时间段返回问候语
const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour < 12)
    return '早上好';
  if (hour < 18)
    return '下午好';
  return '晚上好';
});

// 用户昵称
const nickName = computed(() => userStore.userInfo?.nickName || userStore.userInfo?.username || '');

// 今天日期
const todayInfo = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekday = weekdays[now.getDay()];
  return `${year}年${month}月${day}日${weekday}`;
});

// 待处理事项总数
const pendingCount = computed(() => stats.value.reduce((sum, stat) => sum + Number(stat.value), 0));

// 统计数据
const stats = ref([
  { label: '待审批', value: '12', icon: 'DocumentChecked', trend: '12.5%', trendUp: true, iconBg: '#eef5ff', iconColor: '#1d5af3' },
  { label: '本月新增经销商', value: '5', icon: 'Shop', trend: '8.2%', trendUp: true, iconBg: '#f0fdf4', iconColor: '#16a34a' },
  { label: '待跟进客户', value: '23', icon: 'User', trend: '3.1%', trendUp: false, iconBg: '#fef3c7', iconColor: '#d97706' },
  { label: '待发货订单', value: '8', icon: 'Truck', trend: '2项', trendUp: false, iconBg: '#fef2f2', iconColor: '#dc2626' },
]);
</script>

<template>
  <div class="dashboard-container">
    <!-- 头部 -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">
        {{ greeting }}，{{ nickName }}
      </h1>
      <p class="dashboard-subtitle">
        {{ todayInfo }}，你有<strong class="accent">{{ pendingCount }}</strong>项待处理事项
      </p>
    </div>

    <!-- 统计卡片网格 -->
    <div class="stats-grid">
      <div
        v-for="(stat, idx) in stats"
        :key="stat.label"
        class="stat-card"
      >
        <div class="stat-icon" :style="{ background: stat.iconBg }">
          <el-icon :size="22" :style="{ color: stat.iconColor }">
            <component :is="stat.icon" />
          </el-icon>
        </div>
        <div class="stat-info">
          <span class="stat-value">{{ stat.value }}</span>
          <span class="stat-label">{{ stat.label }}</span>
        </div>
        <div class="stat-trend" :class="stat.trendUp ? 'up' : 'down'">
          <el-icon :size="14">
            <component :is="stat.trendUp ? 'Top' : 'Bottom'" />
          </el-icon>
          {{ stat.trend }}
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="dashboard-content">
      <!-- 左侧列 -->
      <div class="left-column">
        <PendingTasks />
        <QuickActions />
      </div>

      <!-- 右侧列 -->
      <div class="right-column">
        <ChatWidget />
        <RecentActivities />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dashboard-container {
  min-height: 100vh;
  background-color: var(--color-bg);

  .dashboard-header {
    margin-bottom: 24px;

    .dashboard-title {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 700;
      color: var(--color-text-primary);
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .dashboard-subtitle {
      font-size: 14px;
      color: var(--color-text-secondary);
      strong.accent {
        color: var(--color-accent);
        font-weight: 700;
      }
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

  .stat-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.25s ease;
    &:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
  }

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

  .stat-info {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .stat-label {
    font-size: 12.5px;
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  .stat-trend {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
    &.up { color: #16a34a; }
    &.down { color: #dc2626; }
  }

  .dashboard-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

    .left-column,
    .right-column {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
  }
}

@media (max-width: 1200px) {
  .dashboard-container {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-content {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    .stats-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
