<template>
  <PageLayout>
    <template #header-title>
      <template v-if="route.params.type == 'chupiao'">
        出票详情
      </template>
      <template v-else-if="route.params.type == 'paijiang'">
        派奖详情
      </template>
      <template v-else>
        中奖详情
      </template>
    </template>
    <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="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>
            <template v-if="route.params.type == 'chupiao'">
              共出票
            </template>
            <template v-else-if="route.params.type == 'paijiang'">
              共中奖(已派奖)
            </template>
            <template v-else>
              共中奖
            </template>
            <span class="text-weight-bold">{{ formatMoney(totalMoney) }}</span>
            元
          </span>
          <span class="text-weight-bold">{{list.length}}种类型</span>
        </div>
      </template>
      <template v-slot="{ item }">
        <q-item class="bg-white"
        :to="{path:'/statistics/report/orders',query:{type:route.params.type,lottery_type_id:item.lottery_type_id,date_start:form.date_start,date_end:form.date_end}}">
          <q-item-section side>
            <q-img
              :src="'/statics/lottery/' + item.lottery_type?.type + '.png'"
              width="32px"
              height="32px"
              no-spinner
            ></q-img>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ item.lottery_type.name }}</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-caption" caption>
              {{item.count}}单 {{formatMoney(route.params.type=='chupiao'?item.money:(route.params.type=='paijiang'?item.lottery_send_prize:(item.lottery_send_prize>0?item.lottery_send_prize:item.lottery_should_send_prize)))}}元
              <q-icon name="arrow_forward_ios" color="grey" size="14px" />
            </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 dateArr = ref({
  from: route.query.date_start||date.formatDate(new Date(),'YYYY-MM-DD'),
  to: route.query.date_end || route.query.date_start||date.formatDate(new Date(),'YYYY-MM-DD')
})
const form = reactive({
  date_start: dateArr.value.from,
  date_end: dateArr.value.to
})
const totalMoney = ref(0)
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getLotteryReport(route.params.type,form).then((res) => {
    totalMoney.value = res.total_money
    return { data: res.list }
  });
})

function clearDate(){
  dateArr.value={from:'',to:''}
  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 = {
      from: route.query.date_start || date.formatDate(new Date(),'YYYY-MM-DD'),
      to: route.query.date_end || route.query.date_start||date.formatDate(new Date(),'YYYY-MM-DD')
    }
    onDateSure()
  }
})
</script>
<style lang="scss" scoped></style>
