<template>
    <div class="module">
        <div @click="clickItem()" class="vcd-treeview-item"
            :class="module === globalLookup.currentModule ? 'vcd-treeview-selected' : ''">
            <span class="module-tag-status" @click.stop="expandManage.click">
                <div :class="expandManage.expandTagClass"></div>
            </span>
            <span :class="`iconfont ${makeIconClass(module)}`"></span>
            &ensp;{{ module.name }}
        </div>

        <div v-if="mods.length > 0" v-show="expandManage.expanded" class="vcd-subtree-wrapper">
            <div style="width: 20px;"></div>
            <div style="width: 100%;">
                <modules
                    v-for="(child, index) in mods" 
                    :module="child" 
                    :key="index"
                ></modules>
            </div>
        </div>
    </div>
</template>

<script setup>
/* eslint-disable */
import { reactive, defineComponent } from 'vue';
import { emitter, globalLookup } from '@/hook/global';
import { isScope, isVariable, makeIconClass } from '@/hook/utils';
import { TreeviewExpandSignals } from './modules';
import { saveViewApi } from '@/api';

defineComponent({ name: 'modules' });
const props = defineProps({
    module: {
        type: Object,
        required: true
    }
});

const module = props.module;
globalLookup.initcurrentModule(module);

const signals = [];
const mods = [];

for (const wire of module.body) {
    if (isScope(wire)) {
        mods.push(wire);
    } else if (isVariable(wire)) {
        signals.push(wire);
    }
}
        
function clickItem() {
    emitter.emit('tree-view', signals);
    // color change into selected
    globalLookup.currentModule = module;
}

function getExpandStatus() {
    if (mods.length === 0) {
        return false;
    }    

    return TreeviewExpandSignals.has(module);
}

const expandManage = reactive({
    expanded: getExpandStatus(),
    expandTagClass: mods.length === 0 ? '' : 'collapse-tag',
    click() {                
        this.expanded = !this.expanded;
        if (this.expandTagClass) {
            this.expandTagClass = this.expanded ? 'expand-tag' : 'collapse-tag';
        }
        if (this.expanded) {
            TreeviewExpandSignals.add(module);
        } else {
            TreeviewExpandSignals.delete(module);
        }

        // 保存
        saveViewApi({ treeviewExpands: true });
    }
});
</script>

<style>
.icon-memory-chip {
    color: #FF7043;
}

.module {
    text-align: left;
}

.vcd-subtree-wrapper {
    display: flex;
    width: 100%;
}

.vcd-treeview-item {
    color: var(--sidebar-item-text);
    cursor: pointer;
    height: 27px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vcd-treeview-item::selection {
    background: none;
}

.vcd-treeview-item:hover {
    background-color: var(--sidebar-item-selected);
    border-radius: .3em;
}

.vcd-treeview-selected {
    background-color: var(--button-active) !important;
    border-radius: .3em;
}

.module-tag-status {
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: space-around;
    display: flex;
}

.expand-tag {
    height: 7px;
    width: 7px;
    border-top: solid 1.7px var(--sidebar-item-text);
    border-left: solid 1.7px var(--sidebar-item-text);
    transform: rotate(225deg);
}

.collapse-tag {
    height: 7px;
    width: 7px;
    border-top: solid 1.7px var(--sidebar-item-text);
    border-left: solid 1.7px var(--sidebar-item-text);
    transform: rotate(135deg);
}
</style>
