<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getOrderDetail, getOrderItems } from "@/api/replenishmentOrder";
import dayjs from "dayjs";

defineOptions({
  name: "ReplenishmentOrderDetail"
});

const route = useRoute();
const router = useRouter();
const loading = ref(true);
const order = ref<any>({});
const items = ref<any[]>([]);

const statusMap: Record<number, { text: string; type: string }> = {
  0: { text: "草稿", type: "info" },
  1: { text: "已提交", type: "warning" },
  2: { text: "已同步ERP", type: "primary" },
  3: { text: "已完成", type: "success" },
  4: { text: "已取消", type: "danger" }
};

async function loadData() {
  loading.value = true;
  try {
    const id = route.query.id as string;
    if (!id) return;

    const [orderRes, itemsRes] = await Promise.all([
      getOrderDetail(id),
      getOrderItems(id)
    ]);

    if (orderRes.data) {
      order.value = orderRes.data;
    }
    if (itemsRes.data) {
      items.value = itemsRes.data;
    }
  } finally {
    loading.value = false;
  }
}

function goBack() {
  router.push({ path: "/inventory/replenishment-order/list" });
}

onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="main p-6">
    <div class="mb-4 flex items-center gap-4">
      <el-button :icon="'ep:arrow-left'" @click="goBack">返回列表</el-button>
      <h2 class="text-lg font-bold">补货单详情</h2>
    </div>

    <el-card v-loading="loading" class="mb-4">
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">基本信息</span>
          <el-tag
            v-if="order.status != null"
            :type="(statusMap[order.status]?.type as any) || 'info'"
          >
            {{ (statusMap[order.status] as any)?.text || "未知" }}
          </el-tag>
        </div>
      </template>

      <el-descriptions :column="3" border>
        <el-descriptions-item label="补货单号">
          {{ order.orderNo }}
        </el-descriptions-item>
        <el-descriptions-item label="设备ID">
          {{ order.deviceId }}
        </el-descriptions-item>
        <el-descriptions-item label="门店ID">
          {{ order.shopId || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="ERP采购单号">
          {{ order.erpOrderNo || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="供应商">
          {{ order.supplierName || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="仓库">
          {{ order.warehouseName || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="总数量">
          {{ order.totalQuantity }}
        </el-descriptions-item>
        <el-descriptions-item label="总金额">
          ¥{{ order.totalAmount != null ? Number(order.totalAmount).toFixed(2) : "0.00" }}
        </el-descriptions-item>
        <el-descriptions-item label="预计到货时间">
          {{ order.expectedArrivalTime || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="ERP同步时间">
          {{ order.erpSyncTime || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="创建人">
          {{ order.creatorName }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ order.createTime ? dayjs(order.createTime).format("YYYY-MM-DD HH:mm:ss") : "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ order.remark || "-" }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card v-loading="loading">
      <template #header>
        <span class="font-bold">补货明细</span>
      </template>

      <el-table :data="items" border stripe>
        <el-table-column prop="productCode" label="商品编码" min-width="120" />
        <el-table-column prop="productName" label="商品名称" min-width="140" />
        <el-table-column prop="plannedQuantity" label="计划数量" width="100" />
        <el-table-column prop="actualQuantity" label="实际数量" width="100">
          <template #default="{ row }">
            {{ row.actualQuantity != null ? row.actualQuantity : "-" }}
          </template>
        </el-table-column>
        <el-table-column label="补货前库存" width="110">
          <template #default="{ row }">
            {{ row.beforeStock != null ? row.beforeStock : "-" }}
          </template>
        </el-table-column>
        <el-table-column label="补货后库存" width="110">
          <template #default="{ row }">
            {{ row.afterStock != null ? row.afterStock : "-" }}
          </template>
        </el-table-column>
        <el-table-column label="单价" width="100">
          <template #default="{ row }">
            {{ row.unitPrice != null ? `¥${Number(row.unitPrice).toFixed(2)}` : "-" }}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="100">
          <template #default="{ row }">
            {{ row.totalPrice != null ? `¥${Number(row.totalPrice).toFixed(2)}` : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="shelfNum" label="货架层" width="80">
          <template #default="{ row }">
            {{ row.shelfNum != null ? row.shelfNum : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="position" label="货道位置" width="100">
          <template #default="{ row }">
            {{ row.position || "-" }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
