<script lang='ts' setup>
import { cardOutline, listOutline, logoAlipay, logoWechat } from "ionicons/icons";

interface RechargeRecord {
  id: number;
  amount: number;
  paymentType: "alipay" | "unionpay" | "wechat";
  paymentAccount: string;
  status: "success" | "pending" | "failed";
  time: string;
  orderNo: string;
}

// 支付方式选项
const paymentTypes = [
  { type: "alipay" as const, name: "支付宝", icon: logoAlipay, color: "#1677FF" },
  { type: "unionpay" as const, name: "银联", icon: cardOutline, color: "#E31937" },
  { type: "wechat" as const, name: "微信", icon: logoWechat, color: "#07C160" },
];

// 充值记录数据
const rechargeRecords = ref<RechargeRecord[]>([
  {
    id: 1,
    amount: 1000.00,
    paymentType: "alipay",
    paymentAccount: "138****8000",
    status: "success",
    time: "2026-01-18 14:30:20",
    orderNo: "RCH202601181430001",
  },
  {
    id: 2,
    amount: 500.00,
    paymentType: "wechat",
    paymentAccount: "wxid_abc123",
    status: "success",
    time: "2026-01-17 10:15:30",
    orderNo: "RCH202601171015002",
  },
  {
    id: 3,
    amount: 2000.00,
    paymentType: "unionpay",
    paymentAccount: "6222 **** **** 1234",
    status: "pending",
    time: "2026-01-16 16:45:10",
    orderNo: "RCH202601161645003",
  },
  {
    id: 4,
    amount: 100.00,
    paymentType: "alipay",
    paymentAccount: "159****6666",
    status: "success",
    time: "2026-01-15 09:20:00",
    orderNo: "RCH202601150920004",
  },
  {
    id: 5,
    amount: 800.00,
    paymentType: "unionpay",
    paymentAccount: "6217 **** **** 5678",
    status: "failed",
    time: "2026-01-14 20:30:15",
    orderNo: "RCH202601142030005",
  },
  {
    id: 6,
    amount: 300.00,
    paymentType: "alipay",
    paymentAccount: "138****8000",
    status: "success",
    time: "2026-01-13 11:45:30",
    orderNo: "RCH202601131145006",
  },
  {
    id: 7,
    amount: 1500.00,
    paymentType: "wechat",
    paymentAccount: "wxid_abc123",
    status: "success",
    time: "2026-01-12 15:20:10",
    orderNo: "RCH202601121520007",
  },
  {
    id: 8,
    amount: 600.00,
    paymentType: "unionpay",
    paymentAccount: "6222 **** **** 1234",
    status: "success",
    time: "2026-01-11 09:30:45",
    orderNo: "RCH202601110930008",
  },
]);

function getPaymentTypeName(type: "alipay" | "unionpay" | "wechat") {
  return paymentTypes.find(pt => pt.type === type)?.name || type;
}

function getPaymentTypeIcon(type: "alipay" | "unionpay" | "wechat") {
  return paymentTypes.find(pt => pt.type === type)?.icon || cardOutline;
}

function getPaymentTypeColor(type: "alipay" | "unionpay" | "wechat") {
  return paymentTypes.find(pt => pt.type === type)?.color || "#999";
}

function getStatusText(status: "success" | "pending" | "failed") {
  const statusMap = {
    success: "成功",
    pending: "处理中",
    failed: "失败",
  };
  return statusMap[status];
}

function getStatusColor(status: "success" | "pending" | "failed") {
  const colorMap = {
    success: "#52c41a",
    pending: "#faad14",
    failed: "#f5222d",
  };
  return colorMap[status];
}

// 统计数据
const totalAmount = computed(() => {
  return rechargeRecords.value
    .filter(r => r.status === "success")
    .reduce((sum, r) => sum + r.amount, 0);
});

const totalCount = computed(() => {
  return rechargeRecords.value.filter(r => r.status === "success").length;
});
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-buttons slot="start">
          <back-button />
        </ion-buttons>
        <ion-title>充值记录</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <!-- 统计卡片 -->
      <div class="stats-card">
        <div class="stat-item">
          <div class="stat-label">
            累计充值金额
          </div>
          <div class="stat-value">
            ¥{{ totalAmount.toFixed(2) }}
          </div>
        </div>
        <div class="stat-divider" />
        <div class="stat-item">
          <div class="stat-label">
            充值成功次数
          </div>
          <div class="stat-value">
            {{ totalCount }}次
          </div>
        </div>
      </div>

      <!-- 充值记录列表 -->
      <div class="records-section">
        <div v-if="rechargeRecords.length > 0" class="records-list">
          <div
            v-for="record in rechargeRecords"
            :key="record.id"
            class="record-item"
          >
            <div class="record-left">
              <ion-icon
                :icon="getPaymentTypeIcon(record.paymentType)"
                class="record-icon"
                :style="{ color: getPaymentTypeColor(record.paymentType) }"
              />
              <div class="record-info">
                <div class="record-title">
                  {{ getPaymentTypeName(record.paymentType) }}充值
                </div>
                <div class="record-account">
                  {{ record.paymentAccount }}
                </div>
                <div class="record-time">
                  {{ record.time }}
                </div>
                <div class="record-order">
                  订单号：{{ record.orderNo }}
                </div>
              </div>
            </div>
            <div class="record-right">
              <div class="record-amount">
                +¥{{ record.amount.toFixed(2) }}
              </div>
              <div
                class="record-status"
                :style="{ color: getStatusColor(record.status) }"
              >
                {{ getStatusText(record.status) }}
              </div>
            </div>
          </div>
        </div>

        <div v-else class="empty-records">
          <ion-icon :icon="listOutline" class="empty-icon" />
          <div class="empty-text">
            暂无充值记录
          </div>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.stats-card {
  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
  padding: 24px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 12px;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  margin-bottom: 8px;
}

.stat-value {
  color: white;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
}

.records-section {
  background: white;
  padding: 20px;
  min-height: calc(100vh - 200px);
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fafafa;
  border-radius: 12px;
}

.record-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.record-icon {
  font-size: 32px;
}

.record-info {
  flex: 1;
}

.record-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.record-account {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.record-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 2px;
}

.record-order {
  font-size: 11px;
  color: #bbb;
}

.record-right {
  text-align: right;
}

.record-amount {
  font-size: 18px;
  font-weight: 700;
  color: #52c41a;
  margin-bottom: 4px;
}

.record-status {
  font-size: 12px;
  font-weight: 600;
}

.empty-records {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}

.empty-icon {
  font-size: 80px;
  color: #ddd;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
  color: #999;
}
</style>
