<template>
    <div>
        <img src="@/assets/images/invitation.png" alt="邀请下级">
        <div @click="showQRcode = true"
            class="bg-gradient-to-t from-orange-500 to-orange-300 fixed bottom-0 h-12 w-full bg-orange-400 shadow-xl text-white rounded-t-xl flex items-center justify-center font-bold">
            立即邀请好友</div>
    </div>
    <QRcode v-model:show="showQRcode" mode="invitation" :linkIdentifier="linkIdentifier" />
</template>
<script setup>
import { storeToRefs } from "pinia";
import { aesEncrypt } from "@/utils/crypto";
import { useAgentStore } from '@/stores/agentStore'
const agentStore = useAgentStore()
const { mobile, agentID } = storeToRefs(agentStore); // 响应式解构

const showQRcode = ref(false);
const linkIdentifier = ref("")
onBeforeMount(() => {
    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 lang="scss" scoped></style>