<template>
  <div class="ml-4" v-show="naviLocate == 'top'">
    <template v-for="list in navis" :key="list.title">
      <v-menu v-if="list.items.length" offset-y location="bottom">
        <template v-slot:activator="{ props }">
          <v-btn text size="large" v-bind="props">
            <v-avatar size="32" class="mr-1">
              <v-icon :color="list.color">{{ list.icon }}</v-icon>
            </v-avatar>
            {{ list.title }}
          </v-btn>
        </template>
        <v-card>
          <v-list v-if="list.note">
            <v-list-item>
              <v-list-item-subtitle>
                <v-icon class="mr-2 nav_icon">mdi-television-clean</v-icon>
                <div class="d-inline-block" style="width: 120px">{{ list.note }}</div>
              </v-list-item-subtitle>
            </v-list-item>
          </v-list>
          <v-list>
            <v-list-item
              v-for="item in list.items"
              :key="item.title"
              @click="toNav(item.path)"
              :class="item.border && 'nav_item_border'">
              <template v-slot:prepend>
                <v-icon class="mr-3">{{ item.icon }}</v-icon>
              </template>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-card>
      </v-menu>
      <v-btn v-else :key="list.path" text size="large" :to="list.path">
        <v-avatar size="32" class="mr-1">
          <v-icon :color="list.color">{{ list.icon }}</v-icon>
        </v-avatar>
        {{ list.title }}
      </v-btn>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useSettingsStore } from '@/stores/settings'
import Message from "@/components/message"

const router = useRouter()
const store = useSettingsStore()

const naviLocate = computed(() => store.getNaviLocate)

const navis = [
  // {
  //   title: "首页",
  //   path: "/home",
  //   icon: "mdi-monitor-dashboard",
  //   color: "blue",
  //   group: "/dash",
  //   items: [],
  // },
]

const toNav = (link) => {
  if (link) {
    router.push(link)
  } else {
    Message.toast("应用开发中...", { color: "error" })
  }
}
</script>

<style lang="scss" scoped>
.nav_icon {
  font-size: 36px !important;
  vertical-align: baseline !important;
}
.nav_item_border {
  border-bottom: 1px #ddd solid;
}
</style>
