<script setup lang="ts">
import { defineAsyncComponent, ref, computed } from 'vue'
import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
import { NButton, NIcon } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useAppStore, useUserStore, useUserMemberStore, useCompanyStore } from '@/store'
import { emitter } from '@/plugins'
import { storeToRefs } from 'pinia'
import Setting from '@/components/common/Setting/SettingIndex.vue'
import { inject } from 'vue'
import { ChevronRight } from '@vicons/tabler'
import { useTheme } from '@/hooks/useTheme'
import vipImg from '@/assets/icon_xufei.png'
import shareImg from '@/assets/icon_fenxiang.png'
import vipDarkImg from '@/assets/icon_xufei-dark.png'
import shareDarkImg from '@/assets/icon_fenxiang-dark.png'

const show = ref(false)

const { isMobile } = useBasicLayout()
const router = useRouter()
const appStore = useAppStore()
const { userInfo } = storeToRefs(useUserStore())
const login: any = inject('login')
function goMine() {
    if (!userInfo.value?.id) {
        login()
        return
    }
    if (isMobile.value) {
        router.push({
            name: 'mine'
        })
    } else {
        emitter.emit('changeMineShow', true)
    }
}

function share() {
    emitter.emit('changeShare', true)
}

const userMemberStore = useUserMemberStore()
const isVip = computed(() => {
    return userMemberStore.isVip()
})

function goVip() {
    emitter.emit('changeVipShow', true)
}

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

const { isDark } = useTheme()
</script>

<template>
    <footer class="min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
        <div class="flex items-center justify-between cursor-pointer pb-3" @click="goMine">
            <span class="text-[#000] text-sm dark:text-[#fff] font-medium">个人主页</span>
            <div class="flex items-center">
                <span class="text-[#939599] text-xs mr-1">查看</span>
                <n-icon color="#939599">
                    <ChevronRight />
                </n-icon>
            </div>
        </div>
        <div class="flex items-center justify-between">
            <div class="flex-1 flex-shrink-0 overflow-hidden">
                <n-button text @click="goMine">
                    <UserAvatar />
                </n-button>
            </div>

            <HoverButton @click="show = true">
                <span class="text-xl text-[#4f555e] dark:text-white">
                    <SvgIcon icon="ri:settings-4-line" />
                </span>
            </HoverButton>

            <Setting v-model:visible="show" />
        </div>

        <div
            v-if="company.id == 0"
            @click="goVip"
            class="bg-[#F5F7FA] dark:bg-[#18191E] px-[10px] mt-3 h-[36px] flex cursor-pointer items-center rounded-lg"
        >
            <img :src="isDark ? vipDarkImg : vipImg" class="w-[18px] h-[18px] block" alt="" />
            <span class="text-xs ml-[8px] dark:#fff">{{ isVip ? '会员续费' : '开通会员' }}</span>
            <div class="flex-1"></div>
            <n-icon color="#939599">
                <ChevronRight />
            </n-icon>
        </div>
        <div
            @click="share"
            class="bg-[#F5F7FA] dark:bg-[#18191E] px-[10px] mt-3 h-[36px] cursor-pointer flex items-center rounded-lg"
        >
            <img :src="isDark ? shareDarkImg : shareImg" class="w-[18px] h-[18px] block" alt="" />
            <span class="text-xs ml-[8px] dark:#fff">分享好友</span>
            <div class="flex-1"></div>
            <n-icon color="#939599">
                <ChevronRight />
            </n-icon>
        </div>
    </footer>
</template>
