<template>
  <div class="dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">欢迎回来！</h1>
        <p class="welcome-subtitle">今天是 {{ currentDate }}，祝您工作愉快</p>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div
        v-for="(stat, index) in stats"
        :key="index"
        class="stat-card"
        :class="stat.type"
      >
        <div class="stat-icon-wrapper">
          <el-icon :size="28">
            <component :is="stat.icon" />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
        <div
          class="stat-trend"
          :class="stat.change > 0 ? 'up' : stat.change < 0 ? 'down' : 'flat'"
        >
          <el-icon v-if="stat.change > 0" :size="14"><ArrowUp /></el-icon>
          <el-icon v-else-if="stat.change < 0" :size="14"><ArrowDown /></el-icon>
          <span>{{ stat.change > 0 ? '+' : '' }}{{ stat.change }}%</span>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-card">
        <div class="card-header">
          <h3 class="card-title">月收入走势</h3>
          <el-dropdown trigger="click">
            <el-button type="primary" link>
              <el-icon><MoreFilled /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>查看详情</el-dropdown-item>
                <el-dropdown-item>导出数据</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="chart-container">
          <canvas id="lineChart" height="160"></canvas>
        </div>
      </div>

      <div class="chart-card">
        <div class="card-header">
          <h3 class="card-title">用户活跃分布</h3>
          <el-dropdown trigger="click">
            <el-button type="primary" link>
              <el-icon><MoreFilled /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>查看详情</el-dropdown-item>
                <el-dropdown-item>导出数据</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="chart-container">
          <canvas id="barChart" height="160"></canvas>
        </div>
      </div>
    </div>

    <!-- 列表区域 -->
    <div class="lists-section">
      <div class="list-card">
        <div class="card-header">
          <h3 class="card-title">待办任务</h3>
          <el-button type="primary" link size="small">
            <el-icon><Plus /></el-icon>
            添加任务
          </el-button>
        </div>
        <div class="list-content">
          <div
            v-for="(task, idx) in tasks"
            :key="idx"
            class="task-item"
            :class="{ done: task.completed }"
          >
            <el-checkbox
              v-model="task.completed"
              @change="handleTaskChange(task)"
            />
            <div class="task-info">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-meta">
                <span class="task-date">{{ task.date }}</span>
                <el-tag
                  :type="getPriorityType(task.priority)"
                  size="small"
                  effect="plain"
                >
                  {{ task.priority }}
                </el-tag>
              </div>
            </div>
          </div>
          <el-empty
            v-if="tasks.filter(t => !t.completed).length === 0"
            description="暂无待办任务"
            :image-size="80"
          />
        </div>
      </div>

      <div class="list-card">
        <div class="card-header">
          <h3 class="card-title">最新动态</h3>
          <el-button type="primary" link size="small">查看全部</el-button>
        </div>
        <div class="list-content">
          <div
            v-for="(activity, idx) in activities"
            :key="idx"
            class="activity-item"
          >
            <el-avatar :src="activity.avatar" :size="40" />
            <div class="activity-info">
              <div class="activity-text">
                <span class="activity-user">{{ activity.user }}</span>
                <span class="activity-action">{{ activity.action }}</span>
              </div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
          <el-empty
            v-if="activities.length === 0"
            description="暂无动态"
            :image-size="80"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { Chart, registerables } from "chart.js";
import {
  Money,
  User,
  ShoppingCart,
  TrendCharts,
  ArrowUp,
  ArrowDown,
  MoreFilled,
  Plus,
} from "@element-plus/icons-vue";

Chart.register(...registerables);

// 当前日期
const currentDate = computed(() => {
  const date = new Date();
  const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const weekday = weekdays[date.getDay()];
  return `${month}月${day}日 ${weekday}`;
});

// 统计数据
const stats = ref([
  {
    label: "本月收入",
    value: "￥ 35,800",
    change: 10.4,
    icon: Money,
    type: "income",
  },
  {
    label: "新用户",
    value: "842",
    change: 3.7,
    icon: User,
    type: "users",
  },
  {
    label: "订单量",
    value: "1,376",
    change: -1.6,
    icon: ShoppingCart,
    type: "orders",
  },
  {
    label: "活跃率",
    value: "27.3%",
    change: 2.2,
    icon: TrendCharts,
    type: "active",
  },
]);

// 任务列表
const tasks = ref([
  {
    title: "完成Q2预算审核",
    date: "2024-06-11",
    priority: "High",
    completed: false,
  },
  {
    title: "发邮件通知团队",
    date: "2024-06-10",
    priority: "Medium",
    completed: true,
  },
  {
    title: "产品需求讨论会",
    date: "2024-06-09",
    priority: "Low",
    completed: false,
  },
]);

// 动态记录
const activities = ref([
  {
    user: "Emma",
    action: "添加了新用户",
    time: "1 小时前",
    avatar: "https://picsum.photos/id/1027/40/40",
  },
  {
    user: "John",
    action: "修改了高级权限",
    time: "3 小时前",
    avatar: "https://picsum.photos/id/1012/40/40",
  },
  {
    user: "Jessica",
    action: "完成订单分析报表",
    time: "昨天",
    avatar: "https://picsum.photos/id/1000/40/40",
  },
]);

// 获取优先级类型
const getPriorityType = (priority: string) => {
  const map: Record<string, string> = {
    High: "danger",
    Medium: "warning",
    Low: "success",
  };
  return map[priority] || "info";
};

// 任务状态改变
const handleTaskChange = (task: any) => {
  console.log("Task changed:", task);
};

