<template>
  <PageLayout>
    <template #header-right>
      <!-- <q-btn flat dense icon="search"></q-btn> -->
      <q-btn flat dense to="/cooperate/pending" icon="o_notifications">
        <q-badge v-if="store.cooperate.shop_auditing_num" color="red" rounded floating style="right:0; top:0px;"></q-badge>
      </q-btn>
    </template>
    <template #header-title>

      <q-input
       class="full-width"
        outlined
        dense
        rounded
        v-model="keyword"
        placeholder="请输入店铺名或手机号"
        clearable
        hide-bottom-space
        hide-hint
        @keyup.enter="search"
      >
        <template v-slot:append>
          <q-icon name="search" @click="search"/>
        </template>
      </q-input>
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template #prepend>
        <q-tabs
          v-model="tab"
          no-caps
          dense
          active-color="primary"
          indicator-color="primary"
          class="bg-white"
          inline-label
        >
          <q-tab v-for="item in tabs" :name="item.id" :key="item.id"
            :alert="item.badge && store.cooperate[item.badge]?'red':false">
            {{ item.name }}
            <!-- <q-badge v-if="item.badge && store.cooperate[item.badge]" color="red" rounded></q-badge> -->
            <!-- DELAY 暂时隐藏 -->
            <!-- <span v-if="item.badge && store.cooperate[item.badge]" class="text-red">
              （{{ store.cooperate[item.badge] }}）
            </span> -->
          </q-tab>
        </q-tabs>
        <div class="row justify-between text-caption text-grey q-py-sm q-px-md">
          <span>合作店铺数量（{{total.num}}）</span>
          <span>总额：{{formatMoney(total.balance)}}</span>
        </div>
      </template>
      <template v-slot="{ item }">
        <q-item class="bg-white" :to="item.audit_state == 1?{path:'/cooperate/'+tab+'/'+item.id}:''">
          <q-item-section avatar class="relative-position">
            <UserAvatar color="accent" :src="tab === 'entrust'?(item.cooperate?.avatar_url||item.cooperate?.avatar):(item.shop?.avatar_url||item.shop?.avatar)">
              <q-badge v-if="item.lottery_auditing_num && tab === 'entrusted'" color="red" rounded floating></q-badge>
            </UserAvatar>
          </q-item-section>
          <q-item-section>
            <div class="row text-weight-bold">
              <q-item-label class="col">{{tab === 'entrust'? item.cooperate?.name: item.shop?.name }}</q-item-label>
            </div>
            <q-item-label caption>
              <template v-if="item.audit_state == 1">
                {{ item.shop_cooperate_lottery.map((item)=>item.lottery_type.name).join(' ') }}
              </template>
              <template v-else-if="item.audit_state ==2">
                {{ item.audit_message }}
              </template>
              <template v-else>
                {{ item.apply_message }}
              </template>
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <div class="row flex-center" v-if="item.audit_state === 1">
              <span v-if="item.audit_state == 1" class="text-red text-weight-bold">¥{{ formatMoney(item.balance) }}</span>
              <q-icon name="keyboard_arrow_right" size="14px" />
            </div>
          <q-badge v-else-if="item.audit_state == 3" outline color="primary" label="审批中" />
          <q-badge v-else-if="item.audit_state == 2" outline color="orange" label="失败" />
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
    <template #footer>
      <q-footer v-if="tab =='entrust'" class="row">
        <q-btn to="/cooperate/add" square="" class="col" unelevated color="primary">添加合作店铺</q-btn>
      </q-footer>
    </template>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch,onActivated } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } 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 tabs = [{id:'entrust',name:'甩单管理'},{id:'entrusted',name:'接单管理',badge:'lottery_auditing_num'}]
const tab = ref(tabs[0].id)
const keyword = ref('')
let _keyword = keyword.value
const total = reactive({
  num: 0,
  balance: 0
})
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getPartnerList({
    page,
    keyword: _keyword,
    audit_state: 1,
    type: tab.value
  }).then((res) => {
    total.num = res.list.total
    total.balance = res.total_balance
    return res.list
  });
})
watch(tab,refresh)
watch(()=>{
  return store.cooperate.lottery_auditing_num
},refresh)
function search(){
  _keyword = keyword.value
  refresh()
}
// let enterTime = route.query.t
// onActivated(()=>{
//   if(route.query.t!=enterTime){
//     enterTime = route.query.t
//     refresh()
//   }
// })
</script>
<style lang="scss" scoped></style>
