<template>
  <PageLayout>
    <q-card class="q-ma-md">
      <q-card-section>
        <div class="row items-center">
          <UserAvatar :src="store.user.avatar_url" color="accent" class="q-mr-sm" />
          {{ store.shop.name }}
        </div>
        <div class="q-ma-md">
          <div>店铺支持：</div>
          <q-img :src="tabs[currTab].url" width="100%" :ratio="1" class="bg-grey-2 q-mt-sm"/>
          <p class="q-mt-md text-body2">
            {{ tabs[currTab].context }}
          </p>
        </div>
        <!-- DELAY 暂时隐藏 -->
        <q-btn-group outline spread>
          <q-btn v-for="tab,i in tabs" :key="i" color="primary" :outline="currTab!==i" @click="currTab=i">{{ tab.name }}</q-btn>
        </q-btn-group>
        <div class="q-pt-md text-center">
          邀请码：<span class="text-red">{{ store.shop.shop_sn }}</span>
          <div class="q-mt-xs">
            扫一扫上面的二维码图案，进入店铺
          </div>
        </div>
      </q-card-section>
    </q-card>
  </PageLayout>
</template>
<script setup>

import { ref, onMounted, reactive,effect } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { openURL } from "quasar";
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
let size = Math.ceil(window.innerWidth*(window.devicePixelRatio||1)/2)
size = Math.ceil(size/100)*100
const tabs = [{
  name: '邀请彩民',
  url: api.getQrcodeUrl(store.buyer.domain+'/register/index.html?shopsn='+store.shop.shop_sn,size)
// },{
//   name: '彩民APP下载',
//   url: api.getQrcodeUrl('https://file.daxiangzj.com/client/app_download',size)
// },{
//   name: '店主APP下载',
//   url: api.getQrcodeUrl('https://file.daxiangzj.com/client/app_download?type=seller',size)
},{
  name: '邀请店主',
  url: api.getQrcodeUrl(api.domain+'register/index.html?sellid='+store.user.id,size),
  context:'注册下载后及时提交店铺认证资料，收款管理内提交已开通当面付功能的支付宝账号资料，提交资料之后，留意支付宝内消息提醒：商家待办申请确认，确认之后等待片刻，留意收款管理内显示：“已开通”即可！'
}]
const currTab = ref(0)
</script>
