<template>
  <div class="int-expansion-panels">
    <el-collapse v-model="activeNames">
      <slot />
    </el-collapse>
  </div>
</template>

<script>
export default {
    name: 'IntExpansionPanels',
    props: {
        openedPanels: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            activeNames: this.openedPanels || []
        }
    },
    watch: {
        openedPanels(val) {
            this.activeNames = val;
        }
    },
    methods: {
        handleChange(val) {
            this.$emit('update:openedPanels', val);
        }
    }
};
</script>

<style scoped>
.int-expansion-panels {
    margin-bottom: 10px;
}

/* 确保与Element UI折叠面板样式兼容 */
.int-expansion-panels .el-collapse {
    border-top: 1px solid #EBEEF5;
    border-bottom: 1px solid #EBEEF5;
}

.int-expansion-panels .el-collapse-item__header {
    font-size: 14px;
    padding-left: 12px;
}

.int-expansion-panels .el-collapse-item__content {
    padding: 10px;
}
</style>
