<template>
    <div class="vcd-wrapper">
        <!-- 左上角的 sidebar，用于显示 -->
        <Sidebar></Sidebar>

        <!-- 工具栏 -->
        <div class="vcd-toolbar">

        </div>
        <!-- 渲染区域 -->
        <div class="vcd-render">

        </div>
        <!-- 显示当前信号树形关系 -->
        <!-- 右侧工具合集 -->
        <RightNav :topModules="VcdInfo.topModules"></RightNav>
    </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
import { getVcdStream, readVcdFile } from '@/hook/utils';
import { emitter, globalLookup, globalSetting } from '@/hook/global';

import Sidebar from '@/components/sidebar.vue';
import RightNav from '@/components/right-nav.vue';

export default {
    components: {
        RightNav,
        Sidebar
    },
    setup() {

        const VcdInfo = reactive({
            topModules: [],
            values: []
        });

        onMounted(async () => {
            // 改变默认颜色
            document.body.style.setProperty('--el-color-primary', 'var(--main-color)');
            document.body.style.setProperty('--el-color-primary-light-9', 'var(--main-color)');
            document.body.style.setProperty('--el-color-primary-light-3', 'var(--main-color)');
            document.body.style.setProperty('--el-text-color-secondary', 'var(--foreground)');
            document.body.style.setProperty('--el-text-color-regular', 'var(--foreground)');
            document.body.style.setProperty('--el-border-color', 'var(--vscode-focusBorder)');
            document.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
            document.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
            document.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');
            document.body.style.setProperty('--el-border', 'var(--sidebar)');
            document.body.style.setProperty('--el-border-color-light', 'var(--sidebar)');
            document.body.style.setProperty('--el-border-color-lighter', 'var(--sidebar)');
            document.body.style.setProperty('--el-bg-color-overlay', 'transplant');

            
            // signal height
            document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');


            const uint8array = await readVcdFile();
            const vcdstream = await getVcdStream();
            const maxChunkLength = 1 << 17;
            for (let i = 0; i < uint8array.length; i += maxChunkLength) {
                const piece = uint8array.slice(i, i + maxChunkLength);
                vcdstream.write(piece);
            }
            for (const topModule of vcdstream.info.wires.body) {
                VcdInfo.topModules.push(topModule);
            }

            // 这一步时，已经加载完成
            // 默认第一个模块被选中
            if (VcdInfo.topModules.length > 0) {
                const defaultMod = VcdInfo.topModules[0];
                const wires = defaultMod.body.filter(mod => mod.link);
                emitter.emit('tree-view', wires);
                // 将顶层模块存储进全局对象，以便后续的搜索服务
                for (const mod of VcdInfo.topModules) {
                    globalLookup.topModules.push(mod);
                }
            }
        });

        return {
            VcdInfo
        }
    }
}


</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

</style>
