<script setup >
import navbar from "./navbar.vue";
import { user } from "@/store/index";
const roleName = ref("");
const schoolName = ref("桐乡市互联网学校");
const LoginFormRef = $ref();
function handleLogin() {
  console.log("handleLogin", LoginFormRef);
  LoginFormRef.open();
}
const router = useRouter();
function routerPush(path) {
  router.push(path);
}
function toPersonal() {
  console.log(user.value.user_role_id, 44444444444);
  if (user.value.user_role_id == "76") {
    routerPush("/xsd/xsd_person/wdbm");
  } else {
    routerPush("/jsd/person/wdkc");
  }
}
function toOut() {
  if (sessionStorage.getItem("userInfo")) {
    sessionStorage.removeItem("userInfo");
    router.replace({ name: "home" });
    setTimeout(() => {
      location.reload();
    }, 300);
  }
}
</script>

<template>
  <div class="jsdContent">
    <el-scrollbar view-class="h-full">
      <div class="header h-60px">
        <div class="w-1200px h-full m-auto flex justify-between">
          <div class="flex items-center space-x-4">
            <el-popover
              placement="bottom"
              v-if="user && user.user_id"
              :width="150"
              trigger="hover"
              popper-style="--el-popover-padding:0px"
            >
              <template #reference>
                <div class="cursor-pointer">
                  <img
                    class="w-40px h-40px rounded-1/2 inline-block align-middle hover:text-hex-1259A1 hover:bg-hex-1259A110"
                    :src="user.user_avatar"
                    alt=""
                  />
                  <span class="ml-10px inline-block align-middle">
                    {{ user.user_realname }}
                  </span>
                </div>
              </template>

              <div class="flex flex-col">
                <div
                  @click="toPersonal"
                  class="px-2 py-3 text-center hover:bg-hex-1259A1 hover:text-white cursor-pointer"
                >
                  个人中心
                </div>
                <div
                  v-if="user.user_role_id < 76"
                  @click="routerPush('/manage/grzx')"
                  class="px-2 py-3 text-center hover:bg-hex-1259A1 hover:text-white cursor-pointer"
                >
                  后台管理
                </div>
                <div
                  @click="toOut"
                  class="px-2 py-3 text-center hover:bg-hex-1259A1 hover:text-white cursor-pointer"
                >
                  退出
                </div>
              </div>
            </el-popover>
            <div v-else @click="handleLogin" class="cursor-pointer">请登录</div>
          </div>
          <div class="flex items-center">欢迎来到{{ schoolName }} ！</div>
        </div>
      </div>
      <div class="subHeader w-1200px m-auto my-20px flex justify-between">
        <img class="w-262px h-74px" src="/images/icon/logo.png" alt="" />
        <navbar />
      </div>

      <slot>
        <div class="w-1200px m-auto">
          <router-view />
        </div>
      </slot>

      <common-footer class="mt-20px" />
    </el-scrollbar>
  </div>
  <LoginForm ref="LoginFormRef" />
</template>

<style lang="scss" scoped>
$color: #1259a1;

.jsdContent {
  background: #f6f8fa;
}

.header {
  background: $color;
  color: #fff;
}
</style>
