<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="q-px-md bg-white" v-if="filters.length>1">
          <q-tabs
            v-model="form.filter"
            no-caps
            dense
            square
            active-bg-color="primary"
            active-color="white"
            indicator-color="primary"
            class="text-primary tabs-button text-body3"
          >
            <template v-for="(item, i) in filters" :key="i">
              <q-separator
                v-if="i != 0"
                vertical
                size="0.5px"
                color="primary"
              />
              <q-tab :name="item.filter" class="col-4 q-px-none">
                {{ item.name }}
              </q-tab>
            </template>
          </q-tabs>
        </div>
        <div class="row bg-white items-start text-caption q-py-xs">
          <q-tabs
            v-model="form.filter_child"
            no-caps
            dense
            active-color="primary"
            indicator-color="transparent"
          >
            <q-tab
              v-for="item in filterChilds"
              :ripple="false"
              class="q-px-sm no-focus-helper"
              :name="item.filter"
              :key="item.filter"
            >
              {{ item.name }}
            </q-tab>
          </q-tabs>
        </div>
      </template>
      <template v-slot="{ item }">
        <q-item
          class="bg-white q-mt-sm"
          :to="{ path: '/order/' + item.order_sn }"
        >
          <q-item-section avatar>
            <img width="42" :src="'/statics/lottery/' + item.lottery_type?.type + '.png'"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>
              {{ item.lottery.name }}
              <q-badge v-if="item.shop_cooperate_id>0" color="accent" outline class="q-ml-xs">合作</q-badge></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="text-red">{{ formatMoney(item.money) }}元</q-item-label>
            <q-item-label class="text-grey" caption>{{ LOTTERY_STATE[item.lottery_state] }}</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">
          <q-input
            class="full-width"
            outlined
            dense
            rounded
            v-model="form.keyword"
            placeholder="请输入要搜索的用户"
            clearable
            hide-bottom-space
            hide-hint
            @focus="showHistory = true"
            @blur="showHistory = false"
          >
            <template v-slot:prepend>
              <q-icon name="search" />
            </template>
            <!-- <template v-slot:after>
          <q-btn flat dense label="搜索"/>
        </template> -->
          </q-input>
          <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">
            <div
              v-for="(item, idx) in lotteryStates"
              :key="idx"
              class="col-4">
            <q-radio
              v-model="form.lottery_state_id"
              class="no-icon fit rounded-borders-xs q-py-xs text-caption justify-center"
              :class="
                form.lottery_state_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>
          <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, onActivated } 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 } 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: "1",
  //   name: "店内订单"
  // },
  // {
  //   type: "2",
  //   name: "合作订单(出票)"
  // },
  // {
  //   type: "3",
  //   name: "合作订单(派单)"
  // }
]);
const filterChilds = shallowReactive([
  // {
  //   type: 1,
  //   name: "出票"
  // },
  // {
  //   type: 2,
  //   name: "追号"
  // },
  // {
  //   type: 3,
  //   name: "合买"
  // }
]);
const lotteryTypes = shallowReactive([]);
const lotteryStates = shallowReactive([])

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


const showSearch = ref(false);
const form = reactive({
  keyword:'',
  filter:'feat_instore',
  filter_child:'cp',
  lottery_type_id:'',
  lottery_state_id:'',
  date_start:'',
  date_end:'',
  shop_cooperate_id: route.query.shopCooperateId
});
const datePicker = ref({from:'',to:''})
let searchParamsCache = {...form}
const { list, refresh, load,scrollRef }  = useInfiniteScroll((page)=>{
  return api
    .searchOrder({
      page,
      ...searchParamsCache
    })
})
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.filter+'|'+form.filter_child
}, search);

function reset(){
  for(let p in searchParamsCache){
    form[p] = searchParamsCache[p]
  }
}

let enterTime = route.query.t

onActivated(()=>{
  let isrefresh = false
  if((route.query.shopCooperateId || form.shop_cooperate_id) && route.query.shopCooperateId!=form.shop_cooperate_id){
    form.shop_cooperate_id = route.query.shopCooperateId
    isrefresh = true
  }
  else if(route.query.t!=enterTime){
    isrefresh = true
  }
  enterTime = route.query.t
  isrefresh && search()
})
</script>
<style lang="scss" scoped></style>
