<script setup lang="ts">
definePageMeta({ layout: 'admin' })

const { activeTab } = useNav()

const stats = ref([
  { label: '生产工单', value: 128, unit: '单', change: '+12%', up: true, icon: '📋', color: '#6366f1' },
  { label: '在制品数量', value: 3, unit: '万', change: '+8%', up: true, icon: '🏭', color: '#10b981' },
  { label: '设备利用率', value: 87, unit: '%', change: '+3%', up: true, icon: '⚙️', color: '#f59e0b' },
  { label: '订单交付率', value: 96, unit: '%', change: '+1%', up: true, icon: '🚚', color: '#3b82f6' },
])

const quickActions = ref([
  { label: '计划排程', icon: '📅', color: 'from-indigo-500 to-purple-500', path: '/admin/production/schedule' },
  { label: '生产管控', icon: '🎛️', color: 'from-emerald-500 to-teal-500', path: '/admin/production/control' },
  { label: '质量检测', icon: '🔍', color: 'from-amber-500 to-orange-500', path: '/admin/production/quality' },
  { label: '设备监控', icon: '📊', color: 'from-blue-500 to-cyan-500', path: '/admin/production/equipment' },
  { label: '采购申请', icon: '🛒', color: 'from-pink-500 to-rose-500', path: '/admin/supply/purchase' },
  { label: '库存查询', icon: '📦', color: 'from-violet-500 to-purple-500', path: '/admin/supply/warehouse' },
])

const recentOrders = ref([
  { id: 'WO2026040901', product: '精密轴承组件 A型', quantity: 500, status: '生产中', progress: 65, startDate: '2026-04-09' },
  { id: 'WO2026040802', product: '液压缸体 B型', quantity: 200, status: '待排产', progress: 0, startDate: '2026-04-08' },
  { id: 'WO2026040801', product: '传动齿轮组 C型', quantity: 1000, status: '已完成', progress: 100, startDate: '2026-04-07' },
  { id: 'WO2026040703', product: '密封圈组件 D型', quantity: 3000, status: '已完成', progress: 100, startDate: '2026-04-06' },
  { id: 'WO2026040702', product: '弹簧组件 E型', quantity: 800, status: '已取消', progress: 30, startDate: '2026-04-05' },
])

const qualityAlerts = ref([
  { level: 'warning', title: '质检异常：批次 B-20260408-03', desc: '尺寸超出公差范围，已自动隔离', time: '10分钟前' },
  { level: 'info', title: '质检报告生成', desc: '批次 A-20260409-01 质检完成', time: '30分钟前' },
  { level: 'warning', title: '设备报警：CNC-03', desc: '主轴温度异常，请及时处理', time: '1小时前' },
])

const equipmentStatus = ref([
  { name: 'CNC-01', status: '运行中', utilization: 92 },
  { name: 'CNC-02', status: '运行中', utilization: 88 },
  { name: 'CNC-03', status: '告警', utilization: 0 },
  { name: '铣床-01', status: '待机', utilization: 0 },
  { name: '铣床-02', status: '运行中', utilization: 75 },
])

const statusMap: Record<string, string> = {
  '生产中': 'processing',
  '待排产': 'warning',
  '已完成': 'success',
  '已取消': 'default',
}
const equipStatusMap: Record<string, string> = {
  '运行中': 'success',
  '告警': 'error',
  '待机': 'default',
}
</script>

