<template>
  <PageLayout>
    <!-- <template #header-right>
      <q-btn
            color="grey-4"
            text-color="grey-8"
            flat
            dense
          >
            <div class="text-center col" v-if="form.date_start">
              {{ form.date_start }}
              <template v-if="form.date_start !== form.date_end"> 至 {{ form.date_end }}</template>
            </div>
            <div class="text-center col text-grey" v-else>选择日期</div>
            <q-icon
              v-if="(typeof datePicker == 'string' && datePicker) || 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>
    </template> -->
    <template #header-append>
      <q-tabs
          v-model="form.audit_state"
          no-caps
          dense
          active-color="primary"
          indicator-color="primary"
          class="bg-white"
        >
          <q-tab v-for="item in tabs" :name="item.value" :key="item.value">
            {{ item.name }}
          </q-tab>
        </q-tabs>
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template v-slot="{ item,index }">
        <q-item class="bg-white">
          <q-item-section avatar>
            <UserAvatar color="accent" :src="item.shop.avatar_url||item.shop.avatar"/>
          </q-item-section>
          <q-item-section>
            <q-item-label class="text-weight-bold">{{ item.shop.name }}</q-item-label>
            <q-item-label caption>
              {{ item.apply_message }}
            </q-item-label>
          </q-item-section>
          <q-item-section side v-if="item.audit_state === 3">
            <q-btn-group unelevated>
              <q-btn color="primary" dense class="q-py-none q-px-sm" @click="audit(index,1)">同意</q-btn>
              <q-btn color="orange" dense class="q-py-none q-px-sm" @click="audit(index,2)">拒绝</q-btn>
            </q-btn-group>
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
  </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 = [{ name: '待处理',value: 3}, { name: '已拒绝',value: 2 },{ name: '已同意',value: 1 }]
const form = reactive({
  audit_state: 3,
  date_start:'',
  date_end:'',
});
// const datePicker = ref({from:'',to:''})
// 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||''
//     }
//     if(datePicker.value){
//       datePopupRef.value.hide();
//       refresh()
//     }
//   }
// );
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getPartnerList({
    page,
    type: 'entrusted',
    ...form
  }).then((res) => {
    return res.list
  });
})

watch(()=>{
  return form.audit_state
}, refresh)

function audit(index,audit_state){
  // let item = list[index]
  if(audit_state === 2){
    $q.dialog({
    cancel: true,
    title:`拒绝合作申请`,
    message:'清输入拒绝原因',
    prompt: {
      model: '',
    }
  }).onOk((val) => {
    auditPartner(index, {audit_state, audit_message : val })
  });
  return
  }
  auditPartner(index,{audit_state,audit_message:'同意' })
}
function auditPartner(index,data){
  data.shop_cooperate_id = list[index].id,
  api.auditPartner(data).then((res) => {
    $q.notify({ type: "positive", message: (res.audit_state == 1? '同意':'拒绝') + '合作申请成功' });
    list.splice(index,1)
    store.refresh()
  })
  .catch((e) => {
    $q.notify({ type: "negative", message: e.message });
  });
}

</script>
<style lang="scss" scoped></style>
