<script setup lang="ts">
definePageMeta({ layout: 'admin' })
const { activeTab } = useNav()
activeTab.value = 'production-energy'

const stats = ref([
  { label: '今日用电', value: 2856, unit: 'kWh', cost: '¥2,142', icon: '⚡', color: '#f59e0b' },
  { label: '今日用水', value: 128, unit: 'm³', cost: '¥384', icon: '💧', color: '#3b82f6' },
  { label: '今日用气', value: 560, unit: 'm³', cost: '¥840', icon: '🌬️', color: '#6366f1' },
  { label: '碳排放', value: 1.8, unit: '吨', icon: '🌱', color: '#10b981' },
])

const energyUsage = ref([
  { name: 'CNC-01', electric: 450, water: 8, gas: 120, cost: 337.5 },
  { name: 'CNC-02', electric: 420, water: 7, gas: 115, cost: 315.0 },
  { name: 'CNC-03', electric: 0, water: 5, gas: 0, cost: 0 },
  { name: 'MILL-01', electric: 0, water: 3, gas: 0, cost: 0 },
  { name: 'MILL-02', electric: 380, water: 6, gas: 100, cost: 285.0 },
])
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">能耗管理</h2>
      <a-space>
        <a-select value="2026-04" style="width: 120px">
          <a-select-option value="2026-04">2026年4月</a-select-option>
          <a-select-option value="2026-03">2026年3月</a-select-option>
        </a-select>
        <a-button @click="() => {}">导出报表</a-button>
      </a-space>
    </div>

    <a-row :gutter="[16, 16]" class="mb-6">
      <a-col :xs="12" :sm="6" v-for="stat in stats" :key="stat.label">
        <div class="stat-card" :style="{ '--c': stat.color }">
          <div class="stat-icon">{{ stat.icon }}</div>
          <div class="stat-body">
            <div class="stat-value">{{ stat.value }}<span class="stat-unit">{{ stat.unit }}</span></div>
            <div class="stat-sub">{{ stat.cost }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </a-col>
    </a-row>

    <div class="card">
      <div class="card-title">设备能耗明细</div>
      <a-table :dataSource="energyUsage" :pagination="false" size="small" rowKey="name">
        <a-table-column title="设备" dataIndex="name" width="120" />
        <a-table-column title="用电(kWh)" dataIndex="electric" width="120" align="center">
          <template #default="{ text }">
            <span :class="text > 0 ? 'val' : 'dim'">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column title="用水(m³)" dataIndex="water" width="120" align="center">
          <template #default="{ text }">
            <span :class="text > 0 ? 'val' : 'dim'">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column title="用气(m³)" dataIndex="gas" width="120" align="center">
          <template #default="{ text }">
            <span :class="text > 0 ? 'val' : 'dim'">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column title="能耗成本(元)" dataIndex="cost" width="130" align="right">
          <template #default="{ text }">
            <span :class="text > 0 ? 'val' : 'dim'">¥{{ text.toFixed(1) }}</span>
          </template>
        </a-table-column>
        <a-table-column title="占比" dataIndex="cost" align="center">
          <template #default="{ record, text }">
            <a-progress
              :percent="Math.round(text / energyUsage.reduce((a, b) => a + b.cost, 0) * 100)"
              size="small"
              :showInfo="false"
            />
          </template>
        </a-table-column>
      </a-table>
      <div class="total-row">
        <span>合计</span>
        <span>2856 kWh</span>
        <span>128 m³</span>
        <span>560 m³</span>
        <span>¥3,366.00</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container { padding: 24px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-title { font-size: 20px; font-weight: 600; color: #1f2937; margin: 0; }
.stat-card { background: white; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }
.stat-icon { font-size: 28px; }
.stat-value { font-size: 22px; font-weight: 700; color: #1f2937; }
.stat-unit { font-size: 12px; color: #9ca3af; margin-left: 2px; }
.stat-sub { font-size: 13px; color: #6b7280; }
.stat-label { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.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; }
.val { font-weight: 600; color: #374151; }
.dim { color: #d1d5db; }
.total-row { display: flex; justify-content: space-between; padding: 12px 8px; border-top: 1px solid #f0f0f0; font-weight: 600; font-size: 13px; color: #374151; }
.total-row span:nth-child(2), .total-row span:nth-child(3), .total-row span:nth-child(4) { width: 120px; text-align: center; }
.total-row span:nth-child(5) { width: 130px; text-align: right; }
.mb-6 { margin-bottom: 20px; }
</style>
