<template>
    <div class="page h-full">
        <n-page-header
            class="head bg-white dark:bg-black"
            :title="ruleType === 'user' ? '用户协议' : '隐私协议'"
            @back="handleBack"
        >
            <template #extra> <div class="w-[22px]"></div> </template>
        </n-page-header>

        <rule-content :ruleType="ruleType"></rule-content>
    </div>
</template>

<script lang="ts" setup>
import { RuleContent } from '@/components/common'
import { NPageHeader } from 'naive-ui'
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'

const router = useRouter()
function handleBack() {
    router.back()
}

const route = useRoute()
const ruleType = ref('user')
onMounted(() => {
    if (route.query.type) {
        ruleType.value = route.query.type as string
    }
})
</script>

<style lang="less" scoped>
: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;
        }
    }
}
.head {
    // background-color: #fff;
    position: sticky;
    top: 0;
}
</style>
