
<template>
  <PageLayout>
    <!-- FIXME 收款管理，需要支持彩民和店主的设置 -->
    <infinite-scroll :load="load" :list="list" ref="scrollRef" empty="" noMore="">
      <template #prepend>
        <WarnTip>开通后用户即可通过以下支付方式进行充值</WarnTip>
      </template>
      <template v-slot="{ item, index }">
        <PayTypeQrcode v-if="item.pay_type == 'qrcode'" :item="item" @update:item="load" :default-opened="index==0"></PayTypeQrcode>
        <q-expansion-item v-else :key="index" :label="item.title" class="expand-item bg-white q-my-sm" :default-opened="index==0">
          <q-list>
            <template v-for="channel, i in item.pay_channels" :key="i">
              <q-separator></q-separator>
              <q-item :to="{path:'/shop/payment/'+item.pay_type+'/'+channel.pay_channel,query:{title:channel.title}}">
                <q-item-section>
                  <q-item-label class="">
                    {{ channel.title }}
                    <template v-if="channel.description">({{ channel.description }})</template>
                  </q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-item-label caption>
                    {{ PAY_CHANNEL_STATE[channel.state] }}
                    <q-icon name="arrow_forward_ios" color="grey" size="14px" />
                  </q-item-label>
                </q-item-section>
              </q-item>
              <div v-if="channel.id && channel.state==1" class="row q-px-md items-start" @click.stop>
                <span class="col" :class="channel.opened==0?'text-red':'text-primary'">{{ channel.opened==0?'渠道已关闭':'渠道已启用' }}</span>
                <span>
                  <q-toggle dense class="q-pr-sm q-pl-md q-pb-md" :model-value="channel.opened" :true-value="1" :false-value="0"
                    @update:model-value="toggleOpen(channel)" />
                </span>
              </div>
            </template>
          </q-list>
        </q-expansion-item>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import { 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 WarnTip from "src/components/WarnTip.vue";
import PayTypeQrcode from "./components/PayTypeQrcode.vue";
import { PAY_CHANNEL_STATE } from 'src/utils/const'
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const { list, refresh, load, scrollRef } = useInfiniteScroll((page) => {
  return api
    .getPayChannels()
    .then((res) => {
      return { data: res };
    });
});

function toggleOpen(channel){
  $q.dialog({
    message: `确定${channel.opened==0?'启用':'关闭'}“${channel.title}”吗？`,
    cancel: true
  }).onOk(()=>{
    api.uploadPayChannel({id:channel.id,opened: channel.opened==0?1:0}).then((res)=>{
      load();
      $q.notify({type: 'positive',message: res.message||'操作成功' })
    }).catch(e=>{
      $q.notify({type: 'negative',message: e.message})
    })
  })
}
</script>
<style lang="scss" scoped></style>

