<template>
  <div class="push-log-container">
    <el-card>
      <template #header>
        <span>商品推送日志</span>
      </template>

      <el-table :data="logList" border v-loading="loading" style="width:100%">
        <el-table-column prop="goodsName" label="商品名称" min-width="150" />
        <el-table-column prop="goodsCode" label="商品编码" width="120" />
        <el-table-column prop="cloudSystem" label="云仓系统" width="100" />
        <el-table-column prop="pushTime" label="推送时间" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{row}">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'">
              {{ row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="errorMsg" label="失败原因" min-width="200" show-overflow-tooltip />
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="loadLogs"
        @current-change="loadLogs"
        style="margin-top:20px; text-align:right;"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getPushLogs } from '@/api/goods'

const logList = ref<any[]>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const loadLogs = async () => {
  loading.value = true
  try {
    const res = await getPushLogs({
      currentPage: currentPage.value,
      pageSize: pageSize.value
    })
    logList.value = res.data.list
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}

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

<style scoped>
.push-log-container {
  padding: 24px;
  background: #f8f9fa;
  min-height: calc(100vh - 64px);
}
</style>