<!-- src/views/fwez/_nav-btn.vue -->
<script setup>
import { useRouter } from 'vue-router'
import UserProfile from '../admin/_user-profile.vue'

// 定义接收的属性
const props = defineProps({
  themeCustomizerRef: {
    type: Object,
    default: null,
  }
})

const router = useRouter()

// 直接在子组件中处理跳转逻辑
const handleOpenZbgl = () => {
  router.push('/zbgl/zbgl')
}

const handleOpenThemeCustomizer = () => {
  if (props.themeCustomizerRef?.openDrawer) {
    props.themeCustomizerRef.openDrawer()
  }
}

const currentLayout = ref(localStorage.getItem('layout') || 'horizontal')

// 定义触发的事件（保留toggleMobileDrawer事件，因为状态在父组件中）
const emit = defineEmits(['toggleMobileDrawer'])

const toggleMobileDrawer = () => {
  emit('toggleMobileDrawer')
}
</script>

<template>
  <div class="d-flex align-center toolbar-actions">
    <!-- 后台管理按钮 -->
    <!-- <v-btn color="primary" @click="handleOpenZbgl" icon variant="text" size="default">
      <v-icon icon="mdi-account-cog" size="22" />
    </v-btn> -->

    <!-- 通知 -->
    <v-btn color="primary" icon variant="text" size="small">
      <v-badge dot color="error" offset-x="2" offset-y="2">
        <v-icon icon="mdi-bell-outline" size="22" />
      </v-badge>
    </v-btn>

    <!-- 设置按钮 -->
    <v-btn color="primary" icon variant="text" size="small" @click="handleOpenThemeCustomizer">
      <v-icon icon="mdi-palette" size="22" />
    </v-btn>

    <!-- 用户头像 -->
    <UserProfile />

    <!-- 移动端菜单按钮 -->
    <v-btn v-if="currentLayout == 'horizontal'" icon variant="text" class="d-lg-none 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);
    }
  }

  .business-type-select {
    margin-right: -12px;

    :deep(.v-field) {
      border-radius: 50px;
      height: 32px;
      min-height: 32px;
    }

    :deep(.v-field__outline) {
      color: rgb(var(--v-theme-primary));
    }

    :deep(.v-field__input) {
      min-height: 32px;
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 24px;
      padding-right: 12px;
      color: rgb(var(--v-theme-primary));
    }

    :deep(.v-field__append-inner) {
      display: none;
    }
  }
}
</style>