<template>
  <a-card :bordered="false" class="content-card">
    <template #title>
      <a-space>
        <span>商家审核管理</span>
        <a-tag color="orange">共 {{ applications.length }} 个申请</a-tag>
      </a-space>
    </template>
    <template #extra>
      <a-button @click="loadApplications">
        <template #icon><icon-refresh /></template>
        刷新
      </a-button>
    </template>
    <a-table :columns="applyColumns" :data="applications" :pagination="{ pageSize: 8 }" :bordered="false">
      <template #status="{ record }">
        <a-tag :color="getAuditStatusColor(record.status)">{{ getAuditStatusText(record.status) }}</a-tag>
      </template>
      <template #actions="{ record }">
        <a-button size="mini" type="primary" shape="round" @click="openAuditModal(record)">审核</a-button>
      </template>
    </a-table>
  </a-card>

  <a-modal v-model:visible="auditModalVisible" title="审核商家入驻申请" :ok-text="'提交审核'" cancel-text="取消" @ok="submitAuditModal">
    <a-form :model="auditForm" layout="vertical">
      <a-form-item label="审核结果">
        <a-radio-group v-model="auditForm.status">
          <a-radio value="APPROVED">通过</a-radio>
          <a-radio value="REJECTED">拒绝</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="审核备注">
        <a-textarea v-model="auditForm.remark" placeholder="请输入审核备注（可选）" :rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

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

const applications = ref([])
const auditModalVisible = ref(false)
const auditForm = reactive({ id: null, status: 'APPROVED', remark: '' })

const applyColumns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '申请人', dataIndex: 'applicantNickname' },
  { title: '账号', dataIndex: 'applicantUsername', width: 120 },
  { title: '资质说明', dataIndex: 'qualification', ellipsis: true },
  { title: '状态', slotName: 'status', width: 90 },
  { title: '审核备注', dataIndex: 'remark', ellipsis: true },
  { title: '操作', slotName: 'actions', width: 80 }
]

const getAuditStatusColor = (status) => {
  const colors = { 'PENDING': 'orange', 'APPROVED': 'green', 'REJECTED': 'red' }
  return colors[status] || 'gray'
}

const getAuditStatusText = (status) => {
  const texts = { 'PENDING': '待审核', 'APPROVED': '已通过', 'REJECTED': '已拒绝' }
  return texts[status] || status
}

const loadApplications = async () => {
  applications.value = await api.adminMerchantApplications()
}

const openAuditModal = (row) => {
  auditForm.id = row.id
  auditForm.status = row.status === 'APPROVED' ? 'APPROVED' : 'REJECTED'
  auditForm.remark = row.remark || ''
  auditModalVisible.value = true
}

const submitAuditModal = async () => {
  await api.adminAuditMerchantApplication(auditForm.id, { status: auditForm.status, remark: auditForm.remark })
  Message.success('审核完成')
  auditModalVisible.value = false
  await loadApplications()
}

onMounted(() => {
  loadApplications()
})
</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>
