<script setup>
import { useRoute } from "vue-router";
import { ref, computed } from "vue";
import { useLight } from "#imports";
const props = defineProps(["value", "dense"]);
const light = useLight();
const isShowExpansionItem = (menu) => {
  if (menu.children && menu.children.length > 0) {
    return true;
  }
  return false;
};
const color1 = computed(() => {
  return light.getColorValue();
});
const color2 = computed(() => {
  let c = light.getColorValue();
  c = c + "b3";
  return c;
});
const group = Math.random().toString(36).substring(7);
const route = useRoute();
const path = route.path;
const hasLink = (item) => {
  if (item.children) {
    for (let i = 0; i < item.children.length; i++) {
      if (hasLink(item.children[i])) {
        return true;
      }
    }
  }
  if (item.to == path) {
    return true;
  }
  return false;
};
const hasChildLink = () => {
  return hasLink(props.value);
};
</script>

<style scoped>
.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));color:#fff}
</style>

<template>
    <q-list class="menu-list" :dense="dense">
        <template v-for="menu in value">

            <q-expansion-item :default-opened="hasLink(menu)" :label="$t(menu.label)" :icon="menu.icon" :dense="dense"
                v-if="isShowExpansionItem(menu)" :group="group">
                <l-menu class="q-pl-md" :value="menu.children" :dense="dense"></l-menu>
            </q-expansion-item>

            <template v-else>
                <q-separator v-if="menu.type == 'separator'" :spaced="menu.spaced" />
                <q-item-label header v-if="menu.type == 'header'">{{ menu.label }}</q-item-label>
                <template v-if="menu.to && (menu.to.startsWith('http://') || menu.to.startsWith('https://'))">
                    <q-item v-ripple :href="menu.to" v-if="!value.type" target="_blank">
                        <q-item-section avatar>
                            <q-icon :name="menu.icon"  />
                        </q-item-section>
                        <q-item-section>{{ $t(menu.label) }}</q-item-section>
                    </q-item>
                </template>

                <template v-else>
                    <q-item v-ripple :to="menu.to" v-if="!value.type">
                        <q-item-section avatar>
                            <q-icon :name="menu.icon"  />
                        </q-item-section>
                        <q-item-section>{{ $t(menu.label) }}</q-item-section>
                    </q-item>
                </template>

            </template>

        </template>
    </q-list>
</template>
