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

const realTimeData = ref([
  { id: 'WO2026040901', product: '精密轴承组件 A型', line: '产线1', planQty: 500, doneQty: 325, passQty: 318, passRate: 97.8, status: '生产中' },
  { id: 'WO2026040703', product: '密封圈组件 D型', line: '产线3', planQty: 3000, doneQty: 2100, passQty: 2058, passRate: 98.0, status: '生产中' },
])

const alerts = ref([
  { id: 1, type: 'warning', msg: '产线1：主轴温度偏高，当前78°C', time: '10:30' },
  { id: 2, type: 'info', msg: 'WO2026040901 完成500件，当前进度65%', time: '10:15' },
  { id: 3, type: 'error', msg: '产线2：刀具寿命预警，请及时更换', time: '09:45' },
])

const activeTab2 = ref('realtime')
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">生产管控</h2>
      <a-space>
        <a-button @click="() => {}">导出报表</a-button>
        <a-button type="primary">
          <template #icon><PlusOutlined /></template>
          新建工单
        </a-button>
      </a-space>
    </div>

    <a-tabs v-model:activeKey="activeTab2">
      <a-tab-pane key="realtime" tab="实时监控">
        <a-row :gutter="[20, 20]">
          <a-col :xs="24" :xl="16">
            <div class="card">
              <div class="card-title">实时生产进度</div>
              <a-table :dataSource="realTimeData" :pagination="false" size="small" rowKey="id">
                <a-table-column title="工单编号" dataIndex="id" width="150" />
                <a-table-column title="产品" dataIndex="product" />
                <a-table-column title="产线" dataIndex="line" width="80" align="center" />
                <a-table-column title="计划数量" dataIndex="planQty" width="100" align="center" />
                <a-table-column title="完成数量" dataIndex="doneQty" width="100" align="center">
                  <template #default="{ record }">
                    <span class="num-highlight">{{ record.doneQty }}</span>
                  </template>
                </a-table-column>
                <a-table-column title="良品数量" dataIndex="passQty" width="100" align="center" />
                <a-table-column title="良品率" dataIndex="passRate" width="90" align="center">
                  <template #default="{ text }">
                    <span :class="text >= 97 ? 'rate-good' : 'rate-warn'">{{ text }}%</span>
                  </template>
                </a-table-column>
                <a-table-column title="进度" dataIndex="doneQty" width="150" align="center">
                  <template #default="{ record }">
                    <a-progress :percent="Math.round(record.doneQty / record.planQty * 100)" size="small" />
                  </template>
                </a-table-column>
                <a-table-column title="状态" dataIndex="status" width="100" align="center">
                  <template #default="{ text }">
                    <a-badge status="processing" :text="text" />
                  </template>
                </a-table-column>
              </a-table>
            </div>
          </a-col>
          <a-col :xs="24" :xl="8">
            <div class="card">
              <div class="card-title">实时告警</div>
              <div class="alert-list">
                <div v-for="alert in alerts" :key="alert.id" class="alert-item" :class="alert.type">
                  <span class="alert-icon">{{ alert.type === 'error' ? '🔴' : alert.type === 'warning' ? '🟡' : '🔵' }}</span>
                  <div class="alert-body">
                    <div class="alert-msg">{{ alert.msg }}</div>
                    <div class="alert-time">{{ alert.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-tab-pane>

      <a-tab-pane key="history" tab="历史记录">
        <div class="card">
          <a-empty description="历史记录列表" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </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; }
.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; }

.num-highlight { font-weight: 700; color: #4f46e5; }
.rate-good { color: #10b981; font-weight: 600; }
.rate-warn { color: #f59e0b; font-weight: 600; }

.alert-list { display: flex; flex-direction: column; gap: 10px; }
.alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 8px; }
.alert-item.error { background: #fef2f2; }
.alert-item.warning { background: #fffbeb; }
.alert-item.info { background: #eff6ff; }
.alert-icon { font-size: 14px; }
.alert-msg { font-size: 13px; color: #374151; }
.alert-time { font-size: 11px; color: #9ca3af; margin-top: 4px; }
</style>
