<template>
    <view class="u-page">
        <view class="u-page0-top">
        </view>
        <view class="u-demo-block">
			<view class="reply-button" @click="handleReply">
			    <up-text
			        text="回复"
			        type="primary"
			        size="14"
			    ></up-text>
			</view>
            <view class="u-demo-block__content">
                <view class="album">
                    <view class="album__avatar">
                        <image
                            :src="props.data.userAvatar"
                            mode=""
                            style="width:32px;height:32px;"
                        ></image>
                    </view>
                    <view class="album__content">
                        <up-text
                            :text="props.data.userName"
                            type="primary"
                            bold
                            size="17"
                        ></up-text>
                        <up-text
                            margin="0 0 8px 0"
                            :text="props.data.content"
                        ></up-text>
                       <!-- <up-album
                            :urls="urls1"
                            keyName="src2"
                        ></up-album> -->
                        <!-- 子列表展示 -->
                        <view class="sub-discussions">
                            <view class="sub-discussion-item" v-for="(item, index) in displayedSubDiscussions" :key="index" >
                               <view class="">
                               	<up-text
                               	    :text="item.userName+'：'"
                               	    type="secondary"
                               	    size="15"
                               	></up-text>
                               </view>
								<view class="sub-discussion-text">
									<up-text
									    :text="item.content"
									    size="14"
									></up-text>
								</view>
                            </view>
                            <view v-if="props.data.children.length > 2" class="toggle-btn" @click="toggleExpand">
                                <up-text
                                    :text="isExpanded ? '收起' : '展开更多'"
                                    type="primary"
                                    size="14"
                                ></up-text>
                            </view>
                        </view>
                        <!-- 回复按钮 -->
                        
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, defineProps } from 'vue';
const emit=defineEmits(['clickHf'])
// 定义属性
const props = defineProps({
    data: {
        type: Object,
        default: () => ({
            id: 1,
            children: [],
            content: "内容",
            createTime: "2024-06-05T11:32:09.000+08:00",
            parentId: -1,
            userAvatar: null,
            userId: 1,
            userName: "123",
        })
    }
});

// 初始化响应式变量
const urls1 = ref([]); // 示例图片数据
const isExpanded = ref(false);

// 计算属性：显示的子讨论列表
const displayedSubDiscussions = computed(() => {
	if(props.data.children==null){
		props.data.children=[];
	}
    return isExpanded.value ? props.data.children: props.data.children.slice(0, 2);
});

// 切换展开状态的方法
const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
};

// 处理回复按钮点击事件的方法
const handleReply = () => {
    // 实现回复功能的逻辑
    // alert("点击了回复按钮");
	emit('clickHf',props.data.id);
};
</script>

<style lang="scss" scoped>
.u-page {
    width: 100%;
}

.u-page0-top {
    height: 20rpx;
    width: 98%;
    margin: 10rpx auto;
    background-color: #A8E6CF;
}
.sub-discussion-item{
	display: flex;
}
.sub-discussion-text{
	margin-left: 20rpx;
}
.reply-button{
	float:right;
}
.album {
    display: flex;
    align-items: flex-start;

    &__avatar {
        background-color: #f5f5f5;
        padding: 5px;
        border-radius: 3px;
    }

    &__content {
        margin-left: 10px;
        flex: 1;
        position: relative;

        .reply-button {
            position: absolute;
            right: 0;
            bottom: 0;
            cursor: pointer;
            background-color: #f5f5f5;
            padding: 5px 10px;
            border-radius: 3px;
            text-align: center;
        }
    }

    .sub-discussions {
        margin-top: 10px;

        .sub-discussion-item {
            margin-bottom: 8px;
        }

        .toggle-btn {
            cursor: pointer;
            text-align: center;
            margin-top: 10px;
        }
    }
}
</style>
