<script>
    export default {
        data() {
            return {
                loading: true,
            }
        },
        created() {
            Message.loading()
        },
        methods: {
            changeOption() {},
            onViewClick(options) {
                console.log(options)
            },
            maploaded() {
                Message.hideLoading()
            },
        },
    }
</script>

<script module="echarts" lang="renderjs">
    import { mapOpts,mapStyles } from './style'
    import { appendScript, appendStylesheet } from '/@/utils/dom'
    import { accessToken, defaultStyle, loadMapControl, PopupImage, buildTdtTileUrl, EmptyImage, CustomControl } from '/@/components/Map/Mapbox'

    let mapInstance

    export default {
    	mounted () {
    		if (typeof window.mapInstance === 'function') {
    			this.initMap()
    		} else {
                this.loadMaplibs().then(() =>{
                    this.initMap()
                })
    		}
    	},
    	methods: {
            loadMaplibs(){
                const id = 'mapbox-gl'
                const resource = 'static/js/mapbox-gl-js/mapbox-gl.'
                return  Promise.all([appendScript(id,`${resource}js`),appendStylesheet(id,`${resource}css`)])
            },
    		initMap() {
                mapInstance = new mapboxgl.Map({
                    accessToken,
                    container: 'echarts',
                    ...mapOpts,
                    style: Object.assign({
                        ...mapStyles,
                    })
                })


                mapInstance.on('load',()=>{
                    this.$ownerInstance.callMethod('maploaded')
                })
    		},
    		onClick(event, ownerInstance) {
    			// 调用 service 层的方法
    			// ownerInstance.callMethod('onViewClick', {
    			// 	  test: 'test'
    			// })
    		}
            // updateEcharts(newValue, oldValue, ownerInstance, instance) {
    		// 	// 监听 service 层数据变更
    		// },
    	}
    }
</script>

<template>
    <view class="content">
        <!-- #ifdef APP-PLUS || H5 -->
        <view id="echarts" class="w-100% h-100%" />
        <!-- #endif -->
        <!-- #ifndef APP-PLUS || H5 -->
        <view>非 APP、H5 环境不支持</view>
        <!-- #endif -->
    </view>
</template>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
</style>
