<template>
    <div style="height: 100%;">
        <div style="height: 100%;" v-loading="loading">
            <div id="cesiumContainer" style="height: 100%;"></div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'JhbigscreenMapModle',
    props: {
    },
    data() {
        return {
            images: [],
            loading: false,
            mapInfo: null,
            project: null
        };
    },

    mounted() {
        this.initMe();
    },

    methods: {
        initMe() {
            this.project = this.$root.project||{};
            this.reloadMap();
        },
        reloadMap() {
            this.mapInfo = {
                root: "http://szgc.jhncidg.com:808/mapmodel/Tools/output/model/202308292207450987/root.glt",
                modelId: '3a0d53cc-ad56-688c-e38d-f907088c2882'
            };
            this.showMap = true;
            this.loading = true;
            setTimeout(this.initMap, 200);

        },
        initMap() {
            const func = () => {
                if (!document.getElementById("cesiumContainer")) {
                    setTimeout(func, 50);
                    return;
                }
                if (!window.initMap) {
                    setTimeout(func, 50);
                    return;
                }
                this.loading = false;
                window.initMap();
                window.mapApi.Model.add(
                    this.mapInfo.root,
                    this.mapInfo.modelId,
                    null,
                    (data) => {
                        if (Cesium.defined(data)) {
                            if (Cesium.defined(data.obj) && data.obj instanceof Cesium.Cesium3DTileset) {
                            }
                        }
                    },
                    (data) => {
                        $("#box,#LoadingShadow").hide()
                    });
                window.mapApi.Public.Event("LEFT_CLICK", function (click) {
                    window.mapApi.Feature.GetFeatureByEvent(click.position, function (json) {
                    });
                });
            }
            func();
        }
    },
};
</script>

<style lang="less">
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

#cesium-plugin-cube_cesiumContainer {
    transform: scale(0.6);
}
</style>