<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" clearable 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
        narrow-indicator
          dense
          active-color="red"
          indicator-color="red"
          class="bg-white q-mb-xs"
        >
          <q-tab v-for="item in tabs" :name="item.bill_type" :label="item.name" :key="item.bill_type"
          class="col" />
        </q-tabs>
        <div class="q-px-md q-py-sm" v-if="tab">统计：{{ totalInfo.money }}元</div>
      </template>
      <template v-slot="{ item,index }">
        <q-separator v-if="index" />
        <q-item class="bg-white">
          <q-item-section>
            <q-item-label>{{ item.title }}</q-item-label>
            <q-item-label :class="item.ie=='-'?'text-red':'text-green'">{{ item.ie }}{{ formatMoney(item.money) }}元</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label>{{ formatDate(item.created_at) }}</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, shallowRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { formatDate,formatMoney } from  'src/utils/tools.js'
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const tab = ref(0)
const tabs = ref([])
const date = ref({from:'',to:''})
const form = reactive({})
const totalInfo = shallowRef({})
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getCustomerBillList({
    customer_id: route.params.customerId,
    page,
    bill_type: tab.value,
    ...form
  }).then((res) => {
    !tabs.value.length && res.bill_types && (tabs.value = res.bill_types)
    totalInfo.value = {money: res.money}
    return res.bills
  });
})
watch(tab,refresh)
function clearDate(){
  date.value={from:'',to:''}
  onDateSure()
}
function onDateSure(){
  form.date_start = typeof date.value == 'string' ? date.value : date.value?.from,
  form.date_end = typeof date.value == 'string' ? date.value : date.value?.to
  refresh();
}
</script>
<style lang="scss" scoped></style>
