<template>
    <div>
        <lcap-json-view :value="data" :expandDepth="1" style="min-height: 500px; width: 49%;"></lcap-json-view>
    </div>
</template>

<script>
import { App, Entity } from '../../types';
import { LcapJsonView } from '../components/lcap-json-view';
import logicData from './logic.json';

export default {
    components: {
        LcapJsonView,
    },
    data() {
        return {
            data: {
                app: undefined,
                pageLogics: logicData,
                firstWebService: undefined,
                rootView: undefined,
            },
        };
    },
    created() {
        this.init();
    },
    methods: {
        async init() {
            const app = new App({
                id: '2bcde497-5dcf-4134-aa8a-d166c9c491f0',
            });
            await app.load();
            await app.loadServices();
            const pages = await app.firstWebService.loadPages();
            await pages[0].loadViewTree();
            this.data.app = app;
            this.data.firstWebService = app.firstWebService;
            this.data.rootView = pages[0].rootView;
        },
    },
};
</script>
