<template>
  <a-card :bordered="false" class="content-card">
    <template #title>库存管理</template>
    <template #extra>
      <a-button @click="loadInventory">
        <template #icon><icon-refresh /></template>
        刷新
      </a-button>
    </template>
    <a-table :columns="inventoryColumns" :data="inventory" :pagination="{ pageSize: 8 }" :bordered="false">
      <template #changeQty="{ record }">
        <a-tag :color="record.changeQty > 0 ? 'green' : 'red'">
          {{ record.changeQty > 0 ? '+' : '' }}{{ record.changeQty }}
        </a-tag>
      </template>
      <template #actions="{ record }">
        <a-popconfirm content="确定删除此库存记录吗？" @ok="deleteInventory(record.id)">
          <a-button size="mini" status="danger" shape="round">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { api } from '../../api'
import { IconRefresh } from '@arco-design/web-vue/es/icon'

const inventory = ref([])

const inventoryColumns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '商品名称', dataIndex: 'productName' },
  { title: '变动', slotName: 'changeQty', width: 100 },
  { title: '备注', dataIndex: 'note' },
  { title: '时间', dataIndex: 'createdAt', width: 160 },
  { title: '操作', slotName: 'actions', width: 80 }
]

const loadInventory = async () => { inventory.value = await api.merchantInventory() }

const deleteInventory = async (id) => {
  await api.deleteMerchantInventory(id)
  Message.success('库存记录已删除')
  await loadInventory()
}

onMounted(() => {
  loadInventory()
})
</script>

<style scoped>
.content-card {
  border-radius: 12px;
}

:deep(.arco-card-header) {
  border-bottom: 1px solid #f0f0f0;
}
</style>
