<script setup>
import avatar1 from '@/assets/img/dtx.png'
const { proxy } = getCurrentInstance();
const user = JSON.parse(proxy.$vtk.storage.get("_mis_acis_users"));

</script>

<template>
  <v-badge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
    <v-avatar class="cursor-pointer" color="primary" variant="tonal">
      <v-img :src="avatar1" />
      <v-menu activator="parent" width="230" location="bottom end" offset="14px">
        <v-list>
          <v-list-item>
            <template #prepend>
              <v-list-item-action start>
                <v-badge dot location="bottom right" offset-x="3" offset-y="3" color="success">
                  <v-avatar color="primary" variant="tonal">
                    <v-img :src="avatar1" />
                  </v-avatar>
                </v-badge>
              </v-list-item-action>
            </template>

            <v-list-item-title class="font-weight-semibold">
              {{ user.username }}
            </v-list-item-title>
            <v-list-item-subtitle>{{ user.areaName }}</v-list-item-subtitle>
          </v-list-item>

          <!-- 👉 FAQ -->
          <v-list-item link class="mt-4">
            <template #prepend>
              <v-icon icon="mdi-help-circle-outline" size="22" />
            </template>

            <v-list-item-title>说明文档</v-list-item-title>
          </v-list-item>

          <!-- Divider -->
          <v-divider class="my-2" />

          <!-- 👉 Logout -->
          <v-list-item to="/login">
            <template #prepend>
              <v-icon icon="mdi-logout" size="22" />
            </template>
            <v-list-item-title>退出登录</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- !SECTION -->
    </v-avatar>
  </v-badge>
</template>