<script setup>
import { user, webInfo } from '~/store/index'

const fixedPrefix = "https://openapi.bozedu.net/";

const userName = user?.value?.user_realname
function logout() {
  user.value = null
  window.location.href = "https://jltweb.bozedu.net/#/login?t=" + webInfo?.value?.js_code
}

function goPersonalCenter() {
  let token = user.value.token
  user.value = null
  window.location.href = `https://qqyxt.bozedu.net/transfer.html?from=jlt&js_code=${webInfo.value?.js_code}&url_to=/page/profile.html&token=${token}`;
}

let appname = localStorage.getItem('appname')

let router = useRouter()
function titleBackHome() {
  router.push('/frontpage/homePage')
}

function goBackManager() {
  router.push('/home/grzx')
}
</script>

<template>
  <header class="flex items-center justify-center py-4" style="background-color:white">
    <div class="max-w-1200px w-full flex items-center justify-between text-light-50">
      <div class="flex items-center justify-between space-x-3"
        style="color:black;font-weight:bold;font-size:25px;cursor: pointer;" @click="goPersonalCenter()">
        <img v-show="webInfo?.js_logo" :src="fixedPrefix + webInfo?.js_logo" alt="" style="width:36px;height:36px;" />
        <div>{{ webInfo?.js_title }}</div>
      </div>
      <div class="flex items-center space-x-4">
        <el-avatar :size="40" :src="user?.user_avatar.middle" />
        <el-dropdown>
          <div class="cursor-pointer text-light-50" style="color:black">
            {{ userName }}
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goPersonalCenter()">
                个人中心
              </el-dropdown-item>
              <!-- <el-dropdown-item @click="logout()">
                退出登录
              </el-dropdown-item> -->
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>

  <div style="width:100%;background-color:#f5f5fd;height:50px;display:flex;justify-content: center;margin-bottom: 0px;">
    <div style="width:1200px;height:50px;display:flex;align-items: center;padding:5px 0">
      <div style="font-size:18px;padding-right:80px;cursor: pointer;" @click="titleBackHome()">{{ appname }}</div>
      <div @click="goBackManager()" v-if="user.user_role_id && (user.user_role_id != 76 && user.user_role_id != 77)"
        style="height:100%;line-height:40px;padding:0 20px;border-radius:5px;cursor: pointer;font-size:13px">后台管理</div>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-tooltip__trigger) {
  outline: none;
}
</style>
