<script setup>
import { ref, watch, } from 'vue'
import request from '@/utils/request'
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: 1 },
  { text: "产品收益", value: 2 },
])

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

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

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

const getList = async () => {
  try {
    const data = {
      withdrawType: active.value,
      beginDate: "2025-01"
    }
    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 :name="item.value" v-for="item in range" :key="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 class="list" v-for="(item, index) in list" :key="index">
        <div class="left">
          <div class="title" v-if="item.walletType == 1">生活补贴</div>
          <div class="title" v-if="item.walletType == 2">产品收益</div>
          <div class="price">+{{ item.withdrawAmount }}元</div>
        </div>

        <div class="left">
          <div class="title">申请时间</div>
          <div class="date">{{ item.createTime }}</div>
        </div>

        <div class="left">
          <div class="title">申请状态</div>
          <div class="date status">
            <div class="title" v-if="item.status == 0">待打款</div>
            <div class="title" v-if="item.status == 1">资金校对中</div>
            <div class="title success" v-if="item.status == 2">已到账,请查收</div>
            <div class="title" v-if="item.status == 3">驳回</div>
          </div>
        </div>

        <var-steps :current="item.status" dot>
          <var-step v-if="item.status >= 0">提交申请</var-step>
          <var-step v-if="item.status >= 1">审核中</var-step>
          <var-step v-if="item.status >= 2">审核通过</var-step>
          <var-step v-if="item.status >= 3">到账失败</var-step>
        </var-steps>
      </div>

    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.wallet-detail {
  height: 100vh;
  font-family: pingfang;
  box-sizing: border-box;
  overflow: hidden;
  .list-container {
    padding: 0 15px;
    background: #f5f6f8;
    height: calc(100vh - 90px);
    overflow-y: auto;
  }


  .list {
    background: #fff;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;

    .left {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 8px;

      .title {
        width: 140px;
        font-size: 16px;
        font-weight: 400;
        padding-bottom: 7px;
      }

      .date {
        font-size: 12px;
        color: #B2B2B2;
        height: 1.5vh;
        line-height: 1.5vh;

        &.status {
          text-align: right;

          .success {
            color: green;
          }
        }
      }

      .price {
        font-size: 18px;
        font-weight: bold;
        color: red;
      }
    }
  }
}
</style>