<script setup>
import { ref, watch, } from 'vue'
import request from '@/utils/request'
import { useRoute } from 'vue-router'
const route = useRoute()

// 响应式数据
const list = ref([])
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const finished = ref(false)
const loading = ref(false)
const emptyTipsShow = ref(false)

// 下拉选项
const range = ref([
  { text: "现金钱包", value: 4 },
  { text: "团队奖励", value: 6 },
])

// 获取路由参数中的tab
const active = ref(Number(route.query.type) || 5)

// 重置列表状态
const resetList = () => {
  list.value = []
  pageNum.value = 1
  finished.value = false
  loading.value = false
  total.value = 0
  emptyTipsShow.value = false
  // getList()
}

watch(active, () => {
  resetList()
})

const getList = async () => {
  try {
    const data = {
      withdrawType: active.value,
      beginDate: ""
    }
    const res = await request.post(`/ops/withdraw/list?pageNum=${pageNum.value}&pageSize=${pageSize.value}`, data)
    if (res.code === 200) {
      list.value = [...list.value, ...(res.rows || [])]
      total.value = res.total || 0
      if (list.value.length >= total.value) {
        finished.value = true
      } else {
        pageNum.value++
      }
      if (list.value.length >= total.value) {
        finished.value = true
      }
    } else {
      showFailToast(res.msg || '加载失败')
      finished.value = true
    }
  } catch (error) {
    console.error('获取列表失败:', error)
    showFailToast('加载失败，请重试')
    finished.value = true
  } finally {
    loading.value = false
  }
}

// Tab 点击处理
const handleClick = (item) => {
  if (active.value == item.value) return
  active.value = item.value
  resetList()
}

</script>

<template>
  <div class="wallet-detail">
    <!-- Tabs -->
    <var-tabs v-model:active="active" class="fixed-tabs">
      <var-tab
        v-for="item in range"
        :key="item.value"
        :name="item.value"
        @click="handleClick(item)"
      >
        {{ item.text }}
      </var-tab>
    </var-tabs>

    <!-- List -->
    <van-list
      class="list-container"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
    >
      <div v-for="(item, index) in list" :key="index" class="detail-item">
        <!-- 头部信息 -->
        <div class="item-header">
          <div class="type-info">
            <span class="type-text">
              {{ item.withdrawType == 4 ? "现金钱包" : 
                 item.withdrawType == 6 ? "团队奖励" : "" }}
            </span>
          </div>
          <div class="amount">
            +{{ item.withdrawAmount }}元
          </div>
        </div>

        <!-- 交易信息 -->
        <div class="item-content">
          <div class="transaction-info">
            <template v-if="item.status == '0' || item.status == '1'">
              <div class="processing">审核中</div>
            </template>
            <template v-else-if="item.status == '2'">
              <div class="success">已到账,请查收</div>
            </template>
            <template v-else-if="item.status == '3'">
              <div class="failed">驳回</div>
            </template>
          </div>
          <div class="balance">
            {{ item.bankName }}{{ item.bankNum?.slice(-4) }}
          </div>
        </div>

        <!-- 底部信息 -->
        <div class="item-footer">
          <time>{{ item.createTime }}</time>
        </div>
      </div>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.wallet-detail {
  background: url("@/static/home/beijing.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 15px;
  height: 100%;
  box-sizing: border-box;

  .list-container {
    height: calc(100vh - 130px);
    border-radius: 10px;
    margin: 10px 15px 15px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #fff;
  }

  .detail-item {
    padding: 15px;
    border-bottom: 1px solid #eee;

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .type-text {
        font-size: 14px;
        color: #333;
      }

      .amount {
        font-size: 14px;
        color: #f44336;
      }
    }

    .item-content {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #666;
      margin-bottom: 5px;

      .processing {
        color: #ff9800;
      }

      .success {
        color: #4caf50;
      }

      .failed {
        color: #f44336;
      }
    }

    .item-footer {
      font-size: 12px;
      color: #999;
    }
  }

  .loading-text,
  .finished-text {
    padding: 15px 0;
    text-align: center;
    color: #999;
    font-size: 14px;
  }

  .empty-tips {
    text-align: center;
    padding: 100px 0;
    color: #999;
    font-size: 14px;
  }
}
</style>