

<script>
import {computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
import {useRoute} from 'vue-router'
import Machines from "./Machines/Machines.vue";
import FinderPacks from "./FinderPacks/FinderPacks.vue";
import AddUsers from "./AddUsers/AddUsers.vue";
import Button from "@atoms/VButton.vue";

export default {
  name: 'Main',
  components: {
    Machines,
    FinderPacks,
    AddUsers,
    Button
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    const path = computed(() => route.path)
    store.dispatch('main/uploadData', path.value)
    store.commit('main/setPath', path.value)
  },
  data() {
    return {
      enabled: true,
      dragging: false,
      isTopScrolled: true,
      containerOffset: 0
    }
  },
  computed: {
    ...mapGetters('main', ['pages', 'activePath', 'selectedPage']),
    ...mapGetters('layout', ['isOpenMenu']),
  },
  mounted () {
  },
  unmounted() {
    const store = useStore();
    store.dispatch('main/resetStore')
  },
  updated() {
    this.$nextTick(function () {
      const path = this.$route.path
      if (path !== this.activePath) {
        const path = this.$route.path
        this.$router.push({ path: path, query: {} })
        this.setPath(path)
        this.uploadData(path)
      }
    })
  },
  methods: {
    ...mapMutations('main', ['setPage', 'setPath']),
    ...mapActions('main', ['uploadData']),
    setSelPage: function(page) {
      console.log('page', page)
      return this.setPage(page)
    }
  }
}

</script>



<template>
  <div class="col-span-12">
    <div class="p-2 sm:px-5 pt-1 bg-light rounded-t-xl">
      <div class="relative">
        <div class="flex gap-3 sm:gap-7 w-full lg:w-[50%]">
          <router-link :to="{name: page.link}" @click="setPage(page)" v-for="(page, idx) in pages" class="flex w-full">
            <Button v-bind:key="idx" type="button" :title="page.name" :classBtn="[selectedPage.key !== page.key ? 'border-transparent': 'border-slate-500', 'flex border-b-4']" />
          </router-link>
          </div>
        <div class="border-2 rounded-lg w-full bottom-0 absolute"/>
      </div>
    </div>
    <router-view />
  </div>
</template>


