<template>
    <div class="page h-full" :class="{ dark: isDark }">
        <n-page-header
            class="header"
            :class="[scrollY ? 'bg-white dark:bg-black' : '']"
            title="开通会员"
            @back="handleBack"
        >
            <template #extra>
                <div class="w-[22px]"></div>
            </template>
        </n-page-header>
        <vip-pannel></vip-pannel>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { VipPannel } from '@/components/common'
import { NPageHeader, NAffix } from 'naive-ui'
import { useWindowScroll } from '@vueuse/core'
import { useTheme } from '@/hooks/useTheme'

let fromRoute: any = null
export default defineComponent({
    beforeRouteEnter(to, from) {
        fromRoute = from
    },
    setup() {
        const { y } = useWindowScroll()

        const scrollY = computed(() => {
            return y.value
        })

        const { isDark } = useTheme()

        return {
            scrollY,
            isDark
        }
    },
    components: {
        VipPannel,
        NPageHeader
    },
    methods: {
        handleBack() {
            if (!fromRoute.name || fromRoute.name === 'login') {
                this.$router.replace({
                    name: 'Chat'
                })
            } else {
                this.$router.go(-1)
            }
        }
    }
})
</script>

<style lang="less" scoped>
.page {
    background: linear-gradient(180deg, #EEFFF7, #EEFFF7 180px, #fff 200px, #fff);

    &.dark {
        background: linear-gradient(180deg, #001727, #001727 180px, #0F1014 200px, #0F1014);
    }
}
: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;
        }
    }
}

.n-card {
    --n-padding-left: 20px !important;
    --n-padding-bottom: 10px !important;
    background-color: transparent;
}
.choose-btn + .choose-btn {
    margin-left: 23px;
}
::-webkit-scrollbar {
    display: none;
}

.header {
    position: sticky;
    top: 0;
    z-index: 20;
}
</style>
