<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 提现记录列表 -->
    <uni-list :loading="loading" :loadmore="loadMoreStatus" @loadmore="onLoadMore">
      <!-- 空状态提示 -->
      <view v-if="!loading && list.length === 0" class="flex flex-col items-center justify-center py-16">
        <image src="/static/image/empty.svg" mode="aspectFit" class="w-48 h-48 mb-4" />
        <text class="text-gray-400 text-base">暂无提现记录</text>
      </view>

      <view v-for="(item, index) in list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
        <view class="flex justify-between items-center mb-2">
          <text class="text-gray-500 text-sm">{{ item.create_time || '-' }}</text>
          <text class="font-bold" :class="getAmountColor(item.status)">{{ item.amount.toFixed(2) }}元</text>
        </view>
        <view class="flex items-center mb-2">
          <text class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
            :class="getStatusStyle(item.status)">
            <text class="w-2 h-2 rounded-full mr-1 inline-block" :class="getDotColor(item.status)"></text>
            {{ statusToChinese(item.status) }}
          </text>
        </view>
        <view class="text-xs text-gray-500">
          <text v-if="item.payee_account" class="block">收款账户：{{ maskName(item.payee_account) }}</text>
          <text v-if="item.remark" class="block">备注：{{ item.remark }}</text>
        </view>
      </view>

      <!-- 加载更多/加载完成提示 -->
      <uni-load-more :status="loadMoreStatus" />
    </uni-list>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getWithdrawalRecords } from '@/apis/agent'

// 状态映射配置
const statusConfig = {
  1: {
    chinese: '处理中',
    color: {
      bg: 'bg-yellow-100',
      text: 'text-yellow-800',
      dot: 'bg-yellow-500',
      amount: 'text-yellow-500'
    }
  },
  2: {
    chinese: '提现成功',
    color: {
      bg: 'bg-green-100',
      text: 'text-green-800',
      dot: 'bg-green-500',
      amount: 'text-green-500'
    }
  },
  3: {
    chinese: '提现失败',
    color: {
      bg: 'bg-red-100',
      text: 'text-red-800',
      dot: 'bg-red-500',
      amount: 'text-red-500'
    }
  }
}

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const list = ref([])
const loading = ref(false)
const loadMoreStatus = ref('more') // 'more'|'loading'|'noMore'

// 账户脱敏处理
const maskName = (name) => {
  if (!name || typeof name !== 'string') return ''
  if (name.length <= 7) return name
  return name.substring(0, 3) + '****' + name.substring(7)
}

// 状态转中文
const statusToChinese = (status) => {
  return statusConfig[status]?.chinese || '未知状态'
}

// 获取状态样式
const getStatusStyle = (status) => {
  const config = statusConfig[status] || {}
  return `${config.color?.bg || 'bg-gray-100'} ${config.color?.text || 'text-gray-800'}`
}

// 获取小圆点颜色
const getDotColor = (status) => {
  return statusConfig[status]?.color.dot || 'bg-gray-500'
}

// 获取金额颜色
const getAmountColor = (status) => {
  return statusConfig[status]?.color.amount || 'text-gray-500'
}

// 加载更多数据
const onLoadMore = async () => {
  if (loadMoreStatus.value === 'noMore') return

  page.value++
  await getData()
}

// 获取数据
const getData = async () => {
  try {
    loading.value = true
    loadMoreStatus.value = 'loading'

    const res = await getWithdrawalRecords({
      page: page.value,
      page_size: pageSize.value
    })

    if (res.code === 200) {
      if (page.value === 1) {
        list.value = res.data.list
        total.value = res.data.total
      } else {
        list.value.push(...res.data.list)
      }

      if (list.value.length >= res.data.total || res.data.list.length < pageSize.value) {
        loadMoreStatus.value = 'noMore'
      } else {
        loadMoreStatus.value = 'more'
      }
    } else {
      uni.showToast({
        title: res.msg || '加载失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 页面加载
onMounted(() => {
  getData()
})

// 页面下拉刷新
const onPullDownRefresh = () => {
  page.value = 1
  loadMoreStatus.value = 'more'
  getData().then(() => {
    uni.stopPullDownRefresh()
  })
}

// 导出页面生命周期方法
defineExpose({
  onPullDownRefresh
})
</script>

<style>
/* 自定义样式 */
</style>
<route type="page" lang="json">{
  "layout": "page",
  "title": "提现记录",
  "auth": true,
  "agent": true
}</route>
