<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 userInfo = ref(JSON.parse(sessionStorage.getItem('userInfo')))
// 下拉选项
const range = ref([
  { text: "结算收益", value: 'q15' },
  { text: "结算余额", value: 'q1' },
])

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

// 重置列表状态
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 = {
      walletCode: active.value,
      beginDate: "",
      userId: userInfo.value.sysUser.id
    }
    const res = await request.get(`/business/businessWalletDetail/list?pageNum=${pageNum.value}&pageSize=${pageSize.value}`,{params:data})
    if (res.code === 200) {
      let result = res.result
      list.value = [...list.value, ...(result.records || [])]
      total.value = result.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('加载失败，请重试')
  } 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" @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.changeNote }}
            </span>
          </div>
          <div class="amount" :class="{ negative: item.type === '2' }">
            {{ item.tradeType === '1' ? '+' : '-' }}{{ item.changeAmount }}元
          </div>
        </div>

        <!-- 交易信息 -->
        <div class="item-content">
          <div class="transaction-info">{{ item.createTime }}</div>
          <div class="balance">
            剩余:{{ item.afterChangeAmount }}{{ item.balanceType === 2 || item.balanceType === 1 ? '元' : '' }}
          </div>
        </div>
        <div class="item-footer">
          <time>{{ item.time }}</time>
        </div>
      </div>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.wallet-detail {
  height: calc(100vh - 54px);
  background: #fff;
  font-family: pingfang;
  overflow-y: hidden;
  .fixed-tabs {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
  }

  .list-container {
    margin-top: 50px;
    height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 0 15px;
  }

  .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;

        &.negative {
          color: #4caf50;
        }
      }
    }

    .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>