// 初始化图表
onMounted(() => {
  // 折线图
  new Chart(document.getElementById("lineChart") as HTMLCanvasElement, {
    type: "line",
    data: {
      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      datasets: [
        {
          label: "收入（元）",
          data: [16800, 19400, 23100, 24600, 27600, 31000, 35800],
          fill: true,
          borderColor: "#4f84ff",
          backgroundColor: "rgba(79, 132, 255, 0.1)",
          tension: 0.4,
          pointRadius: 4,
          pointHoverRadius: 6,
          pointBackgroundColor: "#4f84ff",
          pointBorderColor: "#fff",
          pointBorderWidth: 2,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: "rgba(0, 0, 0, 0.8)",
          padding: 12,
          titleFont: { size: 14 },
          bodyFont: { size: 13 },
          cornerRadius: 6,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            color: "var(--el-text-color-regular)",
            font: { size: 12 },
          },
          grid: {
            color: "var(--el-border-color-lighter)",
            drawBorder: false,
          },
        },
        x: {
          ticks: {
            color: "var(--el-text-color-regular)",
            font: { size: 12 },
          },
          grid: {
            display: false,
          },
        },
      },
    },
  });

  // 柱状图
  new Chart(document.getElementById("barChart") as HTMLCanvasElement, {
    type: "bar",
    data: {
      labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      datasets: [
        {
          label: "活跃用户",
          data: [140, 162, 189, 176, 206, 238, 205],
          backgroundColor: "rgba(79, 132, 255, 0.8)",
          borderRadius: 6,
          barPercentage: 0.6,
          borderSkipped: false,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: "rgba(0, 0, 0, 0.8)",
          padding: 12,
          titleFont: { size: 14 },
          bodyFont: { size: 13 },
          cornerRadius: 6,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            color: "var(--el-text-color-regular)",
            font: { size: 12 },
          },
          grid: {
            color: "var(--el-border-color-lighter)",
            drawBorder: false,
          },
        },
        x: {
          ticks: {
            color: "var(--el-text-color-regular)",
            font: { size: 12 },
          },
          grid: {
            display: false,
          },
        },
      },
    },
  });
});
</script>

<style lang="less" scoped>
.dashboard {
  padding: 24px;
  min-height: 100%;
  background-color: var(--el-bg-color-page);
}

// 欢迎区域
.welcome-section {
  margin-bottom: 24px;
  padding: 32px;
  background: linear-gradient(135deg, #062da3 0%, #4f84ff 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(6, 45, 163, 0.2);

  .welcome-content {
    .welcome-title {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #fff;
    }

    .welcome-subtitle {
      margin: 0;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

// 统计卡片
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;

  .stat-card {
    background: var(--el-bg-color);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: var(--el-color-primary-light-7);
    }

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

      .el-icon {
        color: #fff;
      }
    }

    &.income .stat-icon-wrapper {
      background: linear-gradient(135deg, #062da3 0%, #4f84ff 100%);
    }

    &.users .stat-icon-wrapper {
      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    }

    &.orders .stat-icon-wrapper {
      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }

    &.active .stat-icon-wrapper {
      background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    }

    .stat-content {
      flex: 1;
      min-width: 0;

      .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--el-text-color-primary);
        line-height: 1;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: var(--el-text-color-regular);
      }
    }

    .stat-trend {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 500;
      padding: 4px 8px;
      border-radius: 6px;

      &.up {
        color: #10b981;
        background: rgba(16, 185, 129, 0.1);
      }

      &.down {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
      }

      &.flat {
        color: var(--el-text-color-placeholder);
        background: var(--el-fill-color-lighter);
      }
    }
  }
}

// 图表区域
.charts-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 24px;

  .chart-card {
    background: var(--el-bg-color);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .card-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }

    .chart-container {
      height: 280px;
      position: relative;
    }
  }
}

// 列表区域
.lists-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;

  .list-card {
    background: var(--el-bg-color);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .card-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }

    .list-content {
      .task-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background: var(--el-fill-color-lighter);
          margin: 0 -24px;
          padding-left: 24px;
          padding-right: 24px;
          border-radius: 8px;
        }

        &.done {
          .task-info {
            .task-title {
              text-decoration: line-through;
              color: var(--el-text-color-placeholder);
              opacity: 0.7;
            }
          }
        }

        .task-info {
          flex: 1;
          min-width: 0;

          .task-title {
            font-size: 14px;
            color: var(--el-text-color-primary);
            margin-bottom: 6px;
            font-weight: 500;
          }

          .task-meta {
            display: flex;
            align-items: center;
            gap: 8px;

            .task-date {
              font-size: 12px;
              color: var(--el-text-color-placeholder);
            }
          }
        }
      }

      .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background: var(--el-fill-color-lighter);
          margin: 0 -24px;
          padding-left: 24px;
          padding-right: 24px;
          border-radius: 8px;
        }

        .activity-info {
          flex: 1;
          min-width: 0;

          .activity-text {
            font-size: 14px;
            color: var(--el-text-color-primary);
            margin-bottom: 4px;

            .activity-user {
              font-weight: 600;
              color: var(--el-text-color-primary);
            }

            .activity-action {
              color: var(--el-text-color-regular);
            }
          }

          .activity-time {
            font-size: 12px;
            color: var(--el-text-color-placeholder);
          }
        }
      }
    }
  }
}

// 响应式
@media (max-width: 1200px) {
  .charts-section,
  .lists-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }

  .welcome-section {
    padding: 24px 16px;

    .welcome-title {
      font-size: 24px;
    }
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-card {
    padding: 16px;

    .stat-value {
      font-size: 24px;
    }
  }
}

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