<template>
    <!-- 上方的 toolbar -->
    <ToolBar></ToolBar>
    
    <!-- 主渲染区 -->
    <MainRender></MainRender>

    <!-- 左上角的 sidebar，用于显示 -->
    <Sidebar></Sidebar>

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

<script setup>
import { onMounted, reactive, watch } from 'vue';
import { useI18n } from 'vue-i18n';

import { ElLoading } from 'element-plus';

import { emitter, globalLookup, globalSetting } from '@/hook/global';
import { makeWaveView } from '@/hook/render';
import { getCrossOriginWorkerURL } from '@/hook/network';


import ToolBar from '@/components/toolbar';
import Sidebar from '@/components/sidebar';
import RightNav from '@/components/right-nav.vue';
import MainRender from '@/components/render';

const { t } = useI18n();

// 监听 globalSetting 并录入 localStorage
watch(
    () => globalSetting,
    () => {
        localStorage.setItem('setting', JSON.stringify(globalSetting));
    },
    { deep: true }
);

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

onMounted(async () => {
    const loading = new ElLoading.service({
        lock: true,
        text: t('loading'),
        background: 'rgba(0, 0, 0, 0.7)'
    });
    // 改变默认颜色
    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', 'var(--sidebar)');
    document.body.style.setProperty('--el-color-info-light-9', 'var(--vscode-focusBorder)');
    document.body.style.setProperty('--el-color-info', 'var(--foreground)');
    document.body.style.setProperty('--el-color-info-light-8', 'var(--vscode-focusBorder)');
    // document.body.style.setProperty('--el-color-white', 'var(--background)');
    
    // 设置全局宏
    document.body.style.setProperty('--time-scale-height', '50px');
    document.body.style.setProperty('--vcd-render-padding', '30px');
    document.body.style.setProperty('--sidebar-width', '230px');
    document.body.style.setProperty('--toolbar-height', '60px');

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

    // 初始化 localStorage （如果没有的话）
    if (!localStorage.getItem('setting')) {
        localStorage.setItem('setting', JSON.stringify(globalSetting));
    }

    // 初始化载入 vcd 文件
    const arrayBuffer = await window.readVcdFile();
    const url = await getCrossOriginWorkerURL(window.workerPath);
    const worker = new Worker(url, {
        name: 'vcd-stream',
        type: 'classic'
    });

    worker.postMessage({ arrayBuffer, workerRoot: window.workerRoot }, [arrayBuffer]);

    worker.addEventListener('message', event => {
        const workerVars = event.data;
        const vcdInfo = workerVars.vcdInfo;
        const signalValues = workerVars.signalValues;

        for (const topModule of vcdInfo.wires.body) {
            VcdInfo.topModules.push(topModule);
        }

        globalLookup.status = vcdInfo.status;
        globalLookup.version = vcdInfo.version;
        globalLookup.timescale = vcdInfo.timescale;
        globalLookup.date = vcdInfo.date;
        globalLookup.t0 = vcdInfo.t0 || 0;

        globalLookup.tgcd = workerVars.tgcd;
        globalLookup.time = workerVars.time;
        globalLookup.chango = signalValues;
        makeWaveView();

        // console.log(signalValues['*']);

        // console.log('duration time', globalLookup.time);
        emitter.emit('meta-ready', null);

        // 这一步时，已经加载完成
        // 默认第一个模块被选中
        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);
            }
        }
        loading.close();
        worker.terminate();
    });
});

</script>

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


</style>
