<template>
    <view class="eikon-collapse-item" :style="{ borderTopColor: borderColor }">
        <uni-collapse-item :name="name" :show-animation="showAnimation" :disabled="disabled"  :open="open" ref="collapseItem"
            @change="handleCollapseChange">
            <template #title>
                <view class="eikon-collapse-item-title">
                    <view class="title-left-bar" :style="{ backgroundColor: borderColor }"></view>
                    <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>
    </view>
</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
        },
        // 是否默认展开
        open: {
            type: Boolean,
            default: true
        },
        // 图标URL地址（可选）
        iconUrl: {
            type: String,
            default: ''
        },
        // 边框和左侧竖条的颜色
        borderColor: {
            type: String,
            default: '#4873E3'
        }
    },
    mounted() {

    },
    methods: {
        handleCollapseChange(e) {
            // 当折叠面板状态变化时，如果是展开状态，重新计算高度
            if (e.detail.show) {
                this.$nextTick(() => {
                    this.updateCollapseHeight();
                });
            }
        },

        updateCollapseHeight() {
            // 简化高度计算逻辑，避免干扰uni-collapse-item的默认行为
            if (this.$refs.collapseItem && this.$refs.collapseItem.resize) {
                // 使用uni-collapse-item提供的resize方法
                this.$nextTick(() => {
                    this.$refs.collapseItem.resize();
                });
            }
        }
    },
    beforeDestroy() {
        if (this.contentObserver) {
            this.contentObserver.disconnect();
        }
    }
}
</script>

<style lang="scss" scoped>
.eikon-collapse-item {
    border-top: 6rpx solid;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
    border-radius: 32rpx;
    margin-bottom: 24rpx;
    overflow: hidden;
}

::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自己管理高度
}

.eikon-collapse-item-title {
    display: flex;
    align-items: center;
    position: relative;

    .title-left-bar {
       
        width: 8rpx;
        height: 32rpx;
        border-radius: 4rpx;
        margin-right: 16rpx;
    }

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

    .title-text {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
    }
}
</style>