<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '邀请好友',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script setup lang="ts">
import { useUserStore } from '@/store'
import VueQrcode from '@chenfengyuan/vue-qrcode'

const userStore = useUserStore()

const qrcodeValue =
  location.origin + '/#/pages/register/index?invite=' + userStore.userInfo?.invitation_code

const onCopy = (code: string) => {
  uni.setClipboardData({
    data: code,
  })
}
</script>

<template>
  <view class="pt-250 pb-100 min-h-screen invite-page">
    <view class="flex flex-col items-center">
      <view
        class="flex items-center text-16 text-#333 bg-[rgba(255,255,255,0.8)] rounded-full px-15 py-4 text-12 mt-8"
      >
        <view>
          邀请码
          <text class="font-bold">{{ userStore.userInfo.invitation_code }}</text>
        </view>
        <view
          class="btn-gradient text-white rounded-full px-15 py-4 text-12 ml-10"
          @click="onCopy(userStore.userInfo.invitation_code)"
        >
          复制
        </view>
      </view>
      <view class="mt-15 rounded-10 overflow-hidden flex">
        <VueQrcode :value="qrcodeValue" :options="{ size: 200 }" />
      </view>
      <view
        class="btn-gradient text-white rounded-full text-14 px-30 py-8 mt-30"
        @click="onCopy(qrcodeValue)"
      >
        复制邀请链接
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.invite-page {
  background-image: url('@/static/images/page-sub/invite-bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
}
</style>