<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <a-row :gutter="[20, 20]" class="mb-6">
      <a-col :xs="24" :sm="12" :xl="6" v-for="stat in stats" :key="stat.label">
        <div class="stat-card" :style="{ '--accent': stat.color }">
          <div class="stat-header">
            <span class="stat-icon">{{ stat.icon }}</span>
            <span :class="['stat-change', stat.up ? 'up' : 'down']">{{ stat.change }}</span>
          </div>
          <div class="stat-value">{{ stat.value }}<span class="stat-unit">{{ stat.unit }}</span></div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[20, 20]">
      <!-- 左侧主体 -->
      <a-col :xs="24" :xl="16">
        <!-- 快捷入口 -->
        <div class="card mb-6">
          <div class="card-title">快捷入口</div>
          <div class="quick-grid">
            <NuxtLink
              v-for="action in quickActions"
              :key="action.label"
              :to="action.path"
              class="quick-item"
            >
              <div class="quick-icon" :class="action.color">{{ action.icon }}</div>
              <span class="quick-label">{{ action.label }}</span>
            </NuxtLink>
          </div>
        </div>

        <!-- 工单列表 -->
        <div class="card">
          <div class="card-title">近期工单</div>
          <a-table
            :dataSource="recentOrders"
            :pagination="false"
            size="small"
            rowKey="id"
            :scroll="{ x: 600 }"
          >
            <a-table-column title="工单编号" dataIndex="id" width="140" />
            <a-table-column title="产品名称" dataIndex="product" />
            <a-table-column title="数量" dataIndex="quantity" width="80" align="center" />
            <a-table-column title="状态" dataIndex="status" width="100" align="center">
              <template #default="{ text }">
                <a-tag :color="statusMap[text] === 'success' ? 'success' : statusMap[text] === 'processing' ? 'processing' : statusMap[text] === 'warning' ? 'warning' : 'default'">
                  {{ text }}
                </a-tag>
              </template>
            </a-table-column>
            <a-table-column title="进度" dataIndex="progress" width="140" align="center">
              <template #default="{ record }">
                <a-progress
                  :percent="record.progress"
                  :status="record.progress === 100 ? 'success' : 'active'"
                  :showInfo="false"
                  size="small"
                />
                <span class="text-xs text-gray-400 ml-2">{{ record.progress }}%</span>
              </template>
            </a-table-column>
            <a-table-column title="开始日期" dataIndex="startDate" width="120" />
          </a-table>
        </div>
      </a-col>

      <!-- 右侧 -->
      <a-col :xs="24" :xl="8">
        <!-- 质量告警 -->
        <div class="card mb-6">
          <div class="card-title">质量告警</div>
          <div class="alert-list">
            <div v-for="(alert, idx) in qualityAlerts" :key="idx" class="alert-item" :class="alert.level">
              <div class="alert-header">
                <span class="alert-dot" :class="alert.level"></span>
                <span class="alert-title">{{ alert.title }}</span>
              </div>
              <div class="alert-desc">{{ alert.desc }}</div>
              <div class="alert-time">{{ alert.time }}</div>
            </div>
          </div>
        </div>

        <!-- 设备状态 -->
        <div class="card">
          <div class="card-title">设备状态</div>
          <div class="equip-list">
            <div v-for="equip in equipmentStatus" :key="equip.name" class="equip-item">
              <span class="equip-name">{{ equip.name }}</span>
              <a-tag :color="equipStatusMap[equip.status] === 'success' ? 'success' : equipStatusMap[equip.status] === 'error' ? 'error' : 'default'" size="small">
                {{ equip.status }}
              </a-tag>
              <span class="equip-util">{{ equip.utilization }}%</span>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

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

.stat-change {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.stat-change.up {
  color: #10b981;
  background: #ecfdf5;
}

.stat-change.down {
  color: #ef4444;
  background: #fef2f2;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.stat-unit {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 4px;
}

.stat-label {
  font-size: 13px;
  color: #9ca3af;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  border-radius: 10px;
  background: #fafafa;
  text-decoration: none;
  transition: all 0.2s;
}

.quick-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.quick-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.1));
}

.quick-label {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

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

.alert-item {
  padding: 12px;
  border-radius: 8px;
  background: #fafafa;
}

.alert-item.warning {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
}

.alert-item.info {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.alert-dot.warning {
  background: #f59e0b;
}

.alert-dot.info {
  background: #3b82f6;
}

.alert-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.alert-desc {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.alert-time {
  font-size: 11px;
  color: #9ca3af;
}

.equip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.equip-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #fafafa;
  border-radius: 8px;
  gap: 8px;
}

.equip-name {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  flex: 1;
}

.equip-util {
  font-size: 12px;
  color: #6b7280;
  width: 40px;
  text-align: right;
}
</style>
