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

const { activeTab } = useNav()
activeTab.value = 'product-design'

// 产品数据
const products = ref([
  { id: 'PD-001', name: '精密轴承组件 A型', code: 'BA-A-001', category: '轴承类', version: 'V2.1', status: '设计中', progress: 75, designer: '张工', updateTime: '2026-04-08' },
  { id: 'PD-002', name: '液压缸体 B型', code: 'HA-B-002', category: '液压类', version: 'V1.5', status: '评审中', progress: 90, designer: '李工', updateTime: '2026-04-07' },
  { id: 'PD-003', name: '传动齿轮组 C型', code: 'GA-C-003', category: '传动类', version: 'V3.0', status: '已发布', progress: 100, designer: '王工', updateTime: '2026-04-01' },
  { id: 'PD-004', name: '密封圈组件 D型', code: 'SA-D-004', category: '密封类', version: 'V1.2', status: '设计中', progress: 45, designer: '赵工', updateTime: '2026-04-09' },
  { id: 'PD-005', name: '弹簧组件 E型', code: 'SA-E-005', category: '弹簧类', version: 'V2.0', status: '已发布', progress: 100, designer: '张工', updateTime: '2026-03-28' },
])

const statusMap: Record<string, string> = {
  '设计中': 'processing',
  '评审中': 'warning',
  '已发布': 'success',
}

// 设计任务
const designTasks = ref([
  { id: 1, task: '优化轴承组件公差设计', assignee: '张工', deadline: '2026-04-15', priority: 'high' },
  { id: 2, task: '完成缸体3D建模', assignee: '李工', deadline: '2026-04-12', priority: 'medium' },
  { id: 3, task: '齿轮强度校核报告', assignee: '王工', deadline: '2026-04-10', priority: 'high' },
  { id: 4, task: '密封圈材料选型', assignee: '赵工', deadline: '2026-04-18', priority: 'low' },
])

const priorityMap: Record<string, string> = {
  high: 'error',
  medium: 'warning',
  low: 'default',
}

// BOM 清单
const bomItems = ref([
  { no: 1, code: 'BA-A-001-01', name: '外圈', material: 'GCr15', qty: 2, unit: '件', supplier: '洛阳轴承' },
  { no: 2, code: 'BA-A-001-02', name: '内圈', material: 'GCr15', qty: 2, unit: '件', supplier: '洛阳轴承' },
  { no: 3, code: 'BA-A-001-03', name: '滚动体', material: 'Si3N4', qty: 12, unit: '件', supplier: '日本精工' },
  { no: 4, code: 'BA-A-001-04', name: '保持架', material: 'PA66', qty: 1, unit: '件', supplier: '本地供应商' },
])

const selectedProduct = ref<any>(null)
const showBomModal = ref(false)

const viewBom = (product: any) => {
  selectedProduct.value = product
  showBomModal.value = true
}

const modal = reactive({ visible: false, title: '', record: null as any })

const openModal = (title: string, record?: any) => {
  modal.title = title
  modal.record = record || {}
  modal.visible = true
}

