<template>
  <div>
    <section class="search-section section desktop">
      <div class="top-content">
        <header>
          <majles-navbar></majles-navbar>
        </header>
        <div class="inner-wrapper d-flex flex-column col-12">
          <div class="">
            <img
              src="assets/majles/img/logo_200x200.png"
              :alt="appLongTitle()"
              class="center-logo mx-auto"
              style="max-width: 100px"
            />
          </div>
          <h2 class="title">{{ title1 }}</h2>
          <h1 class="sub-title">
            {{ title2 }}<span style="font-size: 1.5rem">{{ title3 }}</span>
          </h1>
          <div class=" d-flex justify-content-center">
            <form
              class="ms-search-form px-3 col-12 col-sm-8 col-xl-6"
              role="search"
              @submit.prevent="searchNavigateList"
            >
              <auto-complation
                dir="ltr"
                contentKey="qasection"
                :showAppend="false"
                :showPrepend="true"
                :showAppendSearchButton="false"
                @onSearchStart="searchNavigateList"
                @on-search-navigate-list="searchNavigateList"
                :placeholder="'جستجو در هزاران محتوای قوانین'"
                ref="autoComplationRef"
              ></auto-complation>
              <!-- :listAutocomplate="listAutocomplate" -->
              <!-- @selectAutocomplate2="selectAutocomplate2" -->
              <!-- </div> -->
            </form>
          </div>
        </div>
      </div>
      <div class="center-content">
        <my-counter-list></my-counter-list>
      </div>
      <div class="footer-content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-6 mb-2 mb-sm-0 col-md mb-sm-2 mb-md-0">
              <div class="link-item-container">
                <NuxtLink
                  :to="urlResolver('qq309202')"
                  target="_blank"
                  class="btn link-item"
                >
                  <div>
                    <img
                      src="assets/majles/img/icon-1.svg"
                      alt="مجلس شورای اسلامی"
                    />
                  </div>
                  <div class="title">
                    قانون بـرنـامـه پنجساله هـفتـم پیشرفت جمهوری اسلامی ایران
                  </div>
                  <div class="more-text-container">
                    <span class="more-text"> مشاهده بیشتر </span>
                  </div>
                </NuxtLink>
              </div>
            </div>
            <div class="col-sm-6 mb-2 mb-sm-0 col-md mb-sm-2 mb-md-0">
              <div class="link-item-container">
                <NuxtLink
                  :to="urlResolver('qq308235')"
                  target="_blank"
                  class="btn link-item"
                >
                  <div>
                    <img
                      src="assets/majles/img/icon-2.svg"
                      alt="مجلس شورای اسلامی"
                    />
                  </div>
                  <div class="title">قانون بودجه سال 1403 کل کشور</div>
                  <div class="more-text-container">
                    <span class="more-text"> مشاهده بیشتر </span>
                  </div>
                </NuxtLink>
              </div>
            </div>
            <div class="col-sm-6 mb-2 mb-sm-0 col-md">
              <div class="link-item-container">
                <NuxtLink
                  :to="urlResolver('qq38162')"
                  target="_blank"
                  class="btn link-item"
                >
                  <div>
                    <img
                      src="assets/majles/img/icon-3.svg"
                      alt="مجلس شورای اسلامی"
                    />
                  </div>
                  <div class="title">قانون اساسی جمهوری اسلامی ایران</div>
                  <div class="more-text-container">
                    <span class="more-text"> مشاهده بیشتر </span>
                  </div>
                </NuxtLink>
              </div>
            </div>
            <div class="col-sm-6 mb-2 mb-sm-0 col-md">
              <div class="link-item-container">
                <NuxtLink
                  :to="urlResolver('qq233930')"
                  target="_blank"
                  class="btn link-item"
                >
                  <div>
                    <img
                      src="assets/majles/img/icon-4.svg"
                      alt="مجلس شورای اسلامی"
                    />
                  </div>
                  <div class="title">آئین نامه داخلی مجلس شورای اسلامی</div>
                  <div class="more-text-container">
                    <span class="more-text"> مشاهده بیشتر </span>
                  </div>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// import HttpService from "~/services/httpService";
