<template>
  <PageLayout>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template #prepend v-if="!props.type">
        <q-tabs
          v-model="tab"
          no-caps
        narrow-indicator
          dense
          active-color="primary"
          indicator-color="primary"
          class="bg-white q-mb-sm"
        >
          <q-tab v-for="item in tabs" :name="item.value" :label="item.name" :key="item.value" />
        </q-tabs>
      </template>
      <template v-slot="{ item,index }">
        <q-separator v-if="index" />
        <q-item class="bg-white">
          <q-item-section>
            <q-item-label v-if="props.type == 'draw'">
              {{PAY_TYPES[item.type].name}}：
              <template v-if="item.type == 1">{{ item.ali_account }}</template>
              <template v-else>{{ item.bank_master }}{{ item.bank_branch }} - {{ item.bank_no }}</template>
            </q-item-label>
            <q-item-label v-else>
              {{ item.title }}
            <span class="text-grey-7" v-if="item.order_money">(订单{{ item.order_money }}元)</span>
            </q-item-label>
            <q-item-label class="text-grey" caption>{{ item.created_at }}</q-item-label>
            <q-item-label class="text-red" caption v-if="item.state == 3">失败原因：{{ item.admin_remark }}</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-badge v-if="item.state" :color="drawMoneyStateColor[item.state]">{{ drawMoneyState[item.state] }}</q-badge>
            <q-item-label :class="item.ie=='-'?'text-teal':'text-red'">{{ item.ie }}{{ formatMoney(item.money) }}</q-item-label>
            <q-item-label class="text-grey" caption>{{ formatMoney(item.end_balance) }}元</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
import { formatMoney } from 'src/utils/tools'
import {PAY_TYPES} from 'src/utils/const'
const drawMoneyState = {
  1: '待处理',
  2: '成功',
  3: '失败',
}
const drawMoneyStateColor = {
  1: 'grey',
  2: 'positive',
  3: 'negative',
}
const props = defineProps(['type'])
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const tab = ref(route.query.type||'all')
// 全部收入支出
const tabs = ref([{
  name: '全部',value:'all',
},{
  name: '支出',value:'-',
},{
  name: '收入',value:'+',
}])
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api[props.type=='draw'?'getMyWithdrawList':'walletBills']({
    page,
    type: props.type,
    ie: tab.value
  })
})
watch(tab,refresh)
</script>
<style lang="scss" scoped></style>
