<template>
  <PageLayout>
    <template #header-right>
      <q-btn dense unelevated="" color="grey-3" text-color="dark" icon-right="expand_more" :label="form.date_start?(form.date_start+'至'+form.date_end):''">
      <q-popup-proxy ref="popupRef">
        <q-date v-model="date" range minimal mask="YYYY-MM-DD">
          <q-btn color="primary" flat class="float-right" @click="onDateSure" v-close-popup label="确定"/>
          <q-btn color="grey" flat class="float-right" @click="clearDate" v-close-popup label="清空"/>
        </q-date>
      </q-popup-proxy>
    </q-btn>
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template #prepend>
        <q-tabs
          v-model="tab"
          no-caps
          dense
          active-color="primary"
          indicator-color="primary"
          class="bg-white"
        >
          <q-tab v-for="item,key in tabs" :name="item.id" :key="key">
            {{ item.name }}
            <!-- DELAY 暂时隐藏 -->
            <!-- （{{ formatMoney(item.money||0) }}） -->
          </q-tab>
        </q-tabs>
        <q-card flat class="q-ma-md" :class="{'bg-green': state==2,'bg-red':state==3,'bg-blue':state==1}">
          <q-card-section>
            <div class="row">
            <q-btn rounded unelevated dense :outline="state!=2" :color="state==2?'white':''" :text-color="state==2?'green':'white'" class="q-mr-sm col" @click="state=2">转账成功</q-btn>
            <q-btn rounded unelevated dense :outline="state!=1" :color="state==1?'white':''" :text-color="state==1?'blue':'white'" class="q-mr-sm col" @click="state=1">转账中</q-btn>
            <q-btn rounded unelevated dense  :outline="state!=3" :color="state==3?'white':''" :text-color="state==3?'red':'white'" class="q-mr-sm col" @click="state=3">转账失败</q-btn>
            </div>
            <div class="text-white q-pt-md">
              ￥<span class="text-h4">0</span>
            </div>
          </q-card-section>
        </q-card>
      </template>
      <template v-slot="{ item }">
        <DrawMoneyItem :item="item" />
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch,onActivated } 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 DrawMoneyItem from "./components/DrawMoneyItem.vue";
import { formatMoney } from 'src/utils/tools'
import {PAY_TYPES} from 'src/utils/const'
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const tabs = ref(JSON.parse(JSON.stringify(PAY_TYPES)))
const tab = ref(Object.values(PAY_TYPES)[0].id)
const state = ref(2)
const date = ref({from:'',to:''})
const form = reactive({})
// TODO提现历史记录
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getCustomerWithdrawList({
    page,
    state:state.value,
    type: tab.value,
    ...form
  }).then((res) => {
    // !tabs.value.length && res.tabs && (tabs.value = res.tabs)
    return res
  });
})

watch(tab,refresh)
watch(state,refresh)
function clearDate(){
  date.value={from:'',to:''}
  onDateSure()
}
function onDateSure(){
  setFormDate()
  refresh();
}
function setFormDate(){
  form.date_start = typeof date.value == 'string' ? date.value : date.value?.from,
  form.date_end = typeof date.value == 'string' ? date.value : date.value?.to
}
function updateParams(){
  date.value = {from: route.query.date_start||'',to: route.query.date_end||''}
  setFormDate()
}
updateParams()
let enterTime = route.query.t
onActivated(()=>{
  if(route.query.t!=enterTime){
    enterTime = route.query.t
    updateParams()
    refresh()
  }
})
</script>
<style lang="scss" scoped></style>
