<script setup>
import { webInfo } from '~/utils/store'
// import { APP_TITLE } from '~/config/app';
const user = JSON.parse(localStorage.getItem('userInfo'));
const title = webInfo.js_title;
const logo = webInfo.js_logo ? 'https://oss.bozedu.net/' + webInfo.js_logo : undefined;

function handleCommand(command) {
  switch (command) {
    case 'logout':
      if (localStorage.getItem('userInfo')) {
        localStorage.removeItem('userInfo')
      }
      window.open('https://jltweb.bozedu.net/#/login?t=' + webInfo.js_code, '_self')
      break;
    case 'profile':
      window.open('https://qqyxt.bozedu.net/page/profile.html?&from=jlt')
      break;

  }
}
</script>

<template>
  <!-- <div class="header w-full h-full px-8 text-xl text-white tracking-wider">{{ APP_TITLE }}</div> -->
  <header class="w-full flex items-center justify-center py-4 px-8">
    <div class="w-full flex justify-between">
      <div class="flex items-center text-3xl space-x-3">
        <img v-show="logo" :src="logo" alt="" class="w-9 h-9" />
        <div class="text-2xl font-bold">{{ title }}</div>
      </div>
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="cursor-pointer">
          <img class="inline-block h-40px w-40px rounded-1/2 align-middle hover:bg-hex-1259A110 hover:text-hex-1259A1"
            :src="user?.user_avatar?.small || undefined" alt="">
          <span class="ml-10px inline-block align-middle">
            {{ user.user_realname }}
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              个人中心
            </el-dropdown-item>
            <el-dropdown-item command="logout">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<style lang="scss" scoped>
@import "~/styles/config/color.scss";

.header {
  background-color: $headerBgColor;
  line-height: 50px;
}
</style>
