<script setup lang="ts">
import { computed } from 'vue'
import { NAvatar, avatarProps } from 'naive-ui'
import { useUserStore, useUserMemberStore } from '@/store'
import defaultAvatar from '@/assets/avatar.png'
import { isString } from '@/utils/is'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const userMemberStore = useUserMemberStore()

const userInfo = computed(() => userStore.userInfo)

const props = defineProps({
    avatarType: {
        type: avatarProps.size,
        default: 'medium'
    },
    onlyAvatar: {
        type: Boolean,
        default: false
    }
})

const isVip = computed(() => {
    return userMemberStore.isVip()
})
</script>

<template>
    <div class="flex items-center overflow-hidden">
        <div class="overflow-hidden shrink-0 flex items-center justify-center">
            <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
                <NAvatar
                    :size="avatarType"
                    :style="{ backgroundColor: 'transparent' }"
                    :src="userInfo.avatar"
                    :fallback-src="defaultAvatar"
                />
            </template>
            <template v-else>
                <NAvatar :size="avatarType" :style="{ backgroundColor: 'transparent' }" :src="defaultAvatar" />
            </template>
        </div>
        <div class="flex-1 min-w-0 ml-2 flex-col flex" v-if="!onlyAvatar" :class="[avatarType + '-text']">
            <div class="flex items-center">
                <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap text-left leading-6">
                    {{ userInfo.name ?? 'ChenZhaoYu' }}
                </h2>
                <img class="h-[18px] block ml-1" v-if="isVip" src="@/assets/vip-icon.png" alt="" />
                <img
                    class="h-[18px] block ml-1"
                    v-else-if="userMemberStore.userMember.memberType == 'PAID'"
                    src="@/assets/vip-not-icon.png"
                    alt=""
                />
            </div>
            <!-- <p class="overflow-hidden text-xs text-ellipsis whitespace-nowrap text-left" v-if="isVip">
                <span>{{ userMemberStore.getExpireAt() }}</span>
            </p> -->
            <div class="flex items-center text-xs text-left">
                <div class="mr-1">ID:{{ userInfo.id }}</div>
                <!-- <n-button size="small" type="primary" text class="text-left text-xs" style="font-size: 12px"
                    >开通会员</n-button
                > -->
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.large-text {
    h2 {
        font-size: 16px;
    }
    p {
        margin-top: 4px;
    }
}

h2 {
    color: var(--n-text-color);
}
</style>
