<template>
    <div class="page h-full flex flex-col">
        <n-page-header :title="pageTitle" @back="handleBack">
            <template #extra>
                <div class="w-[22px]"></div>
            </template>
        </n-page-header>
        <info-form></info-form>
    </div>
</template>

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

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

const pageTitle = ref('调查表单')

onMounted(() => {
    emitter.on('updateInfoTitle', title => {
        if (title) {
            pageTitle.value = String(title)
        }
    })
    emitter.on('backChat', res => {
        router.back()
    })
})
</script>

<style lang="less" scoped>
.page {
    color: var(--n-text-color);
}
: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;
        }
    }
}
</style>
