<template>
    <uni-collapse-item :name="name" :show-animation="showAnimation" :disabled="disabled" ref="collapseItem" @change="handleCollapseChange">
        <template #title>
            <view class="h-collapse-item-title">
                <view v-if="iconUrl" class="title-icon"
                    :style="{ backgroundImage: iconUrl ? 'url(' + iconUrl + ')' : '' }"></view>
                <text class="title-text">{{ title }}</text>
            </view>
        </template>
        <view ref="contentSlot">
            <slot></slot>
        </view>
    </uni-collapse-item>
</template>

<script>
export default {
    name: 'eikonCollapseItem',
    props: {
        // 折叠面板名称
        name: {
            type: String,
            default: ''
        },
        // 标题文本
        title: {
            type: String,
            default: ''
        },
        // 是否显示动画
        showAnimation: {
            type: Boolean,
            default: true
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 图标URL地址（可选）
        iconUrl: {
            type: String,
            default: ''
        },
        
    },
    mounted() {
       
    },
    methods: {
        handleCollapseChange(e) {
            // 当折叠面板状态变化时，如果是展开状态，重新计算高度
            if (e.detail.show) {
                this.$nextTick(() => {
                    this.updateCollapseHeight();
                });
            }
        },
      
        updateCollapseHeight() {
            
            // 强制重新渲染折叠面板
            if (this.$refs.collapseItem && this.$refs.collapseItem.$el) {
                // 触发uni-collapse-item的重新渲染
                const collapseItem = this.$refs.collapseItem;
                if (collapseItem.isOpen) {
                    // 如果是展开状态，强制重新计算高度
                    this.$nextTick(() => {
                        if (collapseItem.resize) {
                            collapseItem.resize();
                        } else {
                            // 如果resize方法不存在，使用uni-app的节点查询获取高度
                            const query = uni.createSelectorQuery().in(this);
                            query.select('.uni-collapse-item__wrap').boundingClientRect(data => {
                                debugger
                                if (data) {
                                    // 获取内容区域的实际高度 - 使用ref而不是ID选择器
                                    const contentQuery = uni.createSelectorQuery().in(this);
                                    contentQuery.select('.uni-collapse-item__wrap-content').boundingClientRect(contentData => {
                                        if (contentData && contentData.height > 0) {
                                            // 设置折叠面板高度为内容高度
                                            const wrapElement = collapseItem.$el.querySelector('.uni-collapse-item__wrap');
                                            if (wrapElement) {
                                                wrapElement.style.height = contentData.height + 'px';
                                            }
                                        }
                                    }).exec();
                                }
                            }).exec();
                        }
                    });
                }
            }
        }
    },
    beforeDestroy() {
        if (this.contentObserver) {
            this.contentObserver.disconnect();
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-collapse-item__title {
    height: 96rpx !important;
    padding-left: 28rpx;
}

// 确保内容区域在展开时高度自适应
::v-deep .uni-collapse-item__wrap {
    // 保持原有行为，不设置固定高度
}

::v-deep .uni-collapse-item__content {
    // 移除任何可能影响动画的高度限制
    // 让uni-collapse-item自己管理高度
}

.h-collapse-item-title {
    display: flex;
    align-items: center;

    .title-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title-text {
        font-size: 14px;
        color: #333;
    }
}
</style>