<template>
  <PageLayout>
    <template #header-right>
      <q-btn flat dense icon="search" @click="showSearch = true" />
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template #prepend>
        <div class="bg-white" v-if="filters.length>1">
          <q-tabs
            v-model="form.type"
            no-caps
            dense
            active-color="primary"
            indicator-color="primary"
            class="bg-white"
            inline-label
            >
            <template v-for="(item, i) in filters" :key="i">
              <q-tab :name="item.type">
                {{ item.name }}
              </q-tab>
            </template>
          </q-tabs>
        </div>
        <div class="q-px-md q-pt-sm text-primary row justify-between text-body3">
            <div>{{filterMap[form.type]}}统计：{{ formatMoney(info.money) }}元</div>
            <div v-if="form.type == 3">佣金统计：{{ formatMoney(info.brokerage) }}元</div>
        </div>
      </template>
      <template v-slot="{ item }">
        <q-item
          class="bg-white q-mt-sm"
        >
          <q-item-section>
            <q-item-label>{{ item.title }}
            <span v-if="item.order"> | {{ item.order.lottery_type.name }}
              <template v-if="item.order.issue_num">
              | {{ item.order.issue_num }}
              </template>
              （佣金：{{formatMoney(item.cooperate_brokerage)}}）</span>
            </q-item-label>
            <q-item-label class="text-grey" caption="">
              {{ item.created_at }}
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="">{{item.ie}}{{ formatMoney(item.money) }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
    <q-dialog
      position="right"
      full-height
      v-model="showSearch"
      square=""
      maximized
      class="dialog-full-height"
    >
      <q-card style="width: 85vw" class="full-height column">
        <div class="safe-padding-top"></div>
        <q-card-section class="overflow-auto col">
          <div class="q-my-md text-grey-8">彩种选择</div>
          <div class="row wrap q-col-gutter-sm">
            <div
              v-for="(item, idx) in lotteryTypes"
              :key="idx"
              class="col-4">
            <q-radio
              v-model="form.lottery_type_id"
              :key="idx"
              class="no-icon fit rounded-borders-xs q-py-xs q-px-sm text-caption justify-center"
              :class="
                form.lottery_type_id == item.id
                  ? 'bg-primary text-white'
                  : 'bg-grey-4 text-grey-8'
              "
              :val="item.id"
              :label="item.name"
            />
            </div>
          </div>
          <q-separator spaced="md" size="0.5" />
          <div class="q-mb-sm text-grey-8">票面金额区间</div>
          <div class="row wrap q-col-gutter-sm items-center">
            <q-input dense v-model="form.money_min" class="q-input-sm col-5" type="number" filled />
            <span class="q-pl-sm">-</span>
            <q-input dense v-model="form.money_max" class="q-input-sm col-5" type="number" filled/>
          </div>
          <q-separator spaced="md" size="0.5" />
          <div class="q-mb-sm text-grey-8">时间区间</div>
          <q-btn
            color="grey-4"
            text-color="grey-8"
            unelevated
            dense
            size="md"
            style="width: 240px"
          >
            <div class="text-center col" v-if="form.date_start">{{ form.date_start }} 至 {{ form.date_end }}</div>
            <div class="text-center col text-grey" v-else>选择区间</div>
            <q-icon
              v-if="datePicker?.from"
              size="16px"
              color="grey"
              name="cancel"
              class="q-ml-xs"
              @click.stop="datePicker = {}"
            />
            <q-popup-proxy ref="datePopupRef">
              <q-date v-model="datePicker" range minimal mask="YYYY-MM-DD"> </q-date>
            </q-popup-proxy>
          </q-btn>
        </q-card-section>
        <q-separator size="0.5" />
        <q-card-actions align="center" class="row q-px-md q-py-none col-auto">
          <q-btn
            class="col"
            label="取消"
            color="primary"
            outline
            v-close-popup
            @click="reset"
          />
          <q-btn
            class="col-8"
            label="确定"
            unelevated
            color="primary"
            @click="search"
            v-close-popup
          />
        </q-card-actions>
        <div class="safe-padding-bottom"></div>
      </q-card>
    </q-dialog>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive, watch, shallowReactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { LOTTERY_STATE, isNumberTottery } from "src/utils/const";
import { formatMoney } from 'src/utils/tools'
import { useInfiniteScroll } from 'src/composables/infiniteScroll';

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();

const filters = shallowReactive([
  {
    type: "3",
    name: "出票"
  },
  {
    type: "1",
    name: "加款"
  },
  {
    type: "2",
    name: "扣款"
  },
  {
    type: "4",
    name: "奖金"
  },
  // {
  //   type: "5",
  //   name: "店主"
  // },
]);
const filterMap = filters.reduce((total,item)=>{
  total[item.type] = item.name
  return total
},{})
const lotteryTypes = shallowReactive([]);

api.getOrderFilterOptions().then(res=>{
  res.lottery_types.forEach((item,i)=>{
    lotteryTypes[i] = item
  })
  // res.filter.forEach((item,i)=>{
  //   filters[i] = item
  // })
})


const showSearch = ref(false);
const form = reactive({
  type:'3',
  lottery_type_id:'',
  money_min: null,
  money_max: null,
  date_start:'',
  date_end:'',
});
const datePicker = ref({from:'',to:''})
let searchParamsCache = {...form}
const info = ref({})
const { list, refresh, load,scrollRef }  = useInfiniteScroll((page)=>{
  return api
    .getPartnerWallet({
      page,
      shop_cooperate_id: route.params.shopCooperateId,
      ...searchParamsCache
    }).then(({list,...res}) => {
      info.value = res
      return list
    })
})
function search(){
  searchParamsCache = {...form}
  refresh()
}
const datePopupRef = ref(null);
watch(datePicker,
  () => {
    if(typeof datePicker.value === 'string'){
      form.date_start = datePicker.value
      form.date_end = datePicker.value
    }else{
      form.date_start = datePicker.value?.from||''
      form.date_end = datePicker.value?.to||''
    }
    datePicker.value && datePopupRef.value.hide();
  }
);
watch(()=>{
  return form.type
}, search);
// watch(()=>{
//   return route.params.shopCooperateId
// },search)
function reset(){
  for(let p in searchParamsCache){
    form[p] = searchParamsCache[p]
  }
}
</script>
<style lang="scss" scoped></style>
