<script>
    import { nanoid } from 'nanoid'

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

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

    function nail() {}

    export default {
        emits: ['register'],
        data() {
            return {
                id: nanoid(),
                onLoaded: nail,
                options: {},
                // FIXED: 定义为 undefined，避免在 Hook 中通过计算属性取值是出现两次变化的问题
                loaded: undefined,
            }
        },
        computed: {
            isReady() {
                return this.loaded
            },
        },
        created() {
            Message.loading()
        },
        mounted() {
            this.$emit('register', this)
        },
        methods: {
            onMapLoad(data) {
                this.loaded = true
                Message.hideLoading()
                console.log('✨ Map Loaded', data)

                // 触发 onLoaded 事件
                this.onLoaded?.(this, data)
            },
            setConfig(config) {
                this.options = {
                    container: this.id,
                    style: config?.style,
                    options: config?.options,
                    attribution: config?.attribution,
                }

                this.onLoaded = config?.onLoaded || nail
            },
        },
    }
</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>
