<script setup lang="ts">
import { nextTick, unref, watch } from 'vue'
import { useAreaMapOperation } from './hooks/useServiceArea';
import { MAP_INJECTION_KEY } from '@/config/symbol'

const parentApi = inject(MAP_INJECTION_KEY)

const { mapRef, setMapCenter, drawPolygon, removePolygon, initPolygon } = useAreaMapOperation(parentApi)
const isInited = computed(() => parentApi?.isInited.value)
const location = computed(() => !isInited.value && parentApi?.address.value.location)


watch(() => unref(parentApi?.address), ({ location }) => {
    if (isInited.value) return
    setMapCenter(location)
})

onMounted(() => {
    if (isInited.value) return
    nextTick(() => setMapCenter(location.value))
})

defineExpose({
    setMapCenter,
    initPolygon,
    removePolygon,
})
</script>

<template>
    <div class="map">
        <div ref="mapRef" class="map__inner"></div>
        <div id="toolControl">
            <div class="toolItem" title="添加区域按钮" @click="drawPolygon"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/components/area-common/styles/map.scss';
</style>
