<template>
  <view>
    <image src="/static/image/invitation.png" alt="邀请下级" mode="widthFix" class="w-full" />
    <view @click="showQRcode = true"
      class="bg-gradient-to-t from-orange-500 to-orange-300 fixed bottom-0 h-12 w-full shadow-xl text-white rounded-t-xl flex items-center justify-center font-bold">
      立即邀请好友
    </view>

    <QRcode v-model:show="showQRcode" mode="invitation" :linkIdentifier="linkIdentifier" />
  </view>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { aesEncrypt } from "@/utils/crypto"
import QRcode from '@/components/QRcode.vue'

const showQRcode = ref(false)
const linkIdentifier = ref("")
const mobile = ref("")
const agentID = ref("")

onBeforeMount(() => {
  // 从UniApp缓存获取用户信息
  const userInfo = uni.getStorageSync('userInfo') || {}
  mobile.value = userInfo.mobile || ''
  agentID.value = userInfo.agentID || ''

  encryptIdentifire(agentID.value, mobile.value)
})

const encryptIdentifire = (agentID, mobile) => {
  const linkIdentifierJSON = {
    agentID,
    mobile
  }
  const linkIdentifierStr = JSON.stringify(linkIdentifierJSON)
  const encodeData = aesEncrypt(linkIdentifierStr, "8e3e7a2f60edb49221e953b9c029ed10")
  linkIdentifier.value = encodeURIComponent(encodeData)
}
</script>

<style>
/* 自定义样式 */
</style>
<route type="page" lang="json">{
  "layout": "page",
  "title": "邀请下级",
  "auth": true,
  "agent": true
}</route>
