<template>
  <view class="finance-recharge">
    <!-- 头部筛选区 -->
    <view class="filter-card border-shadow">
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">时间选择:</text>
          <view class="date-picker-wrap">
            <text class="calendar-icon">📅</text>
            <text class="date-placeholder">开始日期 - 结束日期</text>
          </view>
        </view>
        <view class="filter-item">
          <text class="filter-label">支付类型:</text>
          <view class="select-box">
            <text class="select-txt">全部</text>
            <text class="arrow-down">▼</text>
          </view>
        </view>
        <view class="filter-item search-wrap">
          <text class="filter-label">搜索:</text>
          <input class="search-input" placeholder="请输入用户昵称、订单号" />
        </view>
        <view class="btn-query">
          <text class="btn-txt">查询</text>
        </view>
      </view>
    </view>

    <!-- 统计网格 -->
    <view class="stats-grid">
      <view class="stat-card border-shadow" v-for="(item, index) in stats" :key="index">
        <view class="icon-circle" :class="item.colorClass">
          <text class="stat-icon">{{ item.icon }}</text>
        </view>
        <view class="stat-info">
          <text class="stat-value">{{ item.value }}</text>
          <text class="stat-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 操作区域 -->
    <view class="action-section">
      <view class="btn-export">
        <text class="btn-export-txt">导出</text>
      </view>
    </view>

    <!-- 数据表格 (Flex 模拟) -->
    <view class="table-container border-shadow">
      <view class="table-header">
        <view class="th col-id"><text class="th-txt">ID</text></view>
        <view class="th col-avatar"><text class="th-txt">头像</text></view>
        <view class="th col-nickname"><text class="th-txt">用户昵称</text></view>
        <view class="th col-orderno"><text class="th-txt">订单号</text></view>
        <view class="th col-amount"><text class="th-txt">支付金额</text></view>
        <view class="th col-paid"><text class="th-txt">是否支付</text></view>
        <view class="th col-type"><text class="th-txt">充值类型</text></view>
        <view class="th col-time"><text class="th-txt">支付时间</text></view>
        <view class="th col-ops"><text class="th-txt">操作</text></view>
      </view>

      <view class="table-body">
        <view class="table-row" v-for="item in pagedList" :key="item.id">
          <view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
          <view class="td col-avatar">
            <view class="avatar-box">
              <text class="avatar-placeholder" v-if="!item.hasAvatar">🖼️</text>
              <view class="avatar-img-mock" v-else></view>
            </view>
          </view>
          <view class="td col-nickname"><text class="td-txt">{{ item.nickname }}</text></view>
          <view class="td col-orderno"><text class="td-txt">{{ item.orderNo }}</text></view>
          <view class="td col-amount"><text class="td-txt">{{ item.amount }}</text></view>
          <view class="td col-paid"><text class="td-txt">{{ item.isPaid }}</text></view>
          <view class="td col-type"><text class="td-txt">{{ item.type }}</text></view>
          <view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
          <view class="td col-ops">
            <text class="op-link">删除</text>
          </view>
        </view>
      </view>
    </view>
    <CommonPagination
      v-if="true"
      :total="total"
      :loading="false"
      :currentPage="currentPage"
      :pageSize="pageSize"
      :pageSizeOptionLabels="pageSizeOptionLabels"
      :pageSizeIndex="pageSizeIndex"
      :visiblePages="visiblePages"
      :totalPage="totalPage"
      :jumpPageInput="jumpPageInput"
      @page-size-change="handlePageSizeChange"
      @page-change="handlePageChange"
      @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
      @jump-page="handleJumpPage"
    />
  </view>
</template>

<script setup lang="uts">
import { ref, computed } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'

const stats = ref([
  { label: '充值总金额', value: '446747490.72', icon: '¥', colorClass: 'blue' },
  { label: '充值退款金额', value: '1.19', icon: '¥', colorClass: 'orange' },
  { label: '支付宝充值金额', value: '78812.24', icon: '支', colorClass: 'green' },
  { label: '微信充值金额', value: '8518075.11', icon: '✔', colorClass: 'pink' }
])

