<template>
  <PageLayout>
    <template #header-right>
      <q-btn flat dense :to="{path:'/order/search',query:{title:'历史订单',shopCooperateId:route.params.shopCooperateId}}">历史订单</q-btn>
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef" empty="暂无合作彩种">
      <template #prepend>
        <div class="bg-white">
          <q-item>
            <q-item-section avatar>
              <UserAvatar color="accent" :src="info.shop.avatar_url||info.shop.avatar"/>
            </q-item-section>
            <q-item-section>
                <q-item-label class="col">{{ info.shop.name }}</q-item-label>
                <q-item-label caption>编号：{{ info.shop.shop_sn }}</q-item-label>
            </q-item-section>
            <q-item-section side v-if="info.shop.seller_phone">
              <a :href="'tel:'+info.shop.seller_phone" class="text-primary row flex-center"><q-icon name="perm_phone_msg" class="q-mr-xs"></q-icon>联系店主</a>
            </q-item-section>
          </q-item>
          <router-link :to="'/cooperate/wallet/'+route.params.shopCooperateId" class="row justify-between items-center q-py-sm q-px-md">
            <span><q-btn dense round color="primary" unelevated class="q-mr-xs" size="xs" icon="currency_yen"></q-btn>合作店铺余额</span>
            <span class="text-subtitle1 text-weight-bold row flex-center">¥{{formatMoney(info.shop_cooperate.balance)}}
              <q-icon name="keyboard_arrow_right" size="14px" />
            </span>
          </router-link>
          <template  v-if="route.params.cooperateType === 'entrusted'">
            <q-separator></q-separator>
            <AuthButton>
              <q-btn-group class="row full-width" unelevated square>
                <q-btn class="col" color="primary" flat
                  @click="moneyDialog = 'incr'">加款</q-btn>
                <q-separator vertical></q-separator>
                <q-btn class="col" flat
                  @click="moneyDialog = 'reduce'">扣款</q-btn>
              </q-btn-group>
            </AuthButton>
            <q-separator></q-separator>
          </template>
        </div>
        <WarnTip v-if="route.params.cooperateType === 'entrust'" class="text-left text-caption">派单提前时间 > 出票方提前时间，会导致临场单子无法甩过去</WarnTip>
      </template>
      <template v-slot="{ index }">
        <CooperateLotteryItem
          v-model:item="list[index]"
          :cooperateType="route.params.cooperateType"
          :shopCooperateId="route.params.shopCooperateId"
          @delete="refresh" />
      </template>
    </infinite-scroll>
    <template #footer v-if="route.params.cooperateType === 'entrust'">
      <q-footer class="row">
        <q-btn :to="route.path+'/lottery/add'" square="" class="col" unelevated color="primary">添加合作彩种</q-btn>
      </q-footer>
    </template>

    <q-dialog
      :model-value="!!moneyDialog"
      @update:model-value="moneyDialog = 0"
    >
      <q-card class="full-width">
        <q-card-section class="text-center q-pb-none">
          {{ moneyDialog == "incr" ? "加款" : "扣款" }}
        </q-card-section>
        <q-card-section>
          <q-input
            dense
            v-model="dialogForm.money"
            type="number"
            placeholder="请输入金额"
            lazy-rules
            :rules="[Rules.required, Rules.greaterThan(0)]"
          />
          <q-input
            dense
            v-model="dialogForm.password_pay"
            lazy-rules
            :rules="[Rules.required, Rules.password]"
            type="password"
            placeholder="请输入支付密码"
          />
          <!-- <q-input
            v-model="dialogForm.password_pay_confirmation"
            dense
            lazy-rules
            :rules="[
              Rules.required,
              Rules.password,
              Rules.sameAs(
              dialogForm.password_pay,
              '确认支付密码与支付密码不一致'
            )
            ]"
            type="password"
            placeholder="确认支付密码"
          /> -->
          <q-input dense v-model="dialogForm.remark" placeholder="请输入备注" />
        </q-card-section>
        <q-separator size="0.5px" />
        <q-card-actions align="stretch" class="row">
          <q-btn
            color=""
            class="col"
            unelevated=""
            flat
            @click="moneyDialog = 0"
            >取消</q-btn
          >
          <q-btn
            color="primary"
            class="col"
            unelevated=""
            flat
            @click="changeBalance"
            >确认</q-btn
          >
        </q-card-actions>
      </q-card>
    </q-dialog>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch,onActivated, shallowRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { Rules,formatMoney,formatDate } from "src/utils/tools";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
import CooperateLotteryItem from './components/CooperateLotteryItem.vue'
import { computed } from "vue";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();

const info = shallowRef({shop:{},shop_cooperate:{}})
// const partner = computed(()=>{
//   return route.params.cooperateType==='entrust'? info.value.cooperate:info.value.shop
// })
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getPartnerInfo({
    page,
    type: route.params.cooperateType,
    shop_cooperate_id: route.params.shopCooperateId
  }).then((res) => {
    info.value = {shop: res.shop || {},shop_cooperate:res.shop_cooperate || {}}

    return {data:res.list}
  });
})

// 价款扣款
const moneyDialog = ref(0);
const dialogForm = reactive({
  money: "",
  password_pay: "",
  // password_pay_confirmation: "",
  remark: ""
});

function changeBalance() {
  api[moneyDialog.value == 'incr'?'addPartnerMoney':'deductPartnerMoney']({shop_id: info.value.shop.id,...dialogForm})
    .then((res) => {
      $q.notify({ type: "positive", message: (moneyDialog.value == 'incr'?'加款':"扣款")+'成功' });
      moneyDialog.value = 0
      refresh()
    })
    .catch((e) => {
      $q.notify({ type: "negative", message: e.message });
    });
}
</script>
<style lang="scss" scoped></style>
