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

const qualityRecords = ref([
  { id: 'QC-2026040901', wo: 'WO2026040901', product: '精密轴承组件 A型', batch: 'B-20260409-01', inspector: '质检员A', checkTime: '2026-04-09 10:30', sampleSize: 50, passSize: 49, passRate: 98.0, result: '合格', issues: '1件尺寸超差' },
  { id: 'QC-2026040801', wo: 'WO2026040703', product: '密封圈组件 D型', batch: 'B-20260408-03', inspector: '质检员B', checkTime: '2026-04-08 14:20', sampleSize: 100, passSize: 100, passRate: 100, result: '合格', issues: '-' },
  { id: 'QC-2026040702', wo: 'WO2026040702', product: '弹簧组件 E型', batch: 'B-20260407-02', inspector: '质检员A', checkTime: '2026-04-07 09:00', sampleSize: 80, passSize: 72, passRate: 90.0, result: '不合格', issues: '8件弹性不足' },
])

const resultColor: Record<string, string> = { '合格': 'success', '不合格': 'error' }
const activeTab3 = ref('records')
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">质量管理</h2>
      <a-button type="primary">
        <template #icon><PlusOutlined /></template>
        新建质检
      </a-button>
    </div>

    <a-row :gutter="[16, 16]" class="mb-6">
      <a-col :xs="12" :sm="6">
        <div class="stat-card" style="--c:#10b981">
          <div class="stat-num">98.5%</div>
          <div class="stat-lbl">今日良品率</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="6">
        <div class="stat-card" style="--c:#3b82f6">
          <div class="stat-num">156</div>
          <div class="stat-lbl">今日检验数</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="6">
        <div class="stat-card" style="--c:#f59e0b">
          <div class="stat-num">3</div>
          <div class="stat-lbl">待处理异常</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="6">
        <div class="stat-card" style="--c:#6366f1">
          <div class="stat-num">12</div>
          <div class="stat-lbl">质检标准数</div>
        </div>
      </a-col>
    </a-row>

    <a-tabs v-model:activeKey="activeTab3">
      <a-tab-pane key="records" tab="检验记录">
        <div class="card">
          <a-table :dataSource="qualityRecords" :pagination="{ pageSize: 10 }" size="small" rowKey="id">
            <a-table-column title="质检编号" dataIndex="id" width="150" />
            <a-table-column title="工单号" dataIndex="wo" width="150" />
            <a-table-column title="产品" dataIndex="product" />
            <a-table-column title="批次" dataIndex="batch" width="160" />
            <a-table-column title="检验员" dataIndex="inspector" width="90" align="center" />
            <a-table-column title="检验时间" dataIndex="checkTime" width="160" />
            <a-table-column title="抽样数" dataIndex="sampleSize" width="80" align="center" />
            <a-table-column title="良品数" dataIndex="passSize" width="80" align="center" />
            <a-table-column title="良品率" dataIndex="passRate" width="90" align="center">
              <template #default="{ text, record }">
                <span :class="record.result === '合格' ? 'ok' : 'warn'">{{ text }}%</span>
              </template>
            </a-table-column>
            <a-table-column title="结果" dataIndex="result" width="90" align="center">
              <template #default="{ text }">
                <a-tag :color="resultColor[text]">{{ text }}</a-tag>
              </template>
            </a-table-column>
            <a-table-column title="问题描述" dataIndex="issues" />
          </a-table>
        </div>
      </a-tab-pane>
      <a-tab-pane key="standards" 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; }
.stat-card { background: white; border-radius: 12px; padding: 20px; text-align: center; 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: 100%; height: 3px; background: var(--c); }
.stat-num { font-size: 28px; font-weight: 700; color: #1f2937; }
.stat-lbl { font-size: 13px; color: #9ca3af; margin-top: 4px; }
.card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }
.ok { color: #10b981; font-weight: 600; }
.warn { color: #ef4444; font-weight: 600; }
.mb-6 { margin-bottom: 20px; }
</style>
