<script>
    import { nanoid } from 'nanoid'

    // FIXED: 重要说明
    // renderjs 组件暂不支持 setup 组件写法，对 ts 支持也不友好，这里的写法需要参考 vue2 的写法

    // 总共分为两块 script
    // 1. 逻辑层 Script
    // 2. 视图层 Script
    // 通信方式
    // 1. 通过在逻辑层 data 中设置的属性向视图层传递数据
    // 2. 通过在逻辑层 methods 定义方法，在视图层调用传递参数（注意：只能传递可进行 JSON 序列化的数据）

    export default {
        props: {
            config: {
                type: Object,
                default: () => ({}),
            },
        },
        data() {
            return {
                id: nanoid(),
                options: {},
            }
        },
        created() {
            Message.loading()
        },
        mounted() {
            this.options = {
                container: this.id,
                style: this.config?.style,
                options: this.config?.options,
                attribution: this.config?.attribution,
            }
        },
        methods: {
            onMapLoad(data) {
                Message.hideLoading()
                console.log('✨ Map Loaded', data)
            },
        },
    }
</script>

<!-- renderjs 视图层模块 -->
<script module="mapbox" lang="renderjs" src="./mapbox.module.js"></script>

<template>
    <!-- #ifdef APP-PLUS || H5 -->
    <view class="map wrap" :id="id" :options="options" :change:options="mapbox.changeOptions" />
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <view class="empty wrap">非 APP、H5 环境不支持</view>
    <!-- #endif -->
</template>

<style lang="less" scoped>
    .wrap {
        display: flex;
        width: 100%;
        height: 100%;

        /* #ifdef APP */
        height: 100vh;
        /* #endif */
    }

    .empty {
        justify-content: center;
        align-items: center;
    }
</style>
