<template>
  <div>
    <div class="kra-search-box">
      <el-form :inline="true" :model="searchInfo">
        <el-form-item label="渠道"><el-input v-model="searchInfo.provider" placeholder="alipay / wechat-v3" clearable /></el-form-item>
        <el-form-item label="商户订单号"><el-input v-model="searchInfo.tradeNo" clearable /></el-form-item>
        <el-form-item label="业务类型"><el-input v-model="searchInfo.businessType" clearable /></el-form-item>
        <el-form-item label="支付状态">
          <el-select v-model="searchInfo.paymentStatus" clearable placeholder="全部">
            <el-option label="待支付" value="pending" /><el-option label="已支付" value="paid" />
            <el-option label="失败" value="failed" /><el-option label="已退款" value="refunded" />
          </el-select>
        </el-form-item>
        <el-form-item><el-button type="primary" icon="search" @click="reload">查询</el-button><el-button icon="refresh" @click="reset">重置</el-button></el-form-item>
      </el-form>
    </div>
    <div class="kra-table-box">
      <el-table :data="rows" row-key="ID" stripe>
        <el-table-column prop="tradeNo" label="商户订单号" min-width="190" show-overflow-tooltip />
        <el-table-column prop="provider" label="渠道" width="120" />
        <el-table-column prop="subject" label="商品/标题" min-width="180" show-overflow-tooltip />
        <el-table-column label="金额" width="130"><template #default="scope">{{ scope.row.amount }} {{ scope.row.currency }}</template></el-table-column>
        <el-table-column label="支付状态" width="110"><template #default="scope"><el-tag :type="statusType(scope.row.paymentStatus)">{{ statusText(scope.row.paymentStatus) }}</el-tag></template></el-table-column>
        <el-table-column label="发货" width="110"><template #default="scope"><el-tag :type="scope.row.fulfillmentStatus === 'succeeded' ? 'success' : 'info'">{{ scope.row.fulfillmentStatus }}</el-tag></template></el-table-column>
        <el-table-column label="退款" width="110"><template #default="scope">{{ scope.row.refundStatus }}</template></el-table-column>
        <el-table-column prop="businessId" label="业务 ID" min-width="150" show-overflow-tooltip />
        <el-table-column label="创建时间" width="180"><template #default="scope">{{ formatDate(scope.row.createdAt) }}</template></el-table-column>
      </el-table>
      <div class="kra-pagination"><el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" @current-change="changePage" @size-change="changeSize" /></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getPaymentOrders } from '@/api/payment'
import { formatDate } from '@/utils/format'

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const rows = ref([])
const searchInfo = ref({})
const statusText = (status) => ({ initialized: '初始化', pending: '待支付', paid: '已支付', failed: '失败', closed: '已关闭', partially_refunded: '部分退款', refunded: '已退款' }[status] || status || '-')
const statusType = (status) => ({ paid: 'success', refunded: 'success', failed: 'danger', closed: 'info' }[status] || 'warning')
const load = async () => {
  const res = await getPaymentOrders({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (res.code === 0) { rows.value = res.data.list || []; total.value = res.data.total || 0; page.value = res.data.page || page.value; pageSize.value = res.data.pageSize || pageSize.value }
}
const reload = () => { page.value = 1; load() }
const reset = () => { searchInfo.value = {}; reload() }
const changePage = (value) => { page.value = value; load() }
const changeSize = (value) => { pageSize.value = value; page.value = 1; load() }
load()
</script>