interface RechargeRecord {
  id: number
  hasAvatar: boolean
  nickname: string
  orderNo: string
  amount: string
  isPaid: string
  type: string
  time: string
}

const tableData = ref<RechargeRecord[]>([
  {
    id: 4522,
    hasAvatar: true,
    nickname: 'TTA NW',
    orderNo: 'cz540603403592531968',
    amount: '10.00',
    isPaid: '未支付',
    type: '微信充值',
    time: '暂无'
  },
  {
    id: 4521,
    hasAvatar: true,
    nickname: 'TTA NW',
    orderNo: 'cz540592008763277312',
    amount: '3343.00',
    isPaid: '未支付',
    type: '微信充值',
    time: '暂无'
  },
  {
    id: 4520,
    hasAvatar: true,
    nickname: '绯',
    orderNo: 'cz538561368400330752',
    amount: '500.00',
    isPaid: '未支付',
    type: '支付宝充值',
    time: '暂无'
  },
  {
    id: 4519,
    hasAvatar: false,
    nickname: '六六狗',
    orderNo: 'cz538368229429477376',
    amount: '50.00',
    isPaid: '未支付',
    type: '微信充值',
    time: '暂无'
  },
  {
    id: 4518,
    hasAvatar: false,
    nickname: 'aabbc',
    orderNo: 'cz538165303901683712',
    amount: '10.00',
    isPaid: '未支付',
    type: '其他充值',
    time: '暂无'
  },
  { id: 4517, hasAvatar: true, nickname: '张小红', orderNo: 'cz518000000001234567', amount: '100.00', isPaid: '已支付', type: '微信充值', time: '2025-06-20 10:22' },
  { id: 4516, hasAvatar: false, nickname: '李大明', orderNo: 'cz517900000001234567', amount: '50.00', isPaid: '已支付', type: '支付宝充值', time: '2025-06-15 09:30' },
  { id: 4515, hasAvatar: true, nickname: '王建国', orderNo: 'cz517800000001234567', amount: '200.00', isPaid: '已支付', type: '微信充值', time: '2025-06-10 14:55' },
  { id: 4514, hasAvatar: false, nickname: '刘晓燕', orderNo: 'cz517700000001234567', amount: '30.00', isPaid: '已支付', type: '支付宝充值', time: '2025-06-05 11:22' },
  { id: 4513, hasAvatar: true, nickname: 'BoBo', orderNo: 'cz517600000001234567', amount: '1000.00', isPaid: '已支付', type: '微信充值', time: '2025-05-28 08:00' },
  { id: 4512, hasAvatar: false, nickname: '陈小华', orderNo: 'cz517500000001234567', amount: '20.00', isPaid: '未支付', type: '其他充值', time: '暂无' },
  { id: 4511, hasAvatar: true, nickname: '周伟', orderNo: 'cz517400000001234567', amount: '500.00', isPaid: '已支付', type: '支付宝充值', time: '2025-05-20 16:30' },
  { id: 4510, hasAvatar: false, nickname: '吴晓梅', orderNo: 'cz517300000001234567', amount: '150.00', isPaid: '已支付', type: '微信充值', time: '2025-05-15 10:11' },
  { id: 4509, hasAvatar: true, nickname: '郑浩', orderNo: 'cz517200000001234567', amount: '88.00', isPaid: '已支付', type: '微信充值', time: '2025-05-10 09:45' },
  { id: 4508, hasAvatar: false, nickname: '黄丽丽', orderNo: 'cz517100000001234567', amount: '300.00', isPaid: '已支付', type: '支付宝充值', time: '2025-05-05 14:22', hasAvatar: false },
  { id: 4507, hasAvatar: true, nickname: 'Super User', orderNo: 'cz517000000001234567', amount: '999.00', isPaid: '已支付', type: '微信充值', time: '2025-04-28 11:30' },
  { id: 4506, hasAvatar: false, nickname: '孙国强', orderNo: 'cz516900000001234567', amount: '45.00', isPaid: '未支付', type: '其他充值', time: '暂无' },
  { id: 4505, hasAvatar: true, nickname: '赵小燕', orderNo: 'cz516800000001234567', amount: '600.00', isPaid: '已支付', type: '支付宝充值', time: '2025-04-20 09:00' },
  { id: 4504, hasAvatar: false, nickname: '钱大虎', orderNo: 'cz516700000001234567', amount: '75.00', isPaid: '已支付', type: '微信充值', time: '2025-04-15 15:40' },
  { id: 4503, hasAvatar: true, nickname: '李明明', orderNo: 'cz516600000001234567', amount: '250.00', isPaid: '已支付', type: '微信充值', time: '2025-04-10 13:25' }
])