import searchApi from "~/apis/searchApi";
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { useStorage } from "@vueuse/core";
import { clearBodyClass } from "@manuals/utilities";
import { useRouter } from "vue-router";

export default {
  beforeMount() {
    clearBodyClass();
  },
  mounted() {
    this.setBodyClass("majles-user-panel");
    let localStoageSearchSchema = useStorage("searchSchema", undefined).value;
    if (localStoageSearchSchema) {
      let searchSchema = JSON.parse(localStoageSearchSchema);
      this.schemasSetter(searchSchema);
      this.searchType = this.schemasGetter[0];
    } else this.getSchemas();
  },
  destroyed() {
    clearBodyClass();
  },
  data() {
    return {
      searchText: "",
      searchType: "",
      statusPag: 0,
      nomber: 0,
      statusPagHedear: 1,
      httpService: undefined,
      filterNavigate: [],
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "getRefreshForm",
      "organNameGetter",
      "activeSchemaGetter",
      "schemasGetter",
      "isSidebarCollapsed",
    ]),
    navTitle() {
      return import.meta.env.VITE_TITLE;
    },
    title1() {
      return import.meta.env.VITE_MAJLES_DASBOARD_TITLE1;
    },
    title2() {
      return import.meta.env.VITE_MAJLES_DASBOARD_TITLE2;
    },
    title3() {
      return import.meta.env.VITE_MAJLES_DASBOARD_TITLE3;
    },
    title4() {
      return import.meta.env.VITE_MAJLES_DASBOARD_TITLE4;
    },
    title5() {
      return import.meta.env.VITE_MAJLES_DASBOARD_TITLE5;
    },
  },

  methods: {
    ...mapActions(useCommonStore, [
      "schemasSetter",
      "SELECTED_LISTS",
      "setBodyClass",
    ]),
    async getSchemas() {
      try {
        const { $api } = useNuxtApp();
        const response = await $api(searchApi.schema.list, {
          baseURL: import.meta.env.VITE_REPO_BASE_URL,
          method: "POST",
          body: {
            organ: this.organNameGetter,
            system: "search",
            build_state: buildState(),
          },
        });
        this.schemasSetter(response.data.search);
        this.searchType = this.schemasGetter[0];
      } catch (err) {}
    },

    searchNavigateList() {
      // if (this.searchText == undefined || this.searchText == "") return;

      let key = this.searchType.key;

      navigateTo({
        path: "/search",
        query: {
          q: this.searchText ?? undefined,
          key: key,
        },
      });
    },
    setSelectedNavItem(navItem) {
      this.searchType = navItem;
    },

    urlResolver(_id) {
      const router = `search/qasection/${_id}/show`;

      return router;
      // const routeData = this.$router.resolve({
      //   path: "navigation",
      //   params: {
      //     id: _id,
      //     key: "qasection",
      //   },
      //   query: {},
      // });
      // return routeData.href;
    },
  },
  components: {
    MyCounterList: defineAsyncComponent(() =>
      import("@components/other/MyCounterList.vue")
    ),
    AutoComplation: defineAsyncComponent(() =>
      import("@search/components/global/AutoComplation.vue")
    ),

    // Navbar: () => import("@dashboard/majles/components/Navbar"),
    // MySystem: () => import("@dashboard/default/pages/MySystem"),
    // MyCircleProgress: () => import("@components/MyCircleProgress"),
  },
};
</script>

<style lang="scss">
@import "../../../assets/majles/scss/majles";
.custom-class {
  .dropdown-toggle {
    color: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>

<style lang="scss" scoped>
// .main-page__content{
//   margin-right: 0px !important;
// }
.ms-search-form {
  .input-group {
    align-items: center;
  }
}
.subtitle {
  font-size: 1.2rem;
}
.dropdown-menu {
  float: right;
  min-width: 13rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 0.1em;
  text-align: right;
  min-width: 15em;
}
@media (max-width: 1199px) {
  .main-page__content {
    margin-right: 4.3em !important;
  }
  .responsive_margin {
    margin-right: 0 !important;
  }
}
@media (max-width: 575.98px) {
  .responsive_margin {
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .main-page__content {
    margin-right: 0 !important;
  }
}
</style>