const statusFilter = ref<string[]>([])
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">产品设计</h2>
      <a-button type="primary" @click="openModal('新增产品')">
        <template #icon><PlusOutlined /></template>
        新建产品
      </a-button>
    </div>

    <a-row :gutter="[20, 20]">
      <a-col :xs="24" :xl="16">
        <!-- 产品列表 -->
        <div class="card">
          <div class="card-header">
            <span class="card-title">产品设计列表</span>
            <a-select
              v-model:value="statusFilter"
              mode="multiple"
              placeholder="筛选状态"
              style="width: 200px"
              allowClear
            >
              <a-select-option value="设计中">设计中</a-select-option>
              <a-select-option value="评审中">评审中</a-select-option>
              <a-select-option value="已发布">已发布</a-select-option>
            </a-select>
          </div>
          <a-table
            :dataSource="products"
            :pagination="{ pageSize: 10 }"
            size="small"
            rowKey="id"
          >
            <a-table-column title="产品编号" dataIndex="id" width="100" />
            <a-table-column title="产品名称" dataIndex="name">
              <template #default="{ record }">
                <a @click="viewBom(record)" class="link">{{ record.name }}</a>
              </template>
            </a-table-column>
            <a-table-column title="产品编码" dataIndex="code" width="120" />
            <a-table-column title="类别" dataIndex="category" width="100" />
            <a-table-column title="版本" dataIndex="version" width="80" />
            <a-table-column title="状态" dataIndex="status" width="100" align="center">
              <template #default="{ text }">
                <a-tag :color="statusMap[text]">{{ 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" size="small" :showInfo="false" />
                <span class="text-xs text-gray-400 ml-2">{{ record.progress }}%</span>
              </template>
            </a-table-column>
            <a-table-column title="负责人" dataIndex="designer" width="80" align="center" />
            <a-table-column title="更新时间" dataIndex="updateTime" width="110" />
            <a-table-column title="操作" width="120" align="center" fixed="right">
              <template #default="{ record }">
                <a-space>
                  <a @click="openModal('编辑产品', record)">编辑</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确认删除？" ok-text="确认" cancel-text="取消">
                    <a class="danger">删除</a>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </a-col>

      <a-col :xs="24" :xl="8">
        <!-- 设计任务 -->
        <div class="card mb-6">
          <div class="card-header">
            <span class="card-title">设计任务</span>
            <a-button type="link" size="small">全部</a-button>
          </div>
          <div class="task-list">
            <div v-for="task in designTasks" :key="task.id" class="task-item">
              <div class="task-header">
                <span class="task-name">{{ task.task }}</span>
                <a-tag :color="priorityMap[task.priority]" size="small">
                  {{ task.priority === 'high' ? '高' : task.priority === 'medium' ? '中' : '低' }}
                </a-tag>
              </div>
              <div class="task-meta">
                <span><UserOutlined /> {{ task.assignee }}</span>
                <span><CalendarOutlined /> {{ task.deadline }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 设计统计 -->
        <div class="card">
          <div class="card-title">设计统计</div>
          <div class="stat-row">
            <div class="stat-item">
              <span class="stat-num">12</span>
              <span class="stat-lbl">设计中</span>
            </div>
            <div class="stat-item">
              <span class="stat-num">5</span>
              <span class="stat-lbl">评审中</span>
            </div>
            <div class="stat-item">
              <span class="stat-num">28</span>
              <span class="stat-lbl">已发布</span>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- BOM 弹窗 -->
    <a-modal
      v-model:open="showBomModal"
      :title="`BOM清单 - ${selectedProduct?.name || ''}`"
      width="700px"
      :footer="null"
    >
      <a-table
        :dataSource="bomItems"
        :pagination="false"
        size="small"
        rowKey="no"
      >
        <a-table-column title="序号" dataIndex="no" width="60" align="center" />
        <a-table-column title="物料编码" dataIndex="code" width="130" />
        <a-table-column title="物料名称" dataIndex="name" />
        <a-table-column title="材质" dataIndex="material" width="100" />
        <a-table-column title="用量" dataIndex="qty" width="60" align="center" />
        <a-table-column title="单位" dataIndex="unit" width="60" align="center" />
        <a-table-column title="供应商" dataIndex="supplier" />
      </a-table>
    </a-modal>

    <!-- 新增/编辑弹窗 -->
    <a-modal
      v-model:open="modal.visible"
      :title="modal.title"
      width="500px"
      @ok="modal.visible = false"
    >
      <a-form layout="vertical">
        <a-form-item label="产品名称">
          <a-input v-model:value="modal.record.name" placeholder="请输入产品名称" />
        </a-form-item>
        <a-form-item label="产品编码">
          <a-input v-model:value="modal.record.code" placeholder="请输入产品编码" />
        </a-form-item>
        <a-form-item label="产品类别">
          <a-select v-model:value="modal.record.category" placeholder="请选择类别">
            <a-select-option value="轴承类">轴承类</a-select-option>
            <a-select-option value="液压类">液压类</a-select-option>
            <a-select-option value="传动类">传动类</a-select-option>
            <a-select-option value="密封类">密封类</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="负责人">
          <a-select v-model:value="modal.record.designer" placeholder="请选择负责人">
            <a-select-option value="张工">张工</a-select-option>
            <a-select-option value="李工">李工</a-select-option>
            <a-select-option value="王工">王工</a-select-option>
            <a-select-option value="赵工">赵工</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </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-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

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

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

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

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

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

.task-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #9ca3af;
}

.task-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #4f46e5;
}

.stat-lbl {
  font-size: 12px;
  color: #9ca3af;
}

.link {
  color: #4f46e5;
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}

.danger {
  color: #ef4444;
}

.mb-6 {
  margin-bottom: 20px;
}
</style>
