<template>
  <a-card :bordered="false" class="content-card">
    <template #title>
      <a-space>
        <span>评价管理</span>
        <a-tag color="orange">共 {{ reviews.length }} 条评价</a-tag>
      </a-space>
    </template>
    <a-table :columns="reviewColumns" :data="reviews" :pagination="{ pageSize: 8 }" :bordered="false">
      <template #rating="{ record }">
        <a-rate :model-value="record.rating" readonly />
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '../../api'

const reviews = ref([])

const reviewColumns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '订单号', dataIndex: 'orderNo' },
  { title: '商品名称', dataIndex: 'productName' },
  { title: '评分', slotName: 'rating', width: 180 },
  { title: '内容', dataIndex: 'content', ellipsis: true },
  { title: '时间', dataIndex: 'createdAt', width: 160, render: ({ record }) => formatDate(record.createdAt) }
]

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleString('zh-CN')
}

const loadReviews = async () => { reviews.value = await api.merchantReviews() }

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

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

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