<template>
    <view class="moments-container">
        <view class="header-section">
            <image class="cover-bg" src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="aspectFill"></image>
            <view class="user-info">
                <text class="user-name">我的昵称</text>
                <u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg" size="60" shape="square"></u-avatar>
            </view>
        </view>

        <view class="list-content">
            <view class="moment-item" v-for="(item, index) in momentList" :key="item.id">
                <view class="left-avatar">
                    <u-avatar :src="item.avatar" shape="square" size="40"></u-avatar>
                </view>

                <view class="right-content">
                    <view class="nickname">{{ item.nickname }}</view>

                    <view class="text-content" v-if="item.content">
                        {{ item.content }}
                    </view>

                    <view class="media-content">
                        <view v-if="item.type === 'image' && item.urls.length > 0">
                            <u-album :urls="item.urls" keyName="src" singleSize="200" multipleSize="90"></u-album>
                        </view>

                        <view v-if="item.type === 'video'" class="video-wrapper">
                            <video :src="item.videoUrl" :poster="item.videoPoster" controls
                                style="width: 400rpx; height: 300rpx; border-radius: 8rpx;"></video>
                        </view>
                    </view>

                    <view class="footer-info">
                        <text class="time">{{ item.time }}</text>
                        <view class="action-btn" @click="openComment(item.id)">
                            <u-icon name="chat" size="20" color="#5c6b8c"></u-icon>
                        </view>
                    </view>

                    <view class="comment-box" v-if="item.comments.length > 0">
                        <view class="comment-item" v-for="(comment, cIndex) in item.comments" :key="cIndex">
                            <text class="comment-user">{{ comment.user }}:</text>
                            <text class="comment-text">{{ comment.text }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="add-btn" @click="goPublish">
            <u-icon name="camera-fill" color="#fff" size="30"></u-icon>
        </view>

        <u-popup :show="showCommentInput" @close="showCommentInput = false" mode="bottom">
            <view class="input-popup">
                <u--input placeholder="评论一句..." border="surround" v-model="commentText">
                    <template slot="suffix">
                        <u-button type="success" size="small" text="发送" @click="submitComment"></u-button>
                    </template>
                </u--input>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showCommentInput: false,
            currentMomentId: null,
            commentText: '',
            // 模拟数据
            momentList: [
                {
                    id: 1,
                    nickname: '张三',
                    avatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
                    content: '今天天气真好，出来踏青！(图文模式)',
                    type: 'image',
                    time: '1小时前',
                    // u-album 需要数组格式
                    urls: [
                        'https://cdn.uviewui.com/uview/album/1.jpg',
                        'https://cdn.uviewui.com/uview/album/2.jpg',
                        'https://cdn.uviewui.com/uview/album/3.jpg',
                        'https://cdn.uviewui.com/uview/album/4.jpg'
                    ],
                    comments: [
                        { user: '李四', text: '羡慕啊！' },
                        { user: '王五', text: '在哪里？' }
                    ]
                },
                {
                    id: 2,
                    nickname: '李四',
                    avatar: 'https://cdn.uviewui.com/uview/album/3.jpg',
                    content: '刚刚拍的视频，大家看看。(视频模式)',
                    type: 'video',
                    time: '2小时前',
                    videoUrl: 'https://cdn.uviewui.com/uview/resources/video/min_video.mp4',
                    videoPoster: 'https://cdn.uviewui.com/uview/album/5.jpg',
                    comments: []
                },
                {
                    id: 3,
                    nickname: '王五',
                    avatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
                    content: '只有文字的一条动态，心情很复杂。',
                    type: 'text', // 纯文字
                    time: '3小时前',
                    urls: [],
                    comments: []
                }
            ]
        };
    },
    methods: {
        goPublish() {
            uni.navigateTo({ url: '/pages/moments/add' });
        },
        openComment(id) {
            this.currentMomentId = id;
            this.showCommentInput = true;
            this.commentText = '';
        },
        submitComment() {
            if (!this.commentText) return;
            // 实际开发需调用API
            const index = this.momentList.findIndex(item => item.id === this.currentMomentId);
            if (index !== -1) {
                this.momentList[index].comments.push({
                    user: '我',
                    text: this.commentText
                });
            }
            this.showCommentInput = false;
            uni.showToast({ title: '评论成功', icon: 'none' });
        }
    }
};
</script>

<style lang="scss" scoped>
.moments-container {
    padding-bottom: 50rpx;
}

.header-section {
    position: relative;
    margin-bottom: 80rpx; // 留出头像溢出的空间

    .cover-bg {
        width: 100%;
        height: 400rpx;
    }

    .user-info {
        position: absolute;
        bottom: -40rpx;
        right: 30rpx;
        display: flex;
        align-items: center;

        .user-name {
            color: #fff;
            font-weight: bold;
            margin-right: 20rpx;
            margin-bottom: 20rpx; // 稍微上提
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        }
    }
}

.list-content {
    padding: 0 30rpx;
}

.moment-item {
    display: flex;
    margin-bottom: 50rpx;
    border-bottom: 1rpx solid #f3f3f3;
    padding-bottom: 30rpx;

    .left-avatar {
        margin-right: 20rpx;
        flex-shrink: 0;
    }

    .right-content {
        flex: 1;

        .nickname {
            color: #5c6b8c; // 微信蓝
            font-weight: bold;
            font-size: 32rpx;
            margin-bottom: 10rpx;
        }

        .text-content {
            font-size: 30rpx;
            color: #333;
            margin-bottom: 20rpx;
            line-height: 1.5;
        }

        .media-content {
            margin-bottom: 20rpx;
        }

        .footer-info {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time {
                font-size: 24rpx;
                color: #999;
            }

            .action-btn {
                background: #f7f7f7;
                padding: 5rpx 10rpx;
                border-radius: 6rpx;
            }
        }

        .comment-box {
            margin-top: 20rpx;
            background-color: #f7f7f7;
            padding: 10rpx 15rpx;
            border-radius: 6rpx;
            font-size: 28rpx;

            .comment-item {
                margin-bottom: 6rpx;
                line-height: 1.4;

                .comment-user {
                    color: #5c6b8c;
                    font-weight: bold;
                    margin-right: 10rpx;
                }

                .comment-text {
                    color: #333;
                }
            }
        }
    }
}

.add-btn {
    position: fixed;
    bottom: 100rpx;
    right: 40rpx;
    background-color: #07c160;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
    z-index: 99;
}

.input-popup {
    padding: 30rpx;
    background: #fff;
}
</style>