<template>
  <a-card :bordered="false" class="content-card">
    <template #title>
      <a-space>
        <span>风控审核</span>
        <a-badge :count="risks.length" :show-zero="true" />
      </a-space>
    </template>
    <template #extra>
      <a-button @click="loadRisks">
        <template #icon><icon-refresh /></template>
        刷新
      </a-button>
    </template>
    <a-table :columns="riskColumns" :data="risks" :pagination="{ pageSize: 8 }" :bordered="false">
      <template #riskType="{ record }">
        <a-tag :color="getRiskColor(record.riskType)">{{ record.riskType }}</a-tag>
      </template>
    </a-table>
  </a-card>
</template>

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

const risks = ref([])

const riskColumns = [
  { title: '订单号', dataIndex: 'orderNo', width: 180 },
  { title: '状态', dataIndex: 'status', width: 100 },
  { title: '金额', dataIndex: 'totalAmount', render: ({ record }) => `¥${record.totalAmount}`, width: 100 },
  { title: '风险类型', slotName: 'riskType', width: 120 },
  { title: '风险说明', dataIndex: 'riskReason' }
]

const getRiskColor = (type) => {
  const colors = { 'HIGH_AMOUNT': 'red', 'SHIP_DELAY': 'orange', 'NO_LOGISTICS': 'purple', 'REFUND_PENDING': 'orange' }
  return colors[type] || 'gray'
}

const loadRisks = async () => {
  risks.value = await api.adminOrderRisks()
}

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

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

:deep(.arco-btn-primary) {
  background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
  border-color: transparent;
}

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