<template>
    <div class="page flex flex-col flex-1">
        <!-- <n-page-header title="个人中心" @back="handleBack"> </n-page-header> -->
        <n-card :bordered="false">
            <div class="flex items-center">
                <div class="flex-1">
                    <UserAvatar avatar-type="large" />
                </div>
                <!-- <div
                    @click="showOffical = true"
                    class="code flex flex-col items-center rounded-[8px] px-[7px] py-[3px] bg-[#F5F5F7] dark:bg-[#1E1F37]"
                >
                    <img class="w-[30px]" :src="isDark ? codeDark : code" alt="" />
                    <div class="text-[10px] text-black dark:text-white font-bold">关注公众号</div>
                </div> -->
            </div>
        </n-card>
        <n-card :bordered="false" v-if="company.id === 0">
            <vip-card @goVip="goVip"></vip-card>
        </n-card>
        <n-card :bordered="false">
            <n-row gutter="12">
                <n-col :span="12">
                    <div class="share-btn cursor-pointer" @click="shareEvent">
                        <div class="share-text">
                            <div class="text1">邀请好友</div>
                            <div class="text2">一起加入</div>
                        </div>
                        <img src="@/assets/png--anniu.png" alt="" />
                    </div>
                </n-col>
                <n-col :span="12">
                    <div class="share-btn" @click="goBalance">
                        <div class="share-text">
                            <div class="text1">邀请记录</div>
                            <div class="text2">去查看</div>
                            <!-- <div class="text2">余额：{{ balance }}</div> -->
                        </div>
                        <img src="@/assets/png-shouyi.png" alt="" />
                    </div>
                </n-col>
            </n-row>
        </n-card>

        <div class="flex-1"></div>

        <div class="logout px-4 py-4">
            <n-button @click="logout" quaternary type="primary" block round size="large"> 退出登录 </n-button>
        </div>

        <share v-model:show="showShareModal" />

        <n-modal v-model:show="showCommission" class="max-w-md" transform-origin="center">
            <n-card
                :border="false"
                title="我的邀请"
                class="!rounded-xl balance"
                content-style="padding:0;overflow:auto"
            >
                <commission-pannel></commission-pannel>
            </n-card>
        </n-modal>

        <offical-account v-model:show="showOffical"></offical-account>
    </div>
</template>

<script setup lang="ts">
import { UserAvatar, VipCard, Share, CommissionPannel, OfficalAccount } from '@/components/common'
import { NCard, NRow, NCol, useMessage, NButton, useDialog, NModal } from 'naive-ui'
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { useUserStore, useUserMemberStore, useCompanyStore } from '@/store'
import { emitter } from '@/plugins'
import { fetchUserBalance } from '@/api'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useTheme } from '@/hooks/useTheme'
import codeDark from '@/assets/code-dark.png'
import code from '@/assets/code.png'

const { isDark } = useTheme()

const router = useRouter()
const message = useMessage()
const showShareModal: any = ref(false)
const dialog = useDialog()
const userStore = useUserStore()

function goVip() {
    // router.push('/vip')
    emitter.emit('changeVipShow', true)
}

function logout() {
    dialog.create({
        title: '提示',
        content: '确认要退出登录吗？',
        positiveText: '退出登录',
        negativeText: '取消',
        maskClosable: false,
        onPositiveClick: () => {
            userStore.logout()
            message.success('退出登录成功')
            router.replace('/home')
        }
    })
}

const { isMobile } = useBasicLayout()
const showCommission = ref(false)
function goBalance() {
    if (isMobile.value) {
        router.push('/commission')
    } else {
        showCommission.value = true
    }
}

const balance = ref(0)
fetchUserBalance().then((res: any) => {
    balance.value = res.balance
})

const userMemberStore = useUserMemberStore()
function shareEvent() {
    // if (userMemberStore.isVip()) {
    showShareModal.value = true
    // } else {
    //     dialog.create({
    //         title: '提示',
    //         content: '加入会员才能开通分享功能',
    //         positiveText: '加入会员',
    //         negativeText: '取消',
    //         maskClosable: false,
    //         onPositiveClick: () => {
    //             goVip()
    //         }
    //     })
    // }
}

const showOffical = ref(false)

const company = computed(() => {
    return useCompanyStore().company
})
</script>

<style lang="less" scoped>
.page {
    color: var(--n-text-color);
}

.page > .n-card {
    --n-padding-left: 20px !important;
    --n-padding-bottom: 10px !important;
    --n-color-modal: transparent;
    --n-color: transparent;
}

:deep(.n-page-header) {
    height: 50px;
    padding: 0 22px;
    .n-page-header__main {
        flex-grow: 1;
        .n-page-header__title {
            flex-grow: 1;
            text-align: center;
        }
    }
}
.page-top {
    .f();
    height: 50px;
    position: relative;
    justify-content: center;

    img {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 13px;
        left: 22px;
    }

    .title {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
    }
}

.share-btn {
    background: var(--bg2);
    border-radius: 8px;
    .f();
    img {
        width: 45%;
        max-width: 70px;
        display: block;
    }

    .share-text {
        flex-grow: 1;
        padding: 12px 0 12px 12px;

        .text1 {
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
        }

        .text2 {
            font-size: 12px;
            color: var(--n-text-color);
            opacity: 0.5;
            line-height: 24px;
        }
    }
}

.balance {
    max-height: 80vh;
}
</style>
