<template>
  <div class="off-canvas">
    <div class="side d-none d-md-block">
      <div class="relativePos">
        <div
          class="closeBtn d-none d-md-inline-block"
          @click="closeOffCanvas">
          <div class="x"></div>
          <span>بستن</span>
        </div>
      </div>
    </div>
    <div style="overflow-y: auto; width: 100%">
      <div class="main">
        <div
          class="closeBtnMobile d-block d-md-none"
          @click="closeOffCanvas">
          <div class="x"></div>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-12 col-lg-4 order-0 order-lg-1 mb-5 mb-lg-0">
              <div class="searchBox">
                <div class="title">
                  <p class="title-search">
                    <i class="fal fa-search"></i>
                    <span>جست و جو</span>
                  </p>
                  <form @submit.prevent="doSearch">
                    <input
                      type="text"
                      name="search"
                      v-model="searchableText"
                      placeholder="عبارت مدنظر خود را بنویسید" />
                    <button type="submit">
                      <i class="fal fa-search"></i>
                    </button>
                  </form>
                </div>
              </div>
              <template v-if="yearBanner.electionBtn">
                <el-divider />
                <nuxt-link
                  :to="{
                    name: 'portal',
                    params: {
                      portal:
                        currentPortal === 'ostandari'
                          ? 'election'
                          : 'ostandari',
                    },
                  }"
                  v-slot="{ navigate, href }"
                  custom>
                  <div class="mt-3" @click="navigate">
                    <a
                      class="btn bigBtn btn-primary"
                      :href="href">
                      {{
                        currentPortal === "ostandari"
                          ? "برو به صفحه ستاد انتخابات"
                          : "برو به صفحه استانداری"
                      }}
                    </a>
                  </div>
                </nuxt-link>
              </template>
            </div>
            <div class="col-12 col-lg-8 order-1 order-lg-0">
              <nav>
                <ul class="row item1">
                  <nuxt-link
                    class="col-12 col-md-4 mb-3"
                    :to="{
                      name: 'portal',
                      params: { portal: currentPortal },
                    }"
                    v-slot="{ href, navigate, isActive }"
                    custom>
                    <li
                      @click="navigate"
                      :class="isActive ? 'active' : null">
                      <a class="mainLink" :href="href"
                        >صفحه اصلی</a
                      >
                    </li>
                  </nuxt-link>

                  <nuxt-link
                    class="col-12 col-md-4 mb-3"
                    :to="{
                      name: 'portal-contact',
                      params: { portal: currentPortal },
                    }"
                    v-slot="{ navigate, href, isActive }"
                    custom>
                    <li
                      @click="navigate"
                      :class="isActive ? 'active' : null">
                      <a class="mainLink" :href="href"
                        >تماس با ما</a
                      >
                    </li>
                  </nuxt-link>

                  <nuxt-link
                    class="col-12 col-md-4 mb-3"
                    :to="{
                      name: 'portal-services',
                      params: { portal: currentPortal },
                    }"
                    v-slot="{ navigate, href, isActive }"
                    custom>
                    <li
                      @click="navigate"
                      :class="isActive ? 'active' : null">
                      <a class="mainLink" :href="href"
                        >میز خدمت</a
                      >
                    </li>
                  </nuxt-link>

                  <li class="pointer">
                    <p>چند رسانه ای</p>
                    <div class="mega-menu mt-2">
                      <ul class="tree">
                        <nuxt-link
                          class="col-12 col-md-4 mb-2"
                          :to="{
                            name: 'portal-gallery',
                            params: {
                              portal: currentPortal,
                            },
                            query: {
                              type: 'image',
                              page: 1,
                            },
                          }"
                          v-slot="{
                            navigate,
                            href,
                            isActive,
                          }"
                          custom>
                          <li
                            @click="navigate"
                            :class="
                              isActive ? 'active' : null
                            ">
                            <a class="mainLink" :href="href"
                              >عکس</a
                            >
                          </li>
                        </nuxt-link>

                        <nuxt-link
                          class="col-12 col-md-4 mb-2"
                          :to="{
                            name: 'portal-videos',
                            params: {
                              portal: currentPortal,
                            },
                            query: {
                              type: 'video',
                              page: 1,
                            },
                          }"
                          v-slot="{
                            navigate,
                            href,
                            isActive,
                          }"
                          custom>
                          <li
                            @click="navigate"
                            :class="
                              isActive ? 'active' : null
                            ">
                            <a class="mainLink" :href="href"
                              >فیلم</a
                            >
                          </li>
                        </nuxt-link>

                        <nuxt-link
                          class="col-12 col-md-4 mb-2"
                          :to="{
                            name: 'portal-graphics',
                            params: {
                              portal: currentPortal,
                            },
                            query: {
                              type: 'graphic',
                              page: 1,
                            },
                          }"
                          v-slot="{
                            navigate,
                            href,
                            isActive,
                          }"
                          custom>
                          <li
                            @click="navigate"
                            :class="
                              isActive ? 'active' : null
                            ">
                            <a class="mainLink" :href="href"
                              >گرافیک</a
                            >
                          </li>
                        </nuxt-link>

                        <nuxt-link
                        class="col-12 col-md-4 mb-2"
                        to="/ostandari/digital-books"
                        v-slot="{
                          navigate,
                          href,
                          isActive,
                        }"
                        custom>
                        <li
                          @click="navigate"
                          :class="
                            isActive ? 'active' : null
                          ">
                          <a class="mainLink" :href="href"
                            >کتابخانه دیجیتال</a
                          >
                        </li>
                      </nuxt-link>
                      </ul>
                    </div>
                  </li>

                  <nuxt-link
                    class="col-12 col-md-4 mb-3"
                    :to="{
                      name: 'portal-services',
                      params: { portal: currentPortal },
                    }"
                    v-slot="{ navigate, href, isActive }"
                    custom>
                    <li
                      @click="navigate"
                      :class="isActive ? 'active' : null">
                      <a class="mainLink" :href="href"
                        >میز خدمت</a
                      >
                    </li>
                  </nuxt-link>

                  <nuxt-link
                    class="col-12 col-md-4"
                    v-for="item in header.categories"
                    :key="item._id"
                    :to="{
                      name: 'portal-category-details',
                      params: {
                        portal: currentPortal,
                        details: item.title,
                      },
                      query: categoryURLQuery(item),
                    }"
                    v-slot="{ href, navigate, isActive }"
                    custom>
                    <a class="mainLink">{{ item.title }}</a>

                    <li
                      @click="navigate"
                      :class="isActive ? 'active' : null">
                      <div class="children">
                        <ul>
                          <!--                          <nuxt-link-->
                          <!--                              v-for="child in item.childs"-->
                          <!--                              :key="child._id"-->
                          <!--                              :to="{name: 'portal-category-details',params: {portal: currentPortal,details: child.title}, query: categoryURLQuery(child)}"-->
                          <!--                              v-slot="{href,navigate,isActive}"-->
                          <!--                              custom-->
                          <!--                          >-->
                          <!--                            <li @click="navigate" :class="isActive ? 'active' : null">-->
                          <!--                              <a class="subLink" :href="href">{{ child.title }}</a>-->
                          <!--                            </li>-->
                          <!--                          </nuxt-link>-->
                          <el-tree
                            :data="item.childs"
                            :props="defaultProps"
                            accordion
                            ref="tree">
                            <div
                              slot-scope="{ node, data }">
                              <nuxt-link
                                :to="{
                                  name: 'portal-category-details',
                                  params: {
                                    portal: currentPortal,
                                    details: node.label,
                                  },
                                  query:
                                    categoryURLQuery(data),
                                }"
                                v-slot="{
                                  href,
                                  navigate,
                                  isActive,
                                }"
                                custom
                                :class="
                                  !data.childs.length &&
                                  'test'
                                ">
                                <li
                                  @click="navigate"
                                  :class="
                                    isActive
                                      ? 'active'
                                      : null
                                  ">
                                  <a
                                    class="subLink"
                                    :href="href"
                                    >{{ node.label }}</a
                                  >
                                </li>
                              </nuxt-link>
                            </div>
                          </el-tree>
                        </ul>
                      </div>
                    </li>
                  </nuxt-link>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchableText: "",
      defaultProps: {
        children: "childs",
        label: "title",
      },
    };
  },
  computed: {
    header() {
      return this.$store.state.front.headerData;
    },
    offCanvas() {
      return this.$store.state.front.offCanvas;
    },
    route() {
      return this.$route.fullPath;
    },
    yearBanner() {
      return this.$store.state.front.yearBanner;
    },
    currentPortal() {
      return this.$route.params.portal;
    },
  },
  watch: {
    offCanvas(newVal, oldVal) {
      if (newVal) {
        this.$gsap
          .timeline()
          .fromTo(
            $(".off-canvas"),
            { autoAlpha: 0 },
            { autoAlpha: 1, duration: 0.2 }
          )
          .from($(".off-canvas .main .container-fluid"), {
            x: 50,
            opacity: 0,
            duration: 0.2,
          })
          .from(
            $(".off-canvas .side .closeBtn"),
            { scale: 0.7, opacity: 0, duration: 0.2 },
            "-=0.2"
          );
        this.$gsap
          .timeline()
          .from(".item1", {
            x: 50,
            opacity: 0,
            duration: 0.4,
          })
          .from(".item2", {
            x: 50,
            opacity: 0,
            duration: 0.6,
          });

        // this.$gsap.timeline()
        //     .from('.item2', {x: 50, opacity: 0, duration: .5})
      } else {
        this.$gsap
          .timeline()
          .fromTo(
            $(".off-canvas"),
            { autoAlpha: 1 },
            { autoAlpha: 0, duration: 0.3 }
          );
      }
    },
    route(newVal, oldVal) {
      this.closeOffCanvas();
    },
  },
  methods: {
    closeOffCanvas() {
      this.$store.commit("front/setOffCanvas", false);
    },
    doSearch() {
      if (this.searchableText.length) {
        this.$router.push({
          name: "portal-search",
          params: { portal: this.$route.params.portal },
          query: { sq: this.searchableText },
        });
        this.searchableText = "";
      } else
        this.$message({
          type: "warning",
          message: "ابتدا عبارت مورد نظر را بنویسید",
        });
    },
    categoryURLQuery(item) {
      const query = {
        type: item.defaultPageType,
        id: item._id,
      };
      if (item.defaultPageType === "news")
        return { ...query, page: 1 };
      if (item.defaultPageType === "gallery")
        return { ...query, galleryType: "image", page: 1 };
      else return query;
    },
  },
};
</script>
