<template>
    <div class="page flex min-h-full flex-col bg-contain bg-no-repeat bg-[#F5F6F8]">
        <NConfigProvider
            :theme-overrides="{
                PageHeader: {
                    backColor: scrollY ? (isDark ? '#fff' : '#000') : '#fff'
                }
            }"
        >
            <n-page-header
                class="header"
                :class="[scrollY ? 'bg-white dark:bg-black' : '']"
                :title="scrollY ? chatRole.name : ''"
                @back="handleBack"
            >
                <template #extra>
                    <div class="w-[22px]"></div>
                </template>
            </n-page-header>
        </NConfigProvider>
        <div>
            <div class="w-full">
                <n-image class="!block" :src="chatRole['pic']" object-fit="scale-down" />
            </div>
            <div class="translate-y-[-16px]">
                <div class="rounded-t-2xl overflow-hidden chat-info">
                    <div class="px-5 py-4">
                        <n-thing>
                            <template #avatar>
                                <n-avatar v-if="chatRole.pic" class="!block" round :size="60" :src="chatRole.pic">
                                </n-avatar>
                                <n-avatar v-else class="!block" round :size="60"> {{ chatRole.name?.[0] }} </n-avatar>
                            </template>
                            <template #header>
                                <div class="text-lg font-semibold">{{ chatRole.name }}</div>
                            </template>
                            <template #header-extra> </template>
                            <template #description>
                                <div class="text-xs text-[#797A8A]">1.5w+人聊过｜20个动态</div>
                            </template>
                            <template #footer>
                                <div>
                                    {{ chatRole.describe }}
                                </div>
                            </template>
                            <template #action>
                                <n-space size="small" class="mt-2">
                                    <n-tag
                                        :bordered="false"
                                        :color="{
                                            color: '#D0FEFF',
                                            textColor: '#000'
                                        }"
                                        round
                                        size="small"
                                        v-for="(item, index) in labels"
                                        :key="index"
                                    >
                                        {{ item }}
                                    </n-tag>
                                </n-space>
                            </template>
                        </n-thing>
                    </div>
                </div>

                <div class="title px-5 py-4 flex items-center relative">
                    <span class="text-base font-medium">全部动态</span>
                    <span class="text-xs text-[#797A8A] ml-[2px]">(1356)</span>
                    <img class="absolute bottom-2 left-[38px] w-[28px]" src="@/assets/png-xian.png" alt="" />
                </div>

                <div>
                    <comment-info v-for="i in 10" :key="i"></comment-info>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { NPageHeader, NConfigProvider, NImage, NThing, NAvatar, NTag, NSpace } from 'naive-ui'
import { useRouter, useRoute } from 'vue-router'
import { AgentPannel } from '@/components/common'
import bgImg from '@/assets/png-beij.png'
import { useWindowScroll } from '@vueuse/core'
import { computed, ref } from 'vue'
import { useTheme } from '@/hooks/useTheme'
import { MomentInfo, CommentInfo } from '@/components/common'
import { fetchGetChatRole } from '@/api'

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

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

const { isDark } = useTheme()

const route = useRoute()
const chatRole = ref({
    pic: '',
    name: '',
    labels: [],
    describe: ''
})
fetchGetChatRole(route.query.id).then((res: any) => {
    chatRole.value = res
})

const labels = computed(() => {
    return chatRole.value?.labels
})
</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;
        }
    }
}

.header {
    position: fixed;
    top: 0;
    z-index: 20;
    width: 100%;
    transition: all ease-in-out 0.3s;
}

.chat-info {
    background: linear-gradient(180deg, #d0feff 0%, #ffffff 80px, #ffffff 100%);
}

.title {
    background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
}
</style>
