<template>
  <q-expansion-item
    v-model="expanded"
    class="q-item-padding"
    :class="{
      active: isPartOfSelectedPath,
      'has-no-clickable-children': !route.hasClickableChildren,
      plusminus: (depth > 0),
      [`depth-${depth || 0}`]: true,
    }"
    :style="{ '--expansion-item-indent': `${depth * 8}px` }"
    ref="expansionItem"
    @click="onClick"
  >
    <template v-slot:header>
      <q-item-section avatar>
        <q-icon :name="icon">
          <q-badge
            v-if="count && depth === 0"
            class="menu-icon-badge vertical-middle"
            :floating="true"           
            rounded
          />
        </q-icon>
      </q-item-section>
      <q-item-section
        class="overflow-hidden menu-item-label"
        :style="{ 'padding-right': rightPaddingDependingOnCountSize }"
      >
        {{ $t(route.meta.label) }}
      </q-item-section>
      <q-item-section v-if="count && !expanded && depth > 0"
        class="badge-section"
        side
      >
        <q-badge
          class="menu-label-badge badge-highlight"
          rounded
          :label="count"
        />        
      </q-item-section>
    </template>
    <template v-for="subRoute in subItems">
      <m-expansion-item v-if="hasSubMenuItems(subRoute)"
        :route="subRoute"
        :drawerOpen="drawerOpen"
        :depth="depth + 1"
      />
      <m-item v-else
        :route="subRoute"
        :depth="depth + 1"
        :drawerOpen="drawerOpen"
      />
    </template>
  </q-expansion-item>
</template>

<style lang="scss" scoped>

.menu-item-label {
  overflow: hidden;
  margin: 0;
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px !important;
  color: rgba(2, 12, 18, 0.7);
  letter-spacing: initial;
}

.menu-icon-badge {
  height: 8px;
  border-radius: 6px;
  right: 4px;
  top: 2px;
}

.badge-section {
  position: absolute;
  right: 7px;
  top: calc(50% - 8px);
}

.badge-highlight {
  color: #014874;
  background: #c8e5f4;
}

.menu-label-badge {
  border-radius: 2px;
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plusminus::v-deep {
  .q-expansion-item__container > .q-item > .q-item__section--avatar {
    padding-left: var(--expansion-item-indent);
  }  
  > .q-expansion-item__container {
    // Подсветка всех разделов внутри раскрывающегося меню
    //background: rgba(1, 72, 116, 0.075);
    //background: rgba(20, 145, 207, 0.075);
    > .q-item {
      div.q-item__section--side:last-of-type {
        display: none;
      }
    }
  }

  &.q-expansion-item--collapsed {
    > .q-expansion-item__container > .q-item > div.q-item__section--side.q-item__section--avatar > i {
      &::before {
        // pgs-plus
        content: "\e962";
        transform: rotate(0deg);
        transition: .3s ease-in-out;
      }
    }
  }
  &.q-expansion-item--expanded {
    > .q-expansion-item__container > .q-item > div.q-item__section--side.q-item__section--avatar > i {
      &::before {
        // pgs-minus
        content: "\e952";
        transform: rotate(-180deg);
        transition: .3s ease-in-out;
      }
    }
  }
}

::v-deep {
  i {
    width: 34px;
  }

  .q-item__section {
    //overflow: hidden;
    &.q-item__section--avatar {
      min-width: initial;
    }
  }
}

.active::v-deep {
  > .q-expansion-item__container > .q-item {
    > .q-item__section--avatar,
    > .q-item__section--main {
      color: #1491cf;
    }
  }
}

.has-no-clickable-children {
  color: rgba(2, 12, 18, 0.3);
  &::v-deep > .q-expansion-item__container > .q-item > .q-item__section--main > .q-item__label {
    color: rgba(2, 12, 18, 0.45);
  }
}

</style>

<script>
import { mapGetters } from 'vuex';
import mItem from '@components/m-drawer-item.vue';

function countDigits(num) {
  return Math.floor(Math.log10(num)) + 1;
}

export default {
  name: 'MExpansionItem',
  components: {
    mItem,
  },
  props: {
    route: Object,
    drawerOpen: Boolean,
    depth: {
      type: Number,
      default: 0,
    },
  },
  data: function() {
    return {
      expanded: this.isPartOfSelectedPath,
      subItems: [],
    }
  },
  created() {
    this.subItems = this.route.children;
  },
  computed: {
    ...mapGetters('microws', ['selectedPath']),
    icon() {
      if (this.depth > 0) {
        return "pgs-plus";
      }
      return this.route.meta?.icon;
    },
    count() {
      return this.route.accumulatedStoreCountGetters.reduce((acc, nextGetter) => acc + (this.$store.getters[nextGetter] || 0), 0);
    },
    rightPaddingDependingOnCountSize() {
      return `${((this.count) ? 14 : 0) + countDigits(this.count || 0)*6}px`;
    },  
    currentUser() {
      return this.$store.getters['oidcClient/currentUser'];
    },
    isPartOfSelectedPath() {
      return this.selectedPath.startsWith(this.route.fullPath);
    },
  },
  methods: {
    onClick() {
      if (!this.drawerOpen) {
        this.$emit('openDrawer');
        return false;
      }
    },
    hasSubMenuItems(route) {
      return !!route.children?.length;
    },
  },
  watch: {
    "drawerOpen": function (newValue) {
      if (newValue) {
        if (this.depth === 1) {
          this.expanded = this.isPartOfSelectedPath;
        }        
      } else {
        this.$refs["expansionItem"].hide();
      }
    },
  }
}
</script>
