<template>
    <div class="sidebar-qrcode-container" :class="{ 'collapse': collapse }">
        <transition name="sidebarLogoFade">
            <div v-if="collapse" key="collapse" class="sidebar-qrcode-link" @click="openDialog">
                <img v-if="logo" :src="logo" class="sidebar-qrcode" />
                <h1 v-else class="sidebar-title">生成邀请码</h1>
            </div>
            <div v-else key="expand" class="sidebar-qrcode-link" @click="openDialog">
                <img v-if="logo" :src="logo" class="sidebar-qrcode" />
                <h1 class="sidebar-title">生成邀请码</h1>
            </div>
        </transition>

        <el-dialog v-model="centerDialogVisible" title="二维码" width="500" align-center>

            <div>
                <el-image :src="qrBase64" />
                <el-button type="primary" round @click="downloadBase64Image">图片下载</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script setup>
import logo from '@/assets/logo/logo.png'
import useSettingsStore from '@/store/modules/settings'
import variables from '@/assets/styles/variables.module.scss'
import { getInviteQrCode } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import { ref } from 'vue'
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const areaType = ref(userStore.user.dept.areaType);// 0: 平台 3:区域公司 4:服务中心

defineProps({
    collapse: {
        type: Boolean,
        required: true
    }
})

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
const centerDialogVisible = ref(false)
const qrBase64 = ref('');

// 获取Logo背景色
const getLogoBackground = computed(() => {
    if (settingsStore.isDark) {
        return 'var(--sidebar-bg)';
    }
    return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
});

// 获取Logo文字颜色
const getLogoTextColor = computed(() => {
    if (settingsStore.isDark) {
        return 'var(--sidebar-text)';
    }
    return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
});

const openDialog = async () => {
    try {
        const res = await getInviteQrCode({
            referrerType: areaType.value === '3' ? '2' : '3',//推荐者类型 1用户 2区域公司 3服务中心
            referrerId: userStore.user.userId,//推荐者id(用户id/区域id/服务中心id)
            page: 'pages/login'
        });
        console.log("TCL: openDialog -> res", res)

        if (res.code === 200) {
            qrBase64.value = "data:image/png;base64," + res.data;
            centerDialogVisible.value = true;
            return;
        }
        throw res.msg
    } catch (error) {
        proxy.$modal.msgError(error);
        console.log("TCL: openDialog -> error", error)

    }


}

const downloadBase64Image = async () => {
    try {
        const link = document.createElement('a');
        link.href = qrBase64.value;
        link.download = '推广二维码(金邻助家).png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } catch (error) {
        console.log("TCL: imageDown -> error", error)
        proxy.$modal.msgError('二维码图片下载失败!');
    }
}



</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.sidebarLogoFade-enter-active {
    transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
    opacity: 0;
}

.sidebar-qrcode-container {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: v-bind(getLogoBackground);
    text-align: center;
    overflow: hidden;

    & .sidebar-qrcode-link {
        height: 100%;
        width: 100%;
        cursor: pointer;

        & .sidebar-qrcode {
            width: 32px;
            height: 32px;
            vertical-align: middle;
            margin-right: 12px;
        }

        & .sidebar-title {
            display: inline-block;
            margin: 0;
            color: v-bind(getLogoTextColor);
            font-weight: 600;
            line-height: 50px;
            font-size: 14px;
            font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
            vertical-align: middle;
        }
    }

    &.collapse {
        .sidebar-qrcode {
            margin-right: 0px;
        }
    }
}
</style>