<template>
    <view>
        <view class="body">
            <view class="list">
                <view class="list_content" v-for="(item, index) in dynamicFeedList" :key="index">
                    <view class="list_head">
                        <view class="list_module fa">
                            <image :src="item.user.avatar ? item.user.avatar : '/static/images/avatar.png'"
                                mode="widthFix"></image>
                            <view class="list_title">
                                <view class="list_name">{{ item.user.nickname ? item.user.nickname : '' }}</view>
                                <view class="list_time fa">{{ item.created_at ? item.created_at : '' }}</view>
                            </view>
                        </view>
                        <view class="list_substance">{{ item.content ? item.content : '' }}</view>
                        <video class="list_video" :src="item.video_url ? item.video_url : ''" v-if="item.video_url"
                            controls></video>
                        <view class="list_item fa">
                            <view class="list_table fa" @click="likeClick(item, index)">
                                <image class="list_icon"
                                    :src="item.liked ? '/static/images/dynamics_likeA.png' : '/static/images/dynamics_like.png'"
                                    mode="widthFix"></image>
                                <view class="list_text">点赞</view>
                            </view>
                            <view class="list_table fa" @click="commentClick(item, index)">
                                <image class="list_icon" src="/static/images/dynamics_comment.png" mode="widthFix">
                                </image>
                                <view class="list_text">评论</view>
                            </view>
                            <view class="list_table fa" v-if="item.like_count">
                                <image class="list_icon" src="/static/images/dynamics_likeA.png" mode="widthFix">
                                </image>
                                <view class="list_people fa">
                                    <view class="avatar-stack">
                                        <image v-for="(like, index) in item.likes.slice(0, 5)" :key="index"
                                            :src="like.user.avatar" mode="widthFix" class="stacked-avatar"
                                            :style="{ 'margin-left': index > 0 ? '-18rpx' : '0' }"></image>
                                        <text v-if="item.likes.length > 5" class="more-avatars">...</text>
                                    </view>
                                </view>
                                <view class="list_number" v-if="item.like_count">{{ item.like_count ? item.like_count :
                                    0 }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="list_detail" v-if="item.comments.length > 0">
                        <view class="list_comment">
                            <view class="list_criticize fa" v-for="(itemA, indexA) in item.comments" :key="indexA">
                                <image :src="itemA.user.avatar ? itemA.user.avatar : '/static/images/avatar.png'"
                                    mode="widthFix"></image>
                                <view class="list_remark ">
                                    <view class="list_dynamicsName fa">{{ itemA.user.nickname ? itemA.user.nickname : ''
                                    }}: <text>{{ itemA.content ? itemA.content : '' }}</text></view>
                                    <view class="list_dynamicsTime fa">{{ itemA.created_at ? itemA.created_at : '' }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="list_more faj" @click="showClick(item, index)">展示更多评论<image
                                src="/static/images/dynamics_more.png" mode="widthFix">
                            </image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="comment faj" v-if="commentStats">
                <view class="comment_content">
                    <image src="/static/images/close.png" mode="widthFix" @click="closeClick()"></image>
                    <view class="comment_detail fa">
                        <textarea class="f1" v-model="form.commentContent" placeholder="请输入您的评论"
                            placeholder-class="comment_textarea" />
                    </view>
                    <view class="comment_sure faj"><text class="faj" @click="submitComment()">发表</text></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    DynamicFeed,
    DynamicLike,
    DynamicComment,
    DynamicComments,
    GetUserBasic
} from '@/utils/api.js'
export default {
    data() {
        return {
            currentItem: null, // 添加这个属性
            form: {
                page: 1,
                size: 10,
                commentId: '',
                commentContent: '',
                commentIndex: ''
            },
            userInfo: '',
            commentStats: false,
            dynamicFeedList: [],
        }
    },
    onLoad() {
        this.getUserBasic()
        this.dynamicFeed()
    },
    onReachBottom() {
        this.form.page++
        this.dynamicFeed()
    },
    methods: {
        getUserBasic() {
            GetUserBasic().then(res => {
                this.userInfo = res.data;
            })
        },
        dynamicFeed() {
            DynamicFeed(this.form).then(res => {
                this.dynamicFeedList.push(...res.data.items)
                for (let i = 0; i < this.dynamicFeedList.length; i++) {
                    this.dynamicFeedList[i].page = 1
                }
            })
        },
        dynamicLike() {
            DynamicLike(this.likeform.id, {
                action: this.likeform.action
            }).then(res => {
                if (res.code == 1) {
                    uni.showToast({
                        title: '点赞成功',
                        icon: 'none',
                        position: 'top'
                    })
                    this.form.page = 1
                    this.dynamicFeedList = []
                    this.dynamicFeed()
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        position: 'top'
                    })
                }
            })
        },
        commentClick(item, index) {
            this.commentStats = true
            this.form.commentId = item.id
            this.form.commentIndex = index
        },
        likeClick(item, index) {
            let action = ''
            if (item.liked) {
                action = 'unlike';
            } else {
                action = 'like';
            }
            DynamicLike(item.id, {
                action: action
            }).then(res => {
                if (res.code == 1) {
                    uni.showToast({
                        title: '操作成功',
                        icon: 'none',
                        position: 'top'
                    })

                    if (!item.liked) {
                        this.dynamicFeedList[index].likes.push({
                            user: {
                                id: this.userInfo.id,
                                avatar: this.userInfo.avatar,
                                nickname: this.userInfo.nickname
                            }
                        })
                        this.dynamicFeedList[index].like_count++
                    } else {
                        for (let i = 0; i < this.dynamicFeedList[index].likes.length; i++) {
                            if (this.dynamicFeedList[index].likes[i].user.id == this.userInfo.id) {
                                this.dynamicFeedList[index].likes.splice(i, 1)
                            }
                        }
                        this.dynamicFeedList[index].like_count--
                    }

                    this.dynamicFeedList[index].liked = !item.liked
                }
            })
        },
        submitComment() {
            if (this.form.commentContent == "") {
                uni.showToast({
                    title: '请输入评论内容',
                    icon: 'none'
                })
            } else {
                DynamicComment(this.form.commentId, {
                    content: this.form.commentContent
                }).then(res => {
                    if (res.code == 1) {
                        uni.showToast({
                            title: '操作成功',
                            icon: 'none',
                            position: 'top'
                        })
                        let item = {
                            content: this.form.commentContent,
                            created_at: this.getCurrentDateTime(),
                            user: {
                                avatar: this.userInfo.avatar,
                                nickname: this.userInfo.nickname
                            }
                        }
                        this.dynamicFeedList[this.form.commentIndex].comments.unshift(item)
                        this.closeClick()
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            position: 'top'
                        })
                    }
                })
            }
        },
        getCurrentDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        showClick(item, index) {
            ++item.page
            DynamicComments(item.id, {
                page: item.page,
                size: 5
            }).then(res => {
                this.dynamicFeedList[index].comments.push(...res.data.comments);
                console.log(this.dynamicFeedList)
            })
        },
        closeClick() {
            this.commentStats = false
            this.form.commentContent = ''
        },
    }
}
</script>
<style>
.body {
    position: relative;
    padding: 20rpx 40rpx;
}

