<!-- src/views/wit/admin/_nav-btn.vue -->
<script setup>
import { useDisplay } from 'vuetify'

const { width } = useDisplay()

const emit = defineEmits(['toggleMobileDrawer'])

// 定义接收的属性
const props = defineProps({
  themeCustomizerRef: {
    type: Object,
    default: null,
  }
})
const handleOpenThemeCustomizer = () => {
  if (props.themeCustomizerRef?.openDrawer) {
    props.themeCustomizerRef.openDrawer()
  }
}
const toggleMobileDrawer = () => {
  emit('toggleMobileDrawer')
}
</script>

<template>
  <div class="d-flex align-center toolbar-actions">

    <!-- 设置按钮 -->
    <v-tooltip location="bottom">
      <template v-slot:activator="{ props }">
        <v-btn color="white" icon variant="text" size="small" @click="handleOpenThemeCustomizer" v-bind="props">
          <v-icon icon="mdi-palette" size="22" />
        </v-btn>
      </template>
      <span>设置</span>
    </v-tooltip>
    <v-divider opacity=".99" color="white" vertical class="mr-1" style="height: 20px;margin-top: 9px;" />
    <div class="text-white">雅心互联科技有限公司</div>
    <v-divider opacity=".99" color="white" vertical class="mx-1" style="height: 20px;margin-top: 9px;" />
    <div class="text-white">董文件</div>
    <!-- 移动端菜单按钮 -->
    <v-btn v-if="width < 800" icon variant="text" class="ms-2" @click="toggleMobileDrawer">
      <v-icon icon="mdi-menu" color="primary" size="24" />
    </v-btn>
  </div>
</template>

<style lang="scss" scoped>
.toolbar-actions {
  gap: 0.25rem;


  .v-btn {
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba(var(--v-theme-on-surface), 0.08);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}
</style>
