<template>
  <view class="page">
    <NavBar title="提现记录" :showBack="true" />

    <view class="content">
      <!-- 状态筛选 -->
      <view class="filter-tabs">
        <view
          :class="['tab-item', { active: currentStatus === '' }]"
          @click="switchTab('')"
        >
          <text>全部</text>
        </view>
        <view
          :class="['tab-item', { active: currentStatus === 'pending' }]"
          @click="switchTab('pending')"
        >
          <text>审核中</text>
        </view>
        <view
          :class="['tab-item', { active: currentStatus === 'approved' }]"
          @click="switchTab('approved')"
        >
          <text>已通过</text>
        </view>
        <view
          :class="['tab-item', { active: currentStatus === 'paid' }]"
          @click="switchTab('paid')"
        >
          <text>已打款</text>
        </view>
        <view
          :class="['tab-item', { active: currentStatus === 'rejected' }]"
          @click="switchTab('rejected')"
        >
          <text>已驳回</text>
        </view>
      </view>

      <!-- 记录列表 -->
      <scroll-view class="record-scroll" scroll-y @scrolltolower="loadMore" v-if="recordList.length > 0">
        <view
          class="record-card"
          v-for="item in recordList"
          :key="item.id"
        >
          <view class="card-header">
            <text class="card-amount">¥{{ (item.amount || 0).toFixed(2) }}</text>
          <text :class="['card-status', `status-${item.status}`]">
            {{ getStatusLabel(item.status) }}
          </text>
        </view>
        <view class="card-info">
          <view class="info-row">
            <text class="info-label">申请时间</text>
            <text class="info-value">{{ item.createTime }}</text>
          </view>
          <view class="info-row" v-if="item.auditTime">
            <text class="info-label">审核时间</text>
            <text class="info-value">{{ item.auditTime }}</text>
          </view>
          <view class="info-row" v-if="item.payTime">
            <text class="info-label">打款时间</text>
            <text class="info-value">{{ item.payTime }}</text>
          </view>
          <view class="info-row" v-if="item.rejectReason">
            <text class="info-label">驳回原因</text>
            <text class="info-value reject">{{ item.rejectReason }}</text>
          </view>
        </view>
        </view>

        <!-- 加载更多 -->
        <view class="load-more">
          <text v-if="isLoadingMore">加载中...</text>
          <text v-else-if="noMore">没有更多了</text>
        </view>
      </scroll-view>

      <view v-if="!isLoading && recordList.length === 0" class="empty-tip">
        <text>暂无提现记录</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { logger } from '@/utils/logger';
import NavBar from '@/components/NavBar.vue';
import { getMyWithdrawalList } from '@/api/distribution';
import type { WithdrawalRecord } from '@/api/distribution';


const recordList = ref<WithdrawalRecord[]>([]);
const currentStatus = ref<string>('');
const page = ref(1);
const pageSize = 10;
const isLoading = ref(false);
const isLoadingMore = ref(false);
const noMore = ref(false);
const noMoreLocked = ref(false);

onMounted(() => {
  loadRecords(true);
});

const switchTab = (status: string) => {
  currentStatus.value = status;
  page.value = 1;
  noMore.value = false;
  loadRecords(true);
};

const loadRecords = async (reset = false) => {
  if (isLoading.value) return;

  isLoading.value = true;

  try {
    const params: any = { page: page.value, pageSize };
    if (currentStatus.value) {
      params.status = currentStatus.value;
    }

    const result = await getMyWithdrawalList(params);

    if (reset) {
      recordList.value = result.list;
    } else {
      recordList.value = [...recordList.value, ...result.list];
    }

    if (result.list.length < pageSize) {
      noMore.value = true;
    } else {
      page.value++;
    }
  } catch (error) {
    logger.warn('加载提现记录失败', error);
  } finally {
    isLoading.value = false;
  }
};

const loadMore = () => {
  if (isLoadingMore.value || noMore.value || noMoreLocked.value) return;
  noMoreLocked.value = true;
  isLoadingMore.value = true;
  page.value++;
  loadRecords(false).finally(() => {
    isLoadingMore.value = false;
    noMoreLocked.value = false;
  });
};

const getStatusLabel = (status: string): string => {
  const map: Record<string, string> = {
    pending: '审核中',
    approved: '已通过',
    rejected: '已驳回',
    paid: '已打款'
  };
  return map[status] || '未知';
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $bg-color-page;
}

.content {
  padding: 24rpx;
  padding-top: 0;
}

.filter-tabs {
  display: flex;
  background: $bg-color-card;
  border-radius: 16rpx;
  padding: 8rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid $border-color;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: $text-color-tertiary;
  transition: all 0.2s;

  &.active {
    background: $primary-color;
    color: $bg-color-card;
    font-weight: 600;
  }

  &:active:not(.active) {
    background: $bg-color-secondary;
  }
}

.empty-tip {
  padding: 80rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: $text-color-muted;
}

.record-card {
  background: $bg-color-card;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid $border-color;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid $bg-color-secondary;
}

.card-amount {
  font-size: 36rpx;
  font-weight: 700;
  color: $text-color-primary;
}

.card-status {
  font-size: 24rpx;
  font-weight: 500;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;

  &.status-pending {
    color: $warning-color;
    background: $primary-color-bg;
  }

  &.status-approved {
    color: $info-color;
    background: $info-color-bg;
  }

  &.status-rejected {
    color: $error-color;
    background: $error-color-bg;
  }

  &.status-paid {
    color: $primary-color;
    background: $success-color-bg;
  }
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-label {
  font-size: 24rpx;
  color: $text-color-muted;
}

.info-value {
  font-size: 24rpx;
  color: $text-color-secondary;

  &.reject {
    color: $error-color;
  }
}

.load-more {
  padding: 24rpx 0;
  text-align: center;
  font-size: 24rpx;
  color: $text-color-muted;
}
</style>
