<template>
  <div class="page-container">
    <ProTable ref="tableRef" :columns="columns" :request="loadData" :toolbar="{ title: '出入库记录' }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action_type'">
          <a-tag :color="record.action_type === 'STOCK_IN' ? 'green' : record.action_type === 'STOCK_OUT' ? 'red' : 'blue'">{{ record.action_type === 'STOCK_IN' ? '入库' : record.action_type === 'STOCK_OUT' ? '出库' : '调整' }}</a-tag>
        </template>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import { transactionApi } from "@/api/asset";
import ProTable from "@/components/Pro/ProTable/index.vue";
import type { ProTableColumn } from "@/types/pro";

const columns: ProTableColumn[] = [
  { title: "操作类型", dataIndex: "action_type", key: "action_type" },
  { title: "数量", dataIndex: "quantity", key: "quantity" },
  { title: "剩余库存", dataIndex: "remaining_quantity", key: "remaining_quantity" },
  { title: "操作人", dataIndex: "operator_name", key: "operator_name" },
  { title: "备注", dataIndex: "note", key: "note", ellipsis: true },
  { title: "时间", dataIndex: "create_time", key: "create_time" },
];

const loadData = async (params: Record<string, unknown>) => {
  try {
    const res: any = await transactionApi.page({ consumable_id: params.consumable_id || '', page: params.current, pageSize: params.pageSize });
    const pageData = res.data || res;
    return { data: pageData.list || [], total: pageData.total || 0, success: true };
  } catch { return { data: [], total: 0, success: false }; }
};
</script>
