<script setup lang="ts">

import InvitePoster from "@/pages/home/components/tabbar-mine/components/invite-poster/invite-poster.vue";
import {throttle} from "throttle-debounce";
import Config from "@/config";
import {useUserStore} from "@/store";
import {setClipboardData} from "@/utils/utils";
const {t} = useI18n();
const userStore = useUserStore()


const invitePosterRef = ref<InstanceType<typeof InvitePoster>>()
const show = ref(false);

function init() {
  show.value = true;
}

function close() {
  show.value = false;
}

function navigateTo(url: string) {
  uni.navigateTo({
    url,
  })
}

const handleSave = throttle(Config.throttleTime, () => {
  invitePosterRef.value?.init()
}, {})

function copyLink() {
  setClipboardData(Config.shareLink + `pages-login/pages/sign-up/index?invitationCode=${userStore.userInfo.invitationCode}`)
}

defineOptions({
  name: "InviteUser",
});

defineExpose({
  show,
  init,
  close,
});
</script>
<template>
  <wd-popup
      custom-class="!bg-transparent"
      safe-area-inset-bottom
      v-model="show"
      @close="close"
  >
    <view class="box-border px-46rpx w-750rpx">
      <view class="flex justify-end">
        <image class="w-66rpx h-66rpx" src="@img/14952@2x.png" @click="close"></image>
      </view>
      <view class="mt-36rpx relative h-1052rpx">
        <image class="absolute top-0 left-0 w-full h-full" src="@img/50@2x.png"></image>
<!--        <view class="z-9 absolute top-14rpx left-0 right-0 center text-0rpx">-->
<!--          <image class="w-592rpx h-238rpx" src="@img/img_word@2x.png"></image>-->
<!--        </view>-->
        <view class="relative z-2 flex flex-col">
<!--          <image class="w-full h-706rpx" src="@img/1334@2x.png"></image>-->
          <image class="w-full h-706rpx" :src="Config.shareImage"></image>
          <view class="py-24rpx px-24rpx">
            <view class="text-28-bold">{{ t('pages.mine.activity-description') }}</view>
            <view class="mt-8rpx text-24rpx text-#666 font-bold lh-34rpx">
              {{  Config.shareDesc }}
            </view>
          </view>
          <view class="mt-2rpx border-1rpx border-dashed border-#D1D1D1"></view>
          <view class="py-24rpx px-24rpx flex items-center justify-between">
            <view class="flex items-center">
              <image class="shrink-0 mr-24rpx w-94rpx h-94rpx rounded-full" :src="userStore.userInfo.avatar"></image>
              <view class="">
                <view class="text-30-bold">{{ `${userStore.userInfo.firstName} ${userStore.userInfo.surname}` }}</view>
                <view class="mt-8rpx text-24rpx text-#999 font-bold lh-34rpx">
                  <text>{{ t('pages.mine.invitation-code') }}：</text>
                  <text>{{ userStore.userInfo.invitationCode }}</text>
                </view>
              </view>
            </view>
            <view class="shrink-0 ml-20rpx" v-if="userStore.userInfo.invitationCode">
              <uqrcode ref="uqrcode" canvas-id="qrcode"
                       :value="'http://www.howhowfresh.com/h5/' + `pages-login/pages/sign-up/index?invitationCode=${userStore.userInfo.invitationCode}`"
                       :size="124"
                       sizeUnit="rpx"
                       :options="{}"></uqrcode>

                       <!-- <uqrcode ref="uqrcode" canvas-id="qrcode"
                       :value="'http://192.168.5.118:8011/h5/' + `pages-login/pages/sign-up/index?invitationCode=${userStore.userInfo.invitationCode}`"
                       :size="124"
                       sizeUnit="rpx"
                       :options="{}"></uqrcode> -->
            </view>
          </view>
        </view>
      </view>
	  
	  <!-- Config.shareLink -->
      <view class="mt-34rpx flex justify-between items-center ">
        <wd-button
            custom-class="!box-border shrink-0 !min-w-auto !h-98rpx !w-316rpx !text-#333 !text-30rpx !lh-42rpx !rounded-16rpx !bg-#fff"
            @click="copyLink"
        >
          {{ t('common.copyLink') }}
        </wd-button>
        <wd-button
            custom-class="!box-border shrink-0  !min-w-auto !h-98rpx !w-316rpx !text-30rpx !lh-42rpx !rounded-16rpx"
            @click="handleSave"
        >
          {{ t('pages.mine.save-picture') }}
        </wd-button>
      </view>
    </view>
  </wd-popup>
  <invite-poster ref="invitePosterRef" @success="close"/>
</template>

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