<template>
  <PageLayout>
    <template #header-right>
      <q-btn dense unelevated="" class="select-btn" 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="dateArr" 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>
        <div class="row q-px-md q-py-sm justify-between text-caption">
          <span>
            共<span class="text-weight-bold">{{ total.count }}</span>家
          </span>
          <span>共<span class="text-weight-bold text-red">{{ total.money }}</span>元流水</span>
        </div>
      </template>
      <template v-slot="{ item }">
        <q-item class="bg-white">
          <q-item-section side>
            <q-icon color="primary" name="storefront" />
          </q-item-section>
          <q-item-section>
            <q-item-label :lines="1">{{ item.name }}
              <q-badge outline :label="item.shop_sn" color="grey" />
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-caption">
              <span class="text-red">{{ formatMoney(item.c) }}</span>元
            </q-item-label>
          </q-item-section>
        </q-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, date } from "quasar";
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
import { formatMoney } from 'src/utils/tools'
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const total = reactive({ count: 0, money: 0 })
function defaultDate() {
  let d = date.adjustDate(new Date(), { day: 1 })
  return {
    from: date.formatDate(date.subtractFromDate(d, { months: 1 }), 'YYYY-MM-DD'),
    to: date.formatDate(date.subtractFromDate(d, { day: 1 }), 'YYYY-MM-DD')
  }
}
const dateArr = ref(defaultDate())
const form = reactive({
  date_start: dateArr.value.from,
  date_end: dateArr.value.to
})
const { list, refresh, load, scrollRef } = useInfiniteScroll((page) => {
  return api.getAgentShops(form).then((res) => {
    total.count = res.length
    total.money = formatMoney(res.reduce((total, item) => total + item.c * 1, 0))
    return { data: res }
  });
})

function clearDate() {
  dateArr.value = defaultDate()
  onDateSure()
}
function onDateSure() {
  form.date_start = typeof dateArr.value == 'string' ? dateArr.value : dateArr.value?.from
  form.date_end = typeof dateArr.value == 'string' ? dateArr.value : dateArr.value?.to
  refresh();
}
let enterTime = route.query.t
onActivated(() => {
  if (route.query.t != enterTime) {
    enterTime = route.query.t
    dateArr.value = defaultDate()
    onDateSure()
  }
})
</script>
<style lang="scss" scoped></style>
