<!-- برای نمایش یک جزء از قانون استفاده می شود  -->

<!-- don't change the class: problem-section__content,
   otherwise the remove link will not work. -->
<template>
  <main class="main" id="top">
    <the-sidebar
      :showUserAvatar="!isMajlesBuild"
      :menu="sidbarMenu"
    ></the-sidebar>

    <section
      class="main-page__content"
      :class="{ expanded: !isSidebarCollapsed }"
    >
      <div class="container-fluid">
        <div
          :class="buildName + '-header-color'"
          class="row align-items-center"
        >
          <div class="col col-lg-auto order-1">
            <div class="d-flex align-items-center">
              <button
                name="button"
                type="button"
                class="toggle-mobile-nav dropdown-hamburger d-md-none"
                @click.prevent="toggleSidebarMenu()"
              >
                <span class="sr-only">باز کردن منوی کنار</span>
                <svg class="s18" data-testid="sidebar-icon">
                  <use href="assets/common/img/icons.svg#sidebar"></use>
                </svg>
              </button>

              <router-link
                :to="{
                  name: 'defaultRoute',
                }"
                classes="btn me-3"
              >
                <img
                  :src="logoPhoto()"
                  :alt="appLongTitle"
                  class="img-fluid logo"
                  style="max-width: 2.5em"
                />
              </router-link>
            </div>
            <!-- <div
                class="d-flex align-items-center"
                v-if="navigateChartSchemaGetter?.length"
              >
                <label for="repositories-desktop" class="ms-2 no-wrap">
                  بانک داده
                </label>
                <multiselect
                  :allow-empty="false"
                  :searchable="true"
                  :close-on-select="true"
                  :show-labels="false"
                  label="label"
                  track-by="key"
                  placeholder="انتخاب فهرست"
                  :value="selectedNavigation"
                  :options="navigateChartSchemaGetter"
                  @select="onSelectNavigation"
                  :hide-selected="false"
                  :max-height="200"
                  id="repositories-desktop"
                >
                </multiselect>
              </div> -->
          </div>
          <div class="col-12 col-lg order-3 order-lg-2">
            <div class="nav-tabs-container nav-tabs">
              <ul v-if="navList" class="nav">
                <li
                  class="nav-item desktop"
                  v-for="(navItem, index) in navList"
                  :key="index"
                >
                  <button
                    :title="navItem.title"
                    type="button"
                    class="btn nav-link"
                    @click.prevent="setActiveTab(navItem)"
                    :class="{
                      active: qruleActiveTabGetter?.key == navItem.key,
                    }"
                  >
                    {{ navItem.title }}
                  </button>
                </li>

                <li
                  class="nav-item mobile tabs-more-btn d-lg-none"
                  v-if="navList?.length > 2"
                >
                  <div class="dropdown">
                    <button
                      class="btn"
                      type="button"
                      id="dropdownMenuButton"
                      data-bs-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                    >
                      <svg class="icon icon-Component-81--1">
                        <use xlink:href="#icon-Component-81--1"></use>
                      </svg>
                    </button>
                    <div
                      class="dropdown-menu"
                      aria-labelledby="dropdownMenuButton"
                    >
                      <!-- v-if="canSee(navItem.key + '_view') && index > 2" -->

                      <a
                        class="dropdown-item"
                        href="#"
                        v-for="(navItem, index) in navList"
                        :key="index"
                        @click.prevent="setActiveTab(navItem)"
                        :class="{
                          active: qruleActiveTabGetter?.key == navItem.key,
                        }"
                        v-if="index > 2"
                        >{{ navItem.title }}</a
                      >
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          
          </div>
         
        </div>
        <div class="row mx-2">
          <div class="col-12">
            <component
              v-if="mainComponentName"
              :key="renderId"
              :propText="mainComponentName"
              :is="mainComponentName"
              :slug="slug"
              :schemaItems="tabSchemaItems"
              :routeEntityid="myEntityid"
              @changeEntityid="changeEntityid"
              @set-active-tab="setActiveTab"
            ></component>
          </div>
       
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import sidbarMenuDefault from "~/json/entity/json/detailMenu.json";
import sidbarMenuMajles from "~/json/entity/json/detailMenuMajles.json";



import { mapActions, mapState } from "pinia";
import entityApi from "~/apis/entityApi";
import { useStorage } from "@vueuse/core";

