<template class="bg-primary-lighten">
  <v-app id="inspire">
    <one-snackbar
      v-model="snackbar.model"
      :multi-line="snackbar.multiLine"
      :message="snackbar.message"
      :timeout="snackbar.timeout"
      :location="snackbar.location"
      :color="snackbar.type"
    ></one-snackbar>

    <one-dialog
      v-model="dialogInfo.model"
      :title="dialogInfo.title"
      :color="dialogInfo.color"
      :message="dialogInfo.message"
      :onClose="cobaFunction"
      :width="'50vw'"
    ></one-dialog>

    <one-navbar></one-navbar>
    <v-main class="mt-3 mb-3 mx-2">
      <div class="pa-4 bg-primary-lighten rounded-xl h-100">
        <v-row class="">
          <v-col cols="12"><filter-fo></filter-fo></v-col>
          <v-col cols="12"> <location-component></location-component></v-col>
        </v-row>
      </div>
    </v-main>
  </v-app>
</template>

<script type="module">
  import FilterFo from "./filter.vue";
  import LocationComponent from "./lokasi.vue";

  import NavbarComponent from "../../globalcomponent/one-navbar.vue";
  import SnackbarComponent from "../../globalcomponent/one-snackbar.vue";
  import dialogComponent from "../../globalcomponent/one-dialog.vue";

  export default {
    name: "component2",
    components: {
      "filter-fo": FilterFo,
      "one-navbar": NavbarComponent,
      "location-component": LocationComponent,
      "one-snackbar": SnackbarComponent,
      "one-dialog": dialogComponent,
    },
    mounted() {
      if (typeof Iconify !== "undefined") {
        Iconify.scan(); // Render ikon setelah komponen Vue dimuat
      } else {
        console.error("Iconify is not loaded.");
      }
    },
    updated() {
      if (typeof Iconify !== "undefined") {
        Iconify.scan(); // Render ikon setelah komponen diperbarui
      }
    },
    computed: {
      dialogInfo: {
        get() {
          return this.$store.state.lokasi.dialogInfo;
        },
        set(val) {
          this.$store.commit("lokasi/update_dialogInfo", val);
        },
      },
      snackbar: {
        get() {
          return this.$store.state.lokasi.snackbar;
        },
        set(val) {
          this.$store.commit("lokasi/update_snackbar", val);
        },
      },
    },
    methods: {
      cobaFunction() {
        console.log("coba function");
      },
    },
  };
</script>

<style scoped></style>
