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

const stats = ref([
  { label: '安全生产天数', value: 156, unit: '天', icon: '🛡️', color: '#10b981' },
  { label: '本月巡检次数', value: 28, unit: '次', icon: '🔍', color: '#3b82f6' },
  { label: '安全隐患', value: 3, unit: '条', icon: '⚠️', color: '#f59e0b' },
  { label: '应急演练', value: 2, unit: '次', icon: '🚨', color: '#6366f1' },
])

const safetyLogs = ref([
  { id: 'SL-001', type: '巡检', area: '生产车间A区', inspector: '安全员A', result: '正常', time: '2026-04-09 08:30', remark: '-' },
  { id: 'SL-002', type: '巡检', area: '电工房', inspector: '安全员B', result: '隐患', time: '2026-04-09 09:15', remark: '发现1处接线松动' },
  { id: 'SL-003', type: '设备检查', area: 'CNC-03区域', inspector: '安全员A', result: '告警', time: '2026-04-09 10:00', remark: '设备温度异常，已停机' },
  { id: 'SL-004', type: '巡检', area: '仓储区', inspector: '安全员C', result: '正常', time: '2026-04-08 14:00', remark: '-' },
])

const resultColor: Record<string, string> = { '正常': 'success', '隐患': 'warning', '告警': 'error' }
</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" 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-label">{{ stat.label }}</div>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[20, 20]">
      <a-col :xs="24" :xl="16">
        <div class="card">
          <div class="card-title">安全巡检记录</div>
          <a-table :dataSource="safetyLogs" :pagination="{ pageSize: 10 }" size="small" rowKey="id">
            <a-table-column title="记录编号" dataIndex="id" width="100" />
            <a-table-column title="类型" dataIndex="type" width="100" align="center" />
            <a-table-column title="区域" dataIndex="area" />
            <a-table-column title="检查人" dataIndex="inspector" width="100" align="center" />
            <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="remark" />
            <a-table-column title="时间" dataIndex="time" width="160" />
          </a-table>
        </div>
      </a-col>
      <a-col :xs="24" :xl="8">
        <div class="card">
          <div class="card-title">安全知识库</div>
          <div class="doc-list">
            <div class="doc-item">📄 安全生产管理制度 v3.2</div>
            <div class="doc-item">📄 应急救援预案</div>
            <div class="doc-item">📄 特种设备操作规程</div>
            <div class="doc-item">📄 危险源辨识清单</div>
          </div>
        </div>
      </a-col>
    </a-row>
  </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-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--c); }
.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-label { font-size: 12px; 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; }
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-item { padding: 10px; background: #fafafa; border-radius: 6px; font-size: 13px; color: #374151; cursor: pointer; }
.doc-item:hover { background: #f0f0f0; }
.mb-6 { margin-bottom: 20px; }
</style>