export default {
  name:'qrule',
  props: {
    slug: {
      default: "qmodel",
    },
  },
  
  beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
  },
  mounted() {
    this.getSchemas();

    if (this.qruleActiveSchemaGetter?.tabs)
      this.setActiveTab(this.qruleActiveSchemaGetter?.tabs[0]);

    // if (this.qruleSchemaGetter) {
    //   let qModelRuleIndex = this.qruleSchemaGetter.findIndex(
    //     (item) => item.key == "qmodelrule"
    //   );

    //   this.setActiveTab(this.qruleSchemaGetter[qModelRuleIndex]?.tabs[0]);
    // }

    this.myEntityid =
      this.myEntityid == "" ? this.$route.params?.id : this.myEntityid;
  },

  data() {
    return {
      sidbarMenuDefault: sidbarMenuDefault,
      sidbarMenuMajles: sidbarMenuMajles,

      myEntityid: "",
      renderId: 1,
      mainComponentName: null,
      tabSchemaItems: undefined,
    };
  },
  computed: {
    ...mapState("entity", [
      "selectedItemEntityGetter",
      "qruleSchemaGetter",
      "qruleActiveSchemaGetter",
      "qruleActiveTabGetter",
      "breadCrumbGetter",
    ]),
    ...mapState(["organNameGetter"]),
    ...mapState(["isSidebarCollapsed"]),
    sidbarMenu() {
      if (isMajlesBuild()) return this.sidbarMenuMajles;
      else return this.sidbarMenuDefault;
    },
    navList() {
      if (!isMajlesBuild()) return this.qruleActiveSchemaGetter?.tabs;

      if (this.qruleActiveSchemaGetter?.tabs)
        return this.qruleActiveSchemaGetter?.tabs.slice(
          0,
          this.qruleActiveSchemaGetter.tabs.length - 1
        );
      else return [];
    },
  },
  methods: {
    ...mapActions("entity", [
      "qruleActiveSchemaSetter",
      "qruleSchemaSetter",
      "qruleActiveTabSetter",
      "breadCrumbSetter",
    ]),
    ...mapActions(["checkPermissions"]),

    changeEntityid(newEntityid) {
      this.myEntityid = newEntityid;
      // this.renderId++;
    },
    getSchemas() {
      let localStoageSchema = useStorage("qaSchema",undefined).value;

      if (localStoageSchema) {
        let schema = JSON.parse(localStoageSchema);
        this.qruleActiveSchemaSetter(schema);
        this.setActiveTab(this.qruleActiveSchemaGetter?.tabs[0]);
        return;
      }
      this.httpService
        .postRequest(entityApi.schema.list, {
          organ: this.organNameGetter,
          system: "entityView",
          build_state: buildState(),
        })
        .then((response) => {
          // console.log(response);
          const routeParamsKey = this.$route.name;
          let schemaBasedOnRouteKeyIndex = response.data.entityView.findIndex(
            (item) => item.key == routeParamsKey
          );
          schemaBasedOnRouteKeyIndex =
            schemaBasedOnRouteKeyIndex == -1 ? 0 : schemaBasedOnRouteKeyIndex;
          this.qruleSchemaSetter(response.data.entityView);
          this.qruleActiveSchemaSetter(
            response.data.entityView[schemaBasedOnRouteKeyIndex]
          );
          this.setActiveTab(this.qruleActiveSchemaGetter?.tabs[0]);
          // this.qruleActiveTabSetter(
          //   response.data.entityView[schemaBasedOnRouteKeyIndex].tabs[0]
          // );

          // this.updateMainContent();
        })
        
    },

    setActiveTab(tab) {
      this.renderId++;
      this.qruleActiveTabSetter(tab);
      this.tabSchemaItems = undefined;
      this.mainComponentName = "EntityQModelRule";
      this.tabSchemaItems = tab.items
        ? tab.items
        : this.qruleActiveSchemaGetter.items;

      if (tab.componentName) {
        this.mainComponentName = tab.componentName;
      }
      this.resetBreadcrumb();
    },
    resetBreadcrumb() {
      if (this.qruleActiveTabGetter.key == "rulelist") {
        this.breadCrumbSetter();
      } else if (this.qruleActiveTabGetter.key == "rulelogic") {
        let bread = this.breadCrumbGetter;
        bread.pop();
        this.breadCrumbSetter(bread.length ?? undefined );
      }
      // else if(this.qruleActiveTabGetter.key == 'ruletriple')
    },
  },

};
</script>

<style scoped lang="scss">
.show-reports-button {
  opacity: 0.6;
  color: #92a2b2;
}
.problem-detail {
  width: 98% !important;
  margin: 0 !important;
}

.text-title-QSection1 {
  color: #00abff !important;
  &:hover {
    // color: blue !important;
    text-decoration: underline !important;
  }
}
.text-title-nextItem {
  color: #00abff !important;
  &:hover {
    color: #0575ad !important;
  }
}
.text-title-prevItem {
  color: #00abff !important;
  &:hover {
    color: #0575ad !important;
  }
}
.text-title-QSection2 {
  color: #00abff !important;
  &:hover {
    // color: blue !important;
    text-decoration: underline !important;
  }
}
.nav-tabs-container {
  display: flex;
  justify-content: center;
}
</style>