<template>
    <div class="netlist-tree-view">
        <div class="netlist-module-info">
            <div class="netlist-signal-title">{{ t('module') }}</div>
            <hr style="width: 100%;">
            <el-scrollbar height="86vh" style="padding-right: 7px;">
                <modules
                    v-for="mod of treeviewData.modules"
                        :key="mod.name"
                        :module="mod"
                ></modules>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { defineComponent, onMounted } from 'vue';
import modules from './modules.vue';
import { resize, treeviewData, verticalResizer } from './tree';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

defineComponent({ name: 'tree-view' });

onMounted(() => {
    document.addEventListener('mouseup', () => {
        verticalResizer.active = false;
        document.removeEventListener('mousemove', resize);
    })
});

</script>

<style>
.netlist-module-info {
    padding-right: 5px;
}

.netlist-signal-title {
    margin-left: 5px;
    height: 2.5vh;
}

.icon-wave-square {
    color: var(--main-color);
}

.icon-brackets {
    color: #75BEDF;
}

.icon-register {
    color: #885dff;
}

.icon-integer {
    color: #C76B3C;
}

.icon-string {
    color: #8CC265;
}

.icon-real {
    color: #5fb4d8;
}

.icon-task {
    color: orange;
}

.search-nothing {
    height: 40vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.search-nothing .iconfont {
    font-size: 120px;
}

.netlist-tree-view {
    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;
    min-width: 220px;
    width: 95%;
}

</style>