<template>
  <v-app-bar app clipped class="elevation-1">
    <v-app-bar-nav-icon @click.stop="navi()" v-show="naviLocate == 'left'"></v-app-bar-nav-icon>
    <img :src="logoImg" alt="Vuetify.js" height="36" class="my-auto mr-3 pointer ml-3" />
    <v-toolbar-title
      :style="{
        'font-size': isProductionZj ? '16px' : '',
        'margin-top': isProductionZj ? '2px' : '',
        'letter-spacing': isProductionZj ? '.03125em !important' : ''
      }"
      class="font-weight-bold pointer"
      @click="router.push('/home').catch(() => {})">
      {{ appHead }}
      <p
        class="text-caption mb-0 mt-n1"
        :style="{
          'font-size': isProductionZj ? '10px!important' : '',
          'font-weight': isProductionZj ? '700' : '',
          'margin-top': isProductionZj ? '0px!important' : ''
        }">
        Integrated Disability Database Platform
      </p>
    </v-toolbar-title>
    <w-navi style="z-index: 5" />
    <v-spacer />

    <v-btn @click="goToTest">测试</v-btn>
    <v-btn icon @click.stop="survey">
      <v-icon>mdi-alert-circle-outline</v-icon>
    </v-btn>
    <v-btn icon @click.stop="full()">
      <v-icon>{{ fullscreenIcon }}</v-icon>
    </v-btn>
    <v-btn icon @click.stop="toggleTheme">
      <v-icon>mdi-theme-light-dark</v-icon>
    </v-btn>
    <v-btn icon @click.stop="sets()">
      <v-icon>mdi-palette</v-icon>
    </v-btn>

    <v-menu :close-on-content-click="false" offset-y location="bottom" :nudge-width="200">
      <template v-slot:activator="{ props }">
        <v-btn text size="large" v-bind="props">
          <v-avatar size="32" class="mr-2">
            <v-img :src="dtxImg" alt="Vuetify"></v-img>
          </v-avatar>
        </v-btn>
      </template>

      <v-card>
        <v-list>
          <v-list-item>
            <template v-slot:prepend>
              <v-avatar>
                <img :src="dtxImg" alt="John" />
              </v-avatar>
            </template>
            <v-list-item-title v-if="user">{{ user.username }}</v-list-item-title>
            <v-list-item-subtitle>登录时间：{{ new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '年').replace(/年(\d+)$/, '年$1日').replace(/(\d+)年/, '$1年').replace(/(\d+)日/, '$1月$1日') }}</v-list-item-subtitle>
          </v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-list>
          <v-list-item @click="out">
            <template v-slot:prepend>
              <v-icon>mdi-flag</v-icon>
            </template>
            <v-list-item-title>注销退出</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-card>
    </v-menu>

    <v-dialog v-model="dialog" persistent scrollable width="700">
      <v-card elevation="0" min-height="600">
        <v-card-title>
          反馈
          <v-spacer />
          <v-btn class="mx-0" icon @click="dialog = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text style="overflow: hidden">
          <iframe :src="`/flowable-web/irs-order?classifyIds=[7,39]&category=problem&source=data_hangzhou_szclxt&from=irs-workflow`" frameborder="0" width="100%" height="100%"></iframe>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-app-bar>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useTheme } from 'vuetify'
import { useSettingsStore } from '@/stores/settings'
import screenfull from "screenfull"
import storage from "@/commons/storage"
import wNavi from "./_navi-top"
import logoImg from '@/assets/logo.svg'
import dtxImg from '@/assets/img/dtx.png'

const router = useRouter()
const theme = useTheme()
const store = useSettingsStore()
const { proxy } = getCurrentInstance()

// 将环境变量在 script 中处理，然后在模板中使用
const isProductionZj = import.meta.env.VITE_APP_MODE === 'production.zj'
const appHead = import.meta.env.VITE_APP_HEAD

const fullscreenIcon = ref("mdi-fullscreen")
const user = ref(null)
const dialog = ref(false)

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

onMounted(() => {
  user.value = storage.get("user")
})

const full = () => {
  fullscreenIcon.value = screenfull.isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
  screenfull.toggle()
}

const navi = () => {
  store.setNaviActive(!store.getNaviActive)
}

const sets = async () => {
  await store.setSetsActive(!store.getSetsActive)
}

const out = () => {
  window.open("about:blank", "_self").close()
}

// 添加跳转到test.vue的方法
const goToTest = () => {
  router.push('/test')
}

const survey = () => {
  proxy.$vtk.request.postForm("/badp/admin/zwdds", { uid: user.value.useruuid }).then((res) => {
    if (res.meta.success) {
      dialog.value = true
    }
  })
}

// 使用推荐的API切换主题
const toggleTheme = () => {
  // 获取当前主题并切换
  const currentTheme = theme.name.value
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
  
  // 使用Vuetify 3推荐的方式切换主题
  theme.change(newTheme)
  
  // 同时确保导航栏颜色设置也被正确更新
  store.setNaviColors(newTheme)
}
</script>

<style lang="scss" scoped>
.v-theme--light .v-toolbar {
  background-color: white;
}
</style>