<template>
<!-- treeview -->
<div class="vcd-treeview">
    <TreeViewSearch></TreeViewSearch>
    <div class="vcd-module-wrapper">
        <div class="vcd-module-info">
            <div class="vcd-signal-title">{{ t('module') }}</div>
            <hr>
            <el-scrollbar height="86vh" style="padding-right: 7px;">
                <Modules v-for="mod of VcdInfo.topModules"
                        :key="mod.name"
                        :module="mod"
                ></Modules>
            </el-scrollbar>
        </div>
        <div class="vcd-module-wires">
            <Signals></Signals>
        </div>
    </div>
</div>
</template>

<script setup>
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';

import TreeViewSearch from '@/components/treeview/search.vue';
import Modules from '@/components/treeview/modules.vue';
import Signals from '@/components/treeview/signals.vue';

import { VcdInfo } from '@/hook/global';

defineComponent({ name: 'tree-view' });
const { t } = useI18n();

</script>

<style>
.vcd-module-info {
    width: 200px;
    padding-right: 5px;
}

.vcd-module-wires {
    width: 220px;
}


.vcd-treeview {
    background-color: var(--sidebar);
    padding: 10px 10px 10px 10px;
    height: 98vh;
    border-radius: 1.0em;
    display: flex;
    flex-direction: column;
    transition: height .5s ease-in-out;
    user-select: none;
}

.vcd-module-wrapper {
    flex: 1;
    display: flex;
    z-index: 5;
    max-height: 99vh;
    /* overflow: scroll; */
    transition: flex .5s ease-in-out;
}

</style>