<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 channelKey = import.meta.env.VITE_INVITE_CHANNEL_KEY;
    if (!channelKey) throw new Error("缺少环境变量: VITE_INVITE_CHANNEL_KEY");
    const linkIdentifierJSON = {
        agentID,
        mobile,
    };
    const linkIdentifierStr = JSON.stringify(linkIdentifierJSON);
    const encodeData = aesEncrypt(
        linkIdentifierStr,
        channelKey
    );
    linkIdentifier.value = encodeURIComponent(encodeData);
};
</script>

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