<template>
    <div class="page flex min-h-full flex-col bg-contain bg-no-repeat bg-[#F5F6F8] dark:bg-[#0A0B21]">
        <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" preview-disabled :src="chatRole['pic']" object-fit="scale-down" />
            </div>
            <div class="translate-y-[-16px]">
                <div
                    class="rounded-t-2xl overflow-hidden bg-contain bg-no-repeat chat-info"
                    :style="{ backgroundImage: isDark ? `url(${bgImgDark})` : '' }"
                >
                    <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]">
                                    {{ chatRole.chatted }}人聊过｜{{ chatRole.dynamicNumber }}个动态
                                </div>
                            </template>
                            <template #footer>
                                <div>
                                    {{ chatRole.describe }}
                                </div>
                            </template>
                            <template #action>
                                <n-space size="small" class="mt-2">
                                    <n-tag
                                        :bordered="false"
                                        :color="{
                                            color: getColor(),
                                            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]">({{ totals }}个)</span>
                    <img class="absolute bottom-2 left-[38px] w-[28px]" src="@/assets/png-xian.png" alt="" />
                </div>

                <div class="px-5 moment-list overflow-x-hidden">
                    <div class="empty py-6" v-if="!loading && !totals">
                        <img class="w-3/5 block mx-[auto]" :src="isDark ? emptyDarkImg : emptyImg" alt="" />
                        <div class="text-sm text-[#939599] text-center py-3">暂无动态</div>
                    </div>
                    <div
                        ref="target"
                        v-for="(item, index) in list"
                        :key="index"
                        class="moment-box bg-white mt-[12px] p-4 rounded-lg dark:bg-[#20223C]"
                        :class="{ 'moment-center': showList[index] }"
                    >
                        <moment-info size="mini" @goDetail="goDetail" is-list v-model:info="list[index]"></moment-info>
                    </div>
                    <div class="loading flex items-center justify-center opacity-0" ref="loadingRef">加载中</div>
                </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 bgImgDark from '@/assets/png-beij-dark.png'
import { useWindowScroll } from '@vueuse/core'
import { computed, ref, watch, nextTick } from 'vue'
import { useTheme } from '@/hooks/useTheme'
import { MomentInfo, CommentInfo } from '@/components/common'
import { fetchGetChatRole, fetchGetMoments } from '@/api'
import { useIntersectionObserver, useWindowSize, useElementBounding } from '@vueuse/core'
import emptyImg from '@/assets/empty.png'
import emptyDarkImg from '@/assets/empty-dark.png'
import { getColor } from '@/plugins/TabColors'

const router = useRouter()
function handleBack() {
    router.back()
}
function goDetail(id: any) {
    router.push({
        path: '/momentsDetail',
        query: {
            id: id
        }
    })
}

const { y } = useWindowScroll()

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

const target = ref([])
const showList = ref(<any>[])
const { width, height } = useWindowSize()
watch(y, () => {
    showList.value = target.value.map((item: any) => {
        return useElementBounding(item).top.value < height.value - 50
    })
})

const { isDark } = useTheme()

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

const labels = computed(() => {
    return chatRole.value?.labels
})

const list = ref(<any>[])
const page = ref(1)
const finish = ref(false)
const loading = ref(false)
const totals = ref(0)

function getMoments() {
    loading.value = true
    let data = {
        page: {
            page: page.value,
            limit: 20
        },
        search: {
            order: {
                createdAt: 'DESC'
            },
            where: {
                userId: route.query.id
            }
        }
    }
    fetchGetMoments(data)
        .then((res: any) => {
            list.value = [...list.value, ...res.items]
            if (res.meta.totalPages <= res.meta.currentPage) {
                finish.value = true
            } else {
                finish.value = false
                page.value = page.value + 1
            }
            totals.value = res.meta.totalItems
        })
        .finally(() => {
            loading.value = false
        })
}

const loadingRef = ref(null)
const isBottom = ref(false)
useIntersectionObserver(loadingRef, ([{ isIntersecting }]) => {
    if (isIntersecting && !loading.value && !finish.value) {
        getMoments()
    }
    isBottom.value = isIntersecting
})

watch(list, () => {
    nextTick(() => {
        showList.value = target.value.map((item: any) => {
            return useElementBounding(item).top.value < height.value - 50
        })
    })
})
</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%);
}

.dark {
    .chat-info {
        background-color: #0a0b21;
    }

    .title {
        background: #0a0b21;
    }
}

:deep(.n-thing-header-wrapper) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.moment-list {
    :nth-child(n) {
        &.moment-box {
            transition: transform ease-in-out 0.3s;
        }
    }
    :nth-child(2n + 1) {
        &.moment-box {
            transform: translateX(200%);
        }
    }

    :nth-child(2n) {
        &.moment-box {
            transform: translateX(-200%);
        }
    }
    .moment-box {
        &.moment-center {
            transform: translateX(0);
        }
    }

    .targe {
        position: absolute;
        width: 100%;
        height: 50px;
        // background-color: red;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
}
</style>
