<template>
  <div class="inventory-page">
    <div class="table-card">
      <el-table :data="inventory">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="product.name" :label="$t('product.name')" />
        <el-table-column prop="quantity" :label="$t('product.stock')" width="120" />
        <el-table-column :label="$t('common.edit')" width="200">
          <template #default="{ row }">
            <el-input-number v-model="row.newQty" :min="0" size="small" style="width: 100px" />
            <el-button link type="primary" size="small" @click="updateQty(row)" style="margin-left: 8px">{{ $t('common.save') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { supplierApi } from '../../api'

const inventory = ref<any[]>([])

async function fetchInventory() {
  try {
    const res: any = await supplierApi.getInventory()
    inventory.value = (res.data || []).map((i: any) => ({ ...i, newQty: i.quantity }))
  } catch {
    ElMessage.error('获取库存失败')
  }
}

async function updateQty(row: any) {
  try {
    await supplierApi.updateInventory(row.id, { quantity: row.newQty })
    ElMessage.success('更新成功')
    await fetchInventory()
  } catch {
    ElMessage.error('更新失败')
  }
}

onMounted(fetchInventory)
</script>

<style scoped lang="scss">
.inventory-page { padding: 0; }
.table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }
</style>
