<script lang="ts" setup>
    // 引入cesium基础库
    import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'

    // 导入mars3d主库
    import 'mars3d/dist/mars3d.css'
    import * as mars3d from 'mars3d'

    import './index.css'
    import { config } from './tools'

    import { nanoid } from 'nanoid'
    import { propTypes } from '/@/utils/propTypes'

    const props = defineProps({
        id: propTypes.string,
        width: propTypes.string.def('100%'),
        height: propTypes.string.def('100%'),
    })

    const id = props.id ?? nanoid()
    const mapRef = ref<mars3d.Map>()

    onMounted(() => {
        // 示例
        // https://sandcastle.cesium.com/index.html

        // 关闭一些基础配置
        // http://events.jianshu.io/p/14b47da20909
        const map = new mars3d.Map(id, config)

        mapRef.value = map
    })

    onUnmounted(() => {
        mapRef.value?.destroy()
    })

    defineExpose({
        map: markRaw(mapRef),
    })
</script>

<template>
    <div :id="id" class="map"></div>
</template>

<style lang="less" scoped>
    .map {
        width: v-bind(width);
        height: v-bind(height);
    }
</style>
