<template>
  <section>
    <Navbar class="task-navbar"> </Navbar>

    <the-sidebar2
      :showUserAvatar="true"
      :menu="menu"
      @statusPage="statusPage"
    ></the-sidebar2>

    <main class="main-page__content" :class="{ expanded: !isSidebarCollapsed }">
      <right-section
        ref="chat-list-panel"
        @select-day="selectDay"
        :show-header="statusPagHedear"
        :key="render"
        id="group"
      ></right-section>

      <div class="flex-grow-1">
        <div class="position-relative d-flex justify-content-center"></div>
        <template>
          <MainSection 
              ref="mainsection"
              :key="render"
          ></MainSection>
        </template>
      </div>
      <div class="right-section-mobile"></div>

      <!-- <mobile-footer></mobile-footer> -->
    </main>
  </section>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import HttpService from "@services/httpService";
import menu from "@task/json/menu.json";

export default {
  beforeMount() {
    this.httpService = new HttpService();
    this.getSchemas();
  },

  // mixins: [commentMixin],

  mounted() {
    this.TOGGLE_PANEL(false);
  },
  watch: {
    getPanelStatus(status) {
      if (status) this.openForm();
      else this.closeModal();
    },
    $route: {
      handler: function () {
        this.sidebarCollapsedSetter(true);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      
      nomber: 0,
      statusPagHedear: 1,
      render: 1,
      showListPanel: false,
      menu: menu,
    };
  },
  computed: {
    ...mapGetters([
      "getPanelStatus",
      "isSidebarCollapsed",
      "organNameGetter",
    ]),
  },
  methods: {
    ...mapMutations([
      "TOGGLE_PANEL",
      "sidebarCollapsedSetter",
      "taskSchemaSetter",
    ]),
    ...mapActions(["checkPermissions"]),
    getSchemas() {
      let url = this.repoMicroServiceName + "schema";
      this.httpService
        .postRequest(url, {
          organ: this.organNameGetter,
          system: "task",
          build_state: this.buildState,
        })
        .then((response) => {
          this.taskSchemaSetter(response.data.task[0]);
          this.render++;
        })
        .finally(() => {
          this.loading = false;
        });
    },


    selectedListBackTitle(name) {
      if (name == "groups") return "دانشتو با بقیه به اشتراک بزار.";
      if (name == "privates") return "به هر کی دوست داری، پیام بده.";
      if (name == "lobbies") return "به تالار گفتگو خوش اومدی";
    },

    // showSearch() {
    // search in current group, not all groups.
    // this.$refs["chat-list-panel"].showSearchs(true);
    // },

    // #region mehdi
    statusPage($event) {
      const number = $event;

      if (number == 1) {
        if (this.$refs["chat-list-panel"].showMainpag == false) {
          this.$refs["chat-list-panel"].showMainpag = true;
        }
      } else {
        if (this.$refs["chat-list-panel"].showMainpag == false) {
          this.$refs["chat-list-panel"].showMainpag = true;
        }
      }
    },
    // #endregion

    toggleSidebarMenu() {
      this.TOGGLE_SIDEBAR_MENU();
    },
    showToggleListPanel() {
      this.showListPanel = !this.showListPanel;
      this.$refs["chat-list-panel"].showMainpag = true;
    },

    // #region mehdi
    openPagGrup(data) {
      this.enablePanelToggling = data;
      if (this.enablePanelToggling == 1) {
        this.showToggleListPanel();
      }
    },
    selectDay(date) {
      this.$refs.mainsection.setCurrentDate(date);
    },
    // #endregion
  },

  components: {
    MainSection: () => import("@task/components/MainSection"),
    RightSection: () => import("@task/components/RightSection"),
    Navbar: () => import("@task/components/Navbar"),
  },
};
</script>
<style lang="scss" scoped></style>
