<script setup>
import Modal from "@/components/Modal.vue";
const showLayerSettingListModal = ref(null);
const showLayerSettingSaveModal = ref(null);

function openLayerSettingList() {
  showLayerSettingListModal.value = {
    component: "viewer/LayerSettingList",
    title: "Chọn thiết lập layer",
    width: "400px",
    height: "auto",
  };
}

function openLayerSettingSave() {
  showLayerSettingSaveModal.value = {
    component: "viewer/LayerSettingSave",
    title: "Lưu thiết lập layer",
    width: "400px",
    height: "auto",
  };
}
</script>
<template>
  <div class="is-flex is-gap-1">
    <button
      class="button is-small p-2 is-white"
      title="Mở thiết lập"
      @click="openLayerSettingList"
    >
      <SvgIcon v-bind="{ name: 'folder.svg', type: 'primary', size: 20 }" />
    </button>
    <button
      class="button is-small p-2 is-white"
      title="Lưu thiết lập"
      @click="openLayerSettingSave"
    >
      <SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 20 }" />
    </button>
  </div>
  <Modal
    v-bind="showLayerSettingListModal"
    v-if="showLayerSettingListModal"
    @close="showLayerSettingListModal = null"
  />
  <Modal
    v-bind="showLayerSettingSaveModal"
    v-if="showLayerSettingSaveModal"
    @close="showLayerSettingSaveModal = null"
  />
</template>
<style>
#layerSettingSFCContainer {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 75px;
  height: 50px;
  z-index: 1;

  display: flex;
  padding: 0.5rem;
  align-items: center;
}
</style>
