<template>
  <section class="page-grid">
    <section class="panel panel-hero process-hero">
      <div class="hero-copy">
        <p class="eyebrow">流程与工序中心</p>
        <span class="title-with-help" title="本页聚焦产品工艺主档、待执行物料需求和现场报工接入字段。">
          <h3>围绕产品、MRP 与报工字段建立工序执行闭环</h3>
        </span>
      </div>
      <div class="formula-box">
        <span>材料测算逻辑</span>
        <span class="title-with-help" title="再按采购倍数与库存缺口生成采购建议。">
          <strong>订单数量 × 单件毛重 = 理论需求</strong>
        </span>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <div>
          <p class="eyebrow">产品主档</p>
          <h3>工艺与报废标准</h3>
        </div>
        <span class="panel-tag">真实主数据</span>
      </div>

      <div class="table-wrap">
        <table class="data-table">
          <thead>
            <tr>
              <th>产品编码</th>
              <th>产品名称</th>
              <th>版本</th>
              <th>规格</th>
              <th>单重</th>
              <th>允许报废率</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="product in paginatedProducts" :key="product.item_id">
              <td>{{ product.item_code }}</td>
              <td>{{ product.item_name }}</td>
              <td>{{ product.version_no }}</td>
              <td>{{ product.specification || "-" }}</td>
              <td>{{ Number(product.unit_weight_kg).toFixed(3) }} kg</td>
              <td>{{ formatRate(product.allowed_scrap_rate) }}</td>
            </tr>
            <tr v-if="!products.length">
              <td colspan="6" class="empty-row">暂无产品主数据</td>
            </tr>
          </tbody>
        </table>
      </div>
      <PaginationBar v-model:page="productPage" v-model:page-size="productPageSize" :total="products.length" />
    </section>

    <section class="panel">
      <div class="panel-header">
        <div>
          <p class="eyebrow">MRP 需求</p>
          <h3>待执行物料需求与采购建议</h3>
        </div>
        <span class="panel-tag">库存驱动</span>
      </div>

      <div class="table-wrap">
        <table class="data-table compact-table">
          <thead>
            <tr>
              <th>需求单号</th>
              <th>订单号</th>
              <th>产品</th>
              <th>材料</th>
              <th>理论重量</th>
              <th>缺口重量</th>
              <th>建议采购</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="demand in paginatedMrpDemands" :key="demand.demand_id">
              <td>{{ demand.demand_no }}</td>
              <td>{{ demand.order_no }}</td>
              <td>{{ demand.product_name }}</td>
              <td>{{ demand.material_name }}</td>
              <td>{{ formatWeight(demand.theoretical_weight_kg) }}</td>
              <td>{{ formatWeight(demand.shortage_weight_kg) }}</td>
              <td>{{ formatWeight(demand.suggested_purchase_weight_kg) }}</td>
            </tr>
            <tr v-if="!mrpDemands.length">
              <td colspan="7" class="empty-row">暂无 MRP 需求数据</td>
            </tr>
          </tbody>
        </table>
      </div>
      <PaginationBar v-model:page="mrpPage" v-model:page-size="mrpPageSize" :total="mrpDemands.length" />
    </section>

    <section class="panel">
      <div class="panel-header">
        <div>
          <p class="eyebrow">报工接入字段</p>
          <h3>工人扫码报工回传字段</h3>
        </div>
        <span class="panel-tag">小程序接入</span>
      </div>

      <div class="field-grid">
        <article v-for="field in miniAppFields" :key="field.field_name" class="field-card">
          <div class="field-top">
            <strong>{{ field.label }}</strong>
            <span :class="field.required ? 'required-chip' : 'optional-chip'">
              {{ field.required ? "必填" : "选填" }}
            </span>
          </div>
          <code :title="field.description">{{ field.field_name }}</code>
        </article>
      </div>
    </section>
  </section>
</template>

<script setup>
import { onMounted, ref } from "vue";

import PaginationBar from "../components/PaginationBar.vue";
import { fetchResource } from "../services/api";
import { usePagination } from "../utils/pagination";

const products = ref([]);
const mrpDemands = ref([]);
const miniAppFields = ref([]);
const {
  page: productPage,
  pageSize: productPageSize,
  rows: paginatedProducts
} = usePagination(products);
const {
  page: mrpPage,
  pageSize: mrpPageSize,
  rows: paginatedMrpDemands
} = usePagination(mrpDemands);

function formatWeight(weight) {
  return `${(Number(weight || 0) / 1000).toFixed(2)} 吨`;
}

function formatRate(rate) {
  const numeric = Number(rate || 0);
  const percent = numeric <= 1 ? numeric * 100 : numeric;
  return `${percent.toFixed(2)}%`;
}

onMounted(async () => {
  const [productResponse, mrpResponse, miniFieldsResponse] = await Promise.all([
    fetchResource("/master-data/products", []),
    fetchResource("/planning/mrp-demands", []),
    fetchResource("/master-data/mini-app-fields", [])
  ]);

  products.value = productResponse;
  mrpDemands.value = mrpResponse;
  miniAppFields.value = miniFieldsResponse;
});
</script>
