<template>
    <div v-if="brotherInstances" class="ui-gate-content" :class="{ active }">
        <slot :active="active" />
    </div>
</template>

<script lang="ts" setup>
// getCurrentInstance
import { inject, onBeforeMount, onUnmounted, ref } from 'vue'
import { Relation } from './constant'

defineOptions({
    name: 'UIGateContent',
})

const active = ref(false)
const brotherInstances = inject(Relation).value

if (brotherInstances) {
    onBeforeMount(() => brotherInstances.push(active))
    onUnmounted(() => {
        const index = brotherInstances.indexOf(active)
        if (~index) {
            brotherInstances.splice(index, 1)
        }
    })
}
</script>

<!-- <script>
export default { name: 'UiGateContent' }
</script> -->
