<template>
    <div>
        <div class="px-5">
            <div class="bg-white mt-[12px] p-4 rounded-lg">
                <moment-info :info="moments"></moment-info>
            </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 class="overflow-hidden pb-11">
            <div
                v-for="(i, index) in 10"
                class="comment-box"
                :class="{ 'comment-center': showList[index] }"
                :key="i"
                ref="commentRef"
            >
                <comment-info></comment-info>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { MomentInfo, CommentInfo } from '@/components/common'
import { ref, watch, nextTick } from 'vue'
import { useWindowScroll, useElementBounding, useWindowSize, useScroll } from '@vueuse/core'
import { fetchGetMomentsDetail } from '@/api'
import { useRoute } from 'vue-router'

const commentRef = ref([])
const showList = ref([] as any)
const { y } = useWindowScroll()
const { width, height } = useWindowSize()
watch(
    y,
    () => {
        nextTick(() => {
            showList.value = commentRef.value.map((item: any) => {
                return useElementBounding(item).top.value < height.value - 30
            })
        })
    },
    {
        immediate: true
    }
)

const route = useRoute()
const moments = ref({})
fetchGetMomentsDetail(route.query.id).then((res: any) => {
    moments.value = res
})
</script>

<style lang="less" scoped>
.comment-box {
    opacity: 0.2;
    transition: all ease-in-out 0.3s;
    &:nth-child(2n) {
        transform: translate(-50px, 90px);
    }
    &:nth-child(2n + 1) {
        transform: translate(50px, 90px);
    }
    &.comment-center {
        transform: translate(0, 0);
        opacity: 1;
    }
}
</style>