.list {
    position: relative;
}

.list_content {
    position: relative;
    margin: 0 0 20rpx 0;
}

.list_head {
    position: relative;
    padding: 0 20rpx;
}

.list_module {
    position: relative;
}

.list_module image {
    width: 88rpx;
    height: 88rpx;
    display: block;
    border-radius: 50%;
}

.list_title {
    position: relative;
    margin: 0 0 0 30rpx;
}

.list_name {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    line-height: 50rpx;
}

.list_time {
    font-weight: 400;
    font-size: 28rpx;
    color: #9E9E9E;
    line-height: 50rpx;
}

.list_time text {
    margin: 0 0 0 20rpx;
}

.list_substance {
    position: relative;
    margin: 20rpx 0 0 0;
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    line-height: 50rpx;
}

.list_video {
    position: relative;
    margin: 14rpx 0 0 0;
    width: 200rpx;
    height: 240rpx;
}

.list_item {
    position: relative;
    margin: 35rpx 0 0 0;
}

.list_table {
    position: relative;
    margin: 0 25rpx 0 0;
}

.list_icon {
    margin: 0 6rpx 0 0;
    width: 36rpx;
    height: 40rpx;
}

.list_text {
    font-weight: 400;
    font-size: 28rpx;
    color: #9E9E9E;
    line-height: 50rpx;
}

.list_people {
    position: relative;
}

.list_people image {
    margin: 0 6rpx 0 0;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
}

.list_number {
    font-weight: 400;
    font-size: 28rpx;
    color: #9E9E9E;
    line-height: 50rpx;
}

.list_detail {
    position: relative;
    margin: 30rpx 0 0 0;
}

.list_comment {
    position: relative;
}

.list_criticize {
    position: relative;
    margin: 0 0 10rpx 0;
    padding: 12rpx 20rpx;
    background: #F6F6F6;
    border-radius: 4rpx;
}

.list_criticize image {
    width: 60rpx;
    height: 60rpx;
    display: block;
    border-radius: 50%;
}

.list_remark {
    position: relative;
    margin: 0 0 0 30rpx;
}

.list_dynamicsName {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 50rpx;
}

.list_dynamicsName text {
    margin: 0 0 0 20rpx;
    color: #333333;
}

.list_dynamicsTime {
    font-weight: 400;
    font-size: 24rpx;
    color: #9E9E9E;
    line-height: 50rpx;
}

.list_dynamicsTime text {
    margin: 0 0 0 20rpx;
}

.list_more {
    position: relative;
    margin: 20rpx 0 0 0;
    font-weight: 400;
    font-size: 28rpx;
    color: #9E9E9E;
    line-height: 50rpx;
}

.list_more image {
    margin: 0 0 0 12rpx;
    width: 20rpx;
    height: 20rpx;
}

.comment {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 40rpx;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.comment_content {
    position: relative;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 60rpx 60rpx 30rpx 60rpx;
}

.comment_content image {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    width: 30rpx;
    height: 30rpx;
}

.comment_title {
    font-weight: 500;
    font-size: 32rpx;
    color: #161616;
    line-height: 38rpx;
    text-align: center;
}

.comment_detail {
    position: relative;
    margin: 20rpx 0 0 0;
}

.comment_detail textarea {
    width: 500rpx;
    padding: 15rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #161616;
    line-height: 50rpx;
    border-radius: 12rpx;
    border: 1px solid #989898;
}

.comment_textarea {
    color: #9c9c9c;
}

.comment_sure {
    margin: 20rpx 0 0 0;
}

.comment_sure text {
    padding: 15rpx 60rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    line-height: 50rpx;
    background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
    border-radius: 10rpx;
}
</style>