<template>
  <PageLayout class="shop-share-page fit">
    <div class="text-amber-3 text-center relative-position no-scroll" ref="domRef">
      <img src="~assets/bg2.png" style="width:100%; float:left"/>
      <div class="absolute full-width full-height" style="top:0;bottom:0;left:0;right:0;"></div>
      <div class="text-weight-bold absolute full-width text-subtitle1" style="top:5%; text-shadow:rgb(126 12 13) 0px 0px 23px">欢迎来到{{selfStore.shop.name}}店铺</div>
      <div class="shop-share absolute" style="width:74%; left:13%; top:37%; height:48%;">
        <!-- <div class="text-weight-bold text-subtitle1 q-pb-sm">欢迎来到必连红竞彩店店铺</div> -->
        <div class="bordered q-py-xs q-mx-lg text-subtitle2">安全可靠 扫码下载</div>
        <div class="bg-white q-my-lg q-pa-sm inline-block" style="width:62%;">
          <q-img crossorigin="anonymous" :src="url" ratio="1" width="100%"/>
        </div>
        <p class="q-mb-sm"><span class="rounded-borders bg-amber-3 text-red-10 q-px-xs q-mr-sm">1</span>真实店铺</p>
        <p class="q-mb-sm"><span class="rounded-borders bg-amber-3 text-red-10 q-px-xs q-mr-sm">2</span>支付方式齐全</p>
        <p class="q-mb-sm"><span class="rounded-borders bg-amber-3 text-red-10 q-px-xs q-mr-sm">3</span>发单赚佣金</p>
      </div>
    </div>
    <template #footer>
      <q-footer>
        <q-btn square class="full-width" glossy color="amber-3" text-color="red-10" label="" @click="onClickSavePicture">
          <div class="safe-padding-bottom">请截图分享
          </div>
        </q-btn>
      </q-footer>
    </template>
  </PageLayout>
</template>
<script setup>
import { ref,onMounted } from "vue";
import { useSelfStore } from "stores/self";
import { api } from 'boot/axios'
import { savePicture } from 'src/utils/tools'
import html2canvas from 'html2canvas';
import { useQuasar } from 'quasar';
const selfStore = useSelfStore();
const $q = useQuasar()
const domRef = ref(null)
let size = Math.ceil(window.innerWidth*(window.devicePixelRatio||1)/2)
size = Math.ceil(size/100)*100
const url = api.getQrcodeUrl(api.domain+'register/index.html?shopsn='+selfStore.shop.shop_sn+'&agtcid='+selfStore.user.id,size)

function onClickSavePicture(){
  savePicture(domRef.value,selfStore.shop.name)
}
</script>
<style lang="scss" scoped>
// .shop-share-page{
//  background:url("assets/bg2.png") no-repeat center 20px;
//  background-size:100%;
// }
</style>
