<template>
  <!-- 右侧内容上方header -->
  <div class="navbar">
    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />

    <div class="right-menu">
      <template v-if="appStore.device !== 'mobile'">
        <span class="welcome-msg">{{ `${nickname}` }}，{{ welcomeMsgStr }}！</span>

        <el-tooltip :content="$t('message.user.title1')" effect="dark" placement="bottom">
          <LangSelect id="lang-select" class="right-menu-item hover-effect" style="margin-right: 10px" />
        </el-tooltip>

        <el-tooltip :content="$t('message.user.title7')" effect="dark" placement="bottom">
          <ScreenFull id="screenfull" class="right-menu-item hover-effect" style="margin-right: 10px" />
        </el-tooltip>

        <!-- <el-tooltip :content="$t('message.user.title3')" effect="dark" placement="bottom">
                    <size-select id="size-select" class="right-menu-item hover-effect" style="margin-right: 10px" />
                </el-tooltip> -->
      </template>
      <div class="avatar-container">
        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
            <span>{{ account }}</span>
            <el-icon>
              <caret-bottom />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <router-link to="/user/profile">
                                <el-dropdown-item>个人中心</el-dropdown-item>
                            </router-link> -->
              <el-dropdown-item command="changepwd">
                <span>{{ $t('message.user.changePwd') }}</span>
              </el-dropdown-item>
              <el-dropdown-item command="setLayout">
                <span>{{ $t('message.user.title3') }}</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <span>{{ $t('message.user.dropdown5') }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <ChangePwd v-model="changePwdConfig.dialogVisiable" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ElMessageBox} from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import TopNav from '@/components/TopNav/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
import ScreenFull from '@/components/Screenfull/index.vue'
import SizeSelect from '@/components/SizeSelect/index.vue'
import LangSelect from '@/components/LangSelect/index.vue'
// import HeaderSearch from '@/components/HeaderSearch/index.vue';
// import RuoYiGit from '@/components/RuoYi/Git/index.vue';
// import RuoYiDoc from '@/components/RuoYi/Doc/index.vue';
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import Cookies from 'js-cookie'
import {welcomeMsg} from '@/utils/index.js'
import ChangePwd from '@/components/ChangePwd/index.vue'
import {setSession, getSession} from '@/utils/auth'
import {useI18n} from 'vue-i18n'

const {t} = useI18n()
const nickname = getSession('nickname')
// const userBm = getSession('user_bm')
const account = getSession('user_account')
const welcomeMsgStr = ref('')
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const {proxy} = getCurrentInstance() as any
const mitter = proxy.mitter
const route = useRoute()

function toggleSideBar() {
  appStore.toggleSideBar()
}

function handleCommand(command: any) {
  switch (command) {
    case 'changepwd':
      changePwdConfig.dialogVisiable = true
      break
    case 'setLayout':
      setLayout()
      break
    case 'logout':
      logout()
      break
    default:
      break
  }
}

function logout() {
  ElMessageBox.confirm(t('message.logout.msg'), t('message.logout.title'), {
    confirmButtonText: t('message.logout.confirmButtonText'),
    cancelButtonText: t('message.logout.cancelButtonText'),
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index'
    })
  })
  // .catch(() => {});
}

const emits = defineEmits(['setLayout'])
function setLayout() {
  emits('setLayout')
}

const changePwdConfig = reactive({
  dialogVisiable: false
})

mitter.on('onCloseChangePwd', () => {
  changePwdConfig.dialogVisiable = false
})

mitter.on('changeLang', () => {
  welcomeMsgStr.value = welcomeMsg()
  settingsStore.setTitle(t(`message.router.${route.meta.title}`))
})

onMounted(() => {
  welcomeMsgStr.value = welcomeMsg()
})
</script>

<style lang="scss" scoped>
.welcome-msg {
  margin-right: 20px;
  font-size: 14px;
}

.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  border-bottom: 1px solid #dadada;

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 10px;

      .avatar-wrapper {
        display: flex;
        align-items: center;

        span {
          font-size: 14px;
          line-height: 50px;
        }

        i {
          cursor: pointer;
          font-size: 12px;
          margin-left: 5px;
        }
      }
    }

    :deep(.svg-icon) {
      vertical-align: initial;
    }
  }
}
</style>
