<template>
    <div>
        <div class="overflow-x-auto roles-list" ref="rolesListRef">
            <div class="flex px-[10px]">
                <div
                    class="roles flex flex-col items-center p-[10px] w-[80px] flex-shrink-0 overflow-hidden"
                    :class="{ 'roles-show': showRoles[index] }"
                    ref="rolesRef"
                    v-for="(item, index) in chatRoles"
                    :key="index"
                    @click="goAgent(item.id)"
                >
                    <n-avatar round :size="60" :src="item.pic"></n-avatar>
                    <div class="text-xs leading-6 mt-1 truncate w-full text-center">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="px-5 moment-list overflow-x-hidden pb-7">
        <div
            ref="target"
            v-for="(item, index) in list"
            :key="index"
            class="moment-box bg-white mt-[12px] p-4 rounded-lg"
            :class="{ 'moment-center': showList[index] }"
        >
            <moment-info @goDetail="goDetail" :info="item"></moment-info>
        </div>
        <div class="loading flex items-center justify-center opacity-0" ref="loadingRef">加载中</div>
    </div>
</template>

<script setup lang="ts">
import { NScrollbar, NAvatar, NList, NListItem, NThing, NSpace, NTag, NIcon, NImage } from 'naive-ui'
import { useRouter } from 'vue-router'
import { MomentInfo } from '@/components/common'
import { fetchGetMoments, fetchChatRoles } from '@/api'
import { useWindowScroll, useIntersectionObserver, useElementBounding, useWindowSize, useScroll } from '@vueuse/core'
import { ref, watch, computed, nextTick } from 'vue'

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

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

function getMoments() {
    loading.value = true
    let data = {
        page: {
            page: page.value,
            limit: 20
        },
        search: {
            order: {
                createdAt: 'DESC'
            }
        }
    }
    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
            }
        })
        .finally(() => {
            loading.value = false
        })
}

getRoles()
const chatRoles = ref(<any>[])
function getRoles() {
    fetchChatRoles(20).then((res: any) => {
        chatRoles.value = res
    })
}
const target = ref([])
const showList = ref(<any>[])
const { y } = useWindowScroll()
const { width, height } = useWindowSize()
watch(y, () => {
    showList.value = target.value.map((item: any) => {
        return useElementBounding(item).top.value < height.value - 80
    })
})
watch(list, () => {
    nextTick(() => {
        showList.value = target.value.map((item: any) => {
            return useElementBounding(item).top.value < height.value - 80
        })
    })
})

const rolesListRef = ref(null)
const { x: roleListX } = useScroll(rolesListRef)

const rolesRef = ref([])
const showRoles = ref(<any>[])
watch(
    chatRoles,
    () => {
        nextTick(() => {
            showRoles.value = rolesRef.value.map(item => {
                return useElementBounding(item).left.value < width.value
            })
        })
    },
    { immediate: true }
)

watch(
    roleListX,
    () => {
        nextTick(() => {
            showRoles.value = rolesRef.value.map(item => {
                return useElementBounding(item).left.value < width.value
            })
        })
    },
    { immediate: true }
)

function goAgent(id: any) {
    router.push({
        name: 'agent',
        query: {
            id: id
        }
    })
}
const loadingRef = ref(null)
const isBottom = ref(false)
useIntersectionObserver(loadingRef, ([{ isIntersecting }]) => {
    if (isIntersecting && !loading.value && !finish.value) {
        getMoments()
    }
    isBottom.value = isIntersecting
})
</script>

<style lang="less" scoped>
.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;
    }
}

.roles {
    transform: scale(0.1);
    transition: transform ease-in-out 0.3s;

    &.roles-show {
        transform: scale(1);
    }
}

.roles-list {
    &::-webkit-scrollbar {
        height: 0px;
    }
}
</style>
