<template>
    <div class="dike-hazards-monitor">
        <layer-label :label-data="layerData" />
    </div>
</template>

<script>
import LayerLabel from './LayerLabel'
export default {
    name: 'ComBaseLayer',
    components: {
        LayerLabel
    },
    data() {
        return {
            layerData: [],
            layerId: 'comBaseLayer',
            layers: {}
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.initLayer()
    },
    beforeDestroy() {
        // 移除图层相关
        Object.keys(this.layers).forEach(key => {
            this.layers[key] && this.layers[key].destroy()
            this.layers[key] = null
        })
    },
    methods: {
        initLayer() {
            this.layers[this.layerId] = new this.$esri.GraphicsLayer({
                id: this.layerId,
                graphics: [],
                spatialReference: this.$mapView['map'].spatialReference,
                visible: true
            })
            this.$mapView['map'].map.add(this.layers[this.layerId], 1)

        // 添加图层点击事件
            const clickHandle = this.$mapView['map'].on('click', event => {
                this.$mapView['map'].hitTest(event).then(response => {
                    if (response.results.length) {
                        const graphic = response.results[0]?.graphic
                        if (graphic?.layer === this.layers[this.layerId]) {
                            // this.$store.commit('CommonMap/setCurrentMapFeature', {
                            //     layerId: this.layerId,
                            //     graphic: graphic,
                            //     isLocation: true,
                            //     isHighlight: true,
                            //     view: 'map'
                            // })
                            this.$store.commit('FinalCommonBox/setVideoData', graphic.attributes)
                        }
                    }
                })
        })
}}
}
</script>