<template>
    <!-- 渲染区域 -->
    <Render></Render>
    <!-- 右侧工具合集 -->
    <RightNav></RightNav>
</template>

<script setup>
import Render from '@/components/render';
import RightNav from '@/components/right-nav.vue';
import { onMounted, watch } from 'vue';
import { setDefaultCss } from './hook/css';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

import { globalLookup, globalSetting } from './hook/global';
import { ElLoading } from 'element-plus';

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


onMounted(async () => {
    // 设置 css 宏，纠正样式
    setDefaultCss();

    const loading = new ElLoading.service({
        lock: true,
        text: t('loading'),
        background: 'rgba(0, 0, 0, 0.7)'
    });

    globalLookup.topModuleName = window.moduleName;
    
    // 初始化载入 netlist 的 json 文件
    const [ netJson, skinBinary ] = await window.readNetFile();

    const render = globalLookup.netlistRender;
    const skinManager = globalLookup.skinManager;

    skinManager.load(skinBinary);
    render.load(netJson);

    const layout = await render.createLayout();
    const svg = await render.render(layout, '#netlist');
    
    loading.close();
});

</script>

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