// ========== PAGINATION STATE ==========
const currentPage = ref(1)
const pageSize = ref(15)
const jumpPageInput = ref('')
const pageSizeOptions = [10, 15, 20, 30, 50]
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
const total = computed(() => tableData.value.length)
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
const pagedList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return tableData.value.slice(start, start + pageSize.value)
})
const visiblePages = computed((): number[] => {
  const t = totalPage.value; const cur = currentPage.value
  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
  return [1, -1, cur - 1, cur, cur + 1, -1, t]
})
const handlePageChange = (p: number) => { currentPage.value = p }
const handlePageSizeChange = (e: any) => {
  const idx = Number(e.detail.value)
  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
  currentPage.value = 1
}
const handleJumpPage = () => {
  const p = parseInt(jumpPageInput.value)
  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
}
// ========== END PAGINATION STATE ==========
</script>

<style scoped lang="scss">
.finance-recharge {
  padding: 0;
  background-color: transparent;
  min-height: auto;
}

.border-shadow {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 筛选卡片 */
.filter-card {
  padding: 20px 24px;
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 28px;
}

.filter-label {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
  white-space: nowrap;
}

.date-picker-wrap {
  width: 220px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 12px;
}

.calendar-icon {
  font-size: 12px;
  margin-right: 8px;
}

.date-placeholder {
  font-size: 13px;
  color: #c0c4cc;
}

.select-box {
  width: 160px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.select-txt {
  font-size: 13px;
  color: #606266;
}

.arrow-down {
  font-size: 8px;
  color: #c0c4cc;
}

.search-wrap {
  flex: 1;
}

.search-input {
  flex: 1;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 13px;
}

.btn-query {
  background-color: #1890ff;
  border-radius: 4px;
  height: 32px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.btn-txt {
  color: #fff;
  font-size: 14px;
}

/* 统计网格 */
.stats-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-card {
  width: 24%;
  padding: 24px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.blue { background-color: #e6f7ff; color: #1890ff; }
.orange { background-color: #fff7e1; color: #fa8c16; }
.green { background-color: #f6ffed; color: #52c41a; }
.pink { background-color: #fff0f6; color: #eb2f96; }

.stat-icon { font-size: 22px; font-weight: bold; }

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #303133;
  line-height: 1.1;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-top: 6px;
}

/* 操作区 */
.action-section {
  margin-bottom: 15px;
}

.btn-export {
  width: 60px;
  height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-export-txt {
  font-size: 13px;
  color: #606266;
}

/* 表格 */
.table-container {
  display: flex;
  flex-direction: column;
}

.table-header {
  background-color: #f8f9fb;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ebeef5;
}

.th {
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-txt {
  font-size: 14px;
  font-weight: 600;
  color: #909399;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ebeef5;
}

.td {
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-txt {
  font-size: 13px;
  color: #606266;
}

.col-id { width: 80px; }
.col-avatar { width: 80px; }
.col-nickname { width: 150px; }
.col-orderno { width: 220px; }
.col-amount { width: 120px; }
.col-paid { width: 120px; }
.col-type { width: 150px; }
.col-time { width: 150px; }
.col-ops { flex: 1; min-width: 100px; }

.avatar-box {
  width: 40px;
  height: 40px;
  background-color: #f0f2f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar-img-mock {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.avatar-placeholder {
  font-size: 16px;
}

.op-link {
  font-size: 13px;
  color: #1890ff;
}
</style>
