<template>
  <div class="recharge-page">
    <a-card :bordered="false" title="充值管理">
      <div class="filter-bar">
        <a-input-search v-model:value="keyword" placeholder="企业名称..." style="width: 280px" allow-clear />
        <a-select v-model:value="channel" placeholder="支付渠道" style="width: 140px" allow-clear>
          <a-select-option value="alipay">支付宝</a-select-option>
          <a-select-option value="wechat">微信支付</a-select-option>
          <a-select-option value="bank">银行转账</a-select-option>
        </a-select>
        <a-button type="primary" @click="modalVisible = true">
          <template #icon><PlusOutlined /></template>
          手动充值
        </a-button>
      </div>

      <a-table :columns="columns" :data-source="data" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'amount'">
            <span style="color: #22c55e; font-weight: 600">+ ¥ {{ record.amount.toLocaleString() }}</span>
          </template>
          <template v-else-if="column.key === 'channel'">
            <a-tag>{{ channelMap[record.channel] }}</a-tag>
          </template>
          <template v-else-if="column.key === 'status'">
            <a-badge :status="statusBadge[record.status]" :text="statusMap[record.status]" />
          </template>
          <template v-else-if="column.key === 'actions'">
            <a-button type="link" size="small">凭证</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:open="modalVisible" title="手动充值" width="480px" @ok="handleSubmit">
      <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="企业名称">
          <a-input v-model:value="form.enterprise" />
        </a-form-item>
        <a-form-item label="充值金额">
          <a-input-number v-model:value="form.amount" :min="0" :precision="2" style="width: 100%" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="form.remark" :rows="2" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

definePageMeta({ layout: 'admin' })

const keyword = ref('')
const channel = ref<string | undefined>()
const modalVisible = ref(false)
const form = reactive({ enterprise: '', amount: 0, remark: '' })

const channelMap: Record<string, string> = { alipay: '支付宝', wechat: '微信支付', bank: '银行转账', manual: '手动' }
const statusMap: Record<string, string> = { paid: '已支付', pending: '待支付', failed: '已失败' }
const statusBadge: Record<string, any> = { paid: 'success', pending: 'warning', failed: 'error' }

const columns = [
  { title: '企业', dataIndex: 'enterprise', key: 'enterprise', width: 180 },
  { title: '充值金额', key: 'amount', width: 140 },
  { title: '支付渠道', key: 'channel', width: 110 },
  { title: '交易流水', dataIndex: 'flowNo', key: 'flowNo', width: 180 },
  { title: '充值时间', dataIndex: 'createdAt', key: 'createdAt', width: 160 },
  { title: '状态', key: 'status', width: 100 },
  { title: '操作', key: 'actions', width: 100 },
]

const data = ref([
  { id: 1, enterprise: '腾云科技有限公司', amount: 50000, channel: 'alipay', flowNo: 'ZF20260408001', status: 'paid', createdAt: '2026-04-08 09:15' },
  { id: 2, enterprise: '华创数据服务有限公司', amount: 100000, channel: 'bank', flowNo: 'BK20260405002', status: 'paid', createdAt: '2026-04-05 11:00' },
  { id: 3, enterprise: '云智科技有限公司', amount: 20000, channel: 'wechat', flowNo: 'WX20260403003', status: 'paid', createdAt: '2026-04-03 14:30' },
])

const handleSubmit = () => { modalVisible.value = false; message.success('充值成功') }
</script>

<style scoped>
.filter-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
</style>
