<template>
    <div class="base-container">
        <div ref="mapRef" class="map"></div>
        <task-list class="task-wrap"></task-list>
    </div>
</template>

<script setup>
import { onMounted ,ref} from "vue";
import IndexMap from "./map/index";
import taskList from "./components/taskList";

const mapRef = ref(null);
const indexMap = new IndexMap();

onMounted(()=>{
    indexMap.initMap("POINT(105.3251497742969 -4.76353839996651)", mapRef.value);
})
</script>

<style lang="scss" scoped>
.base-container {
    width: 100%;
    height: 100%;
    position: relative;
    .map{
        width: 100%;
        height: 100%;
        clip-path: inset(0px round 8px);
    }
    .task-wrap{
        position: absolute;
        top: 19px;
        right: 19px;
    }
}
</style>
