<template>
    <div class="container">
        <div class="content">
            <van-pull-refresh
                v-model="refreshing"
                @refresh="onRefresh"
            >
                <van-list
                    v-model="finished"
                    :loading="loading"
                    :immediate-check="false"
                    @load="onLoadMore"
                    style="height: 100%; overflow: auto;"
                >
                    <template #default>
                        <div
                            class="record-list" :style="{alignItems: (item.images.length === 0 && !item.video) ? 'center' : ''}"
                            v-for="(item, i) in list"
                            :key="item.dynamic_id"
                        >
                            <div style="flex-shrink: 0; width: 60px;margin-right: 10px;">{{ item.created_at }}</div>
                            <div>
                                <div class="list-text">{{ item.content }}</div>
                                <div class="list-ri" v-if="item.images.length > 0 || item.video">
                                    <!-- 图片 -->
                                    <van-image
                                        v-for="(img, idx) in item.images"
                                        :key="idx"
                                        fit="cover"
                                        class="avatar"
                                        radius="12"
                                        :src="img"
                                        @click="previewImage(i, idx)"
                                    />
                                    <!-- 视频封面展示 -->
                                    <div
                                        v-if="item.video"
                                        class="avatar video-wrapper"
                                        @click="previewVideo(item.video)"
                                    >
                                        <video
                                            :src="item.video"
                                            width="100%"
                                            height="100%"
                                            style="object-fit: cover"
                                            muted
                                        ></video>
                                        <!-- 播放按钮 -->
                                        <div class="play-btn">
                                            <van-icon name="play-circle-o" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 无数据提示 -->
                        <div class="no-more" v-if="list.length === 0 && !loading">
                            <svg-icon class="no-more-img" name="no-more" />
                            <div>暂无数据</div>
                        </div>
                    </template>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { dynamicList } from '@/api/path/im.api';
import { showToast, showImagePreview } from 'vant';

const list = ref([]);
const page = ref(1);
const total = ref(0);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const loadList = async (isRefresh = false) => {
    if (loading.value) return;
    loading.value = true;
    try {
        const res = await dynamicList({ page: page.value, is_my: '1' });
        if (res.code !== 1) {
            showToast(res.message || '加载失败');
            return;
        }
        const decoded = JSON.parse(atob(res.data));
        total.value = decoded.total || 0;

        const processedList = decoded.list.map(item => ({
            ...item,
            images: item.images && item.images.length ? item.images : [],
            video: item.video || ''
        }));

        if (isRefresh) {
            list.value = processedList;
            page.value = 2;
            refreshing.value = false;
        } else {
            list.value = [...list.value, ...processedList];
            page.value++;
        }

        // 控制 finished 状态
        if (list.value.length >= total.value) {
            finished.value = true;
        }
    } catch (err) {
        showToast(err.message || '加载失败');
    } finally {
        loading.value = false;
    }
};

const onRefresh = () => {
    page.value = 1;
    list.value = [];
    finished.value = false;
    loadList(true);
};

const onLoadMore = () => {
    if (finished.value) return;
    loadList(false);
};

const previewImage = (itemIndex, imgIndex) => {
    showImagePreview({
        images: list.value[itemIndex].images,
        startPosition: imgIndex
    });
};

const previewVideo = url => {
    window.open(url, '_blank');
};

onMounted(() => {
    loadList(true);
});
</script>

<style lang="less" scoped>
.container {
    height: 100%;
    margin: 0 16px;
    display: flex;
    flex-direction: column;
    .content {
        flex: 1;
        overflow: hidden; // 由 van-list 内部滚动
        min-height: 0;
        .record-list {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #000000;
            display: flex;
            margin: 24px 0;
            .list-text{
                font-weight: 400;
                font-size: 14px;
            }
            .list-ri {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
                margin-top: 10px;

                .avatar {
                    width: 82px;
                    height: 82px;
                    object-fit: cover;
                    border-radius: 12px;
                    overflow: hidden;
                    position: relative;
                }

                .video-wrapper {
                    cursor: pointer;
                }

                .play-btn {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 32px;
                    height: 32px;
                    border: 1px solid #fff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                }
            }
        }
    }
    .content::-webkit-scrollbar {
        width: 0;
    }
    .no-more{
        margin-top: 178px;
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #8D8D8D;
        .no-more-img{
            width: 302px;
            height: 222px;
        }
    }
}
</style>
