<template>
  <div class="flex items-center main-layout-header" :class="{ 'in-layout': inLayout }">
    <div class="pointer c-icon collapse-icon" @click="mainLayoutStore.toggleCollapse()">
      <el-icon>
        <expand v-if="mainLayoutStore.collapse" />
        <fold v-else />
      </el-icon>
    </div>
    <div class="flex-1 flex items-center header-info-view">
      <div>当前考试: {{ mainStore?.myUserInfo?.examName }}</div>
      <div class="data-item m-l-auto">
        <current-time class="m-r-base"></current-time>
      </div>
      <div class="data-item flex">
        <user-info :in-layout="inLayout"></user-info>
      </div>
      <div class="data-item flex">
        <div class="icon-item">
          <lock-entry :in-layout="inLayout"></lock-entry>
        </div>
        <div v-if="mainStore?.myUserInfo?.role !== 'ADMIN' && showMessageComponent" class="icon-item">
          <message
            :reply-user-id="props.replyUserId"
            :message-visible="props.messageVisible"
            :in-layout="inLayout"
          ></message>
        </div>
        <!-- <div class="icon-item"> -->
        <!-- </div> -->
        <div class="icon-item pointer close-icon" @click="logout()">
          <!-- <el-icon><close /></el-icon> -->
          <el-tooltip effect="light" placement="bottom" content="退出登录">
            <div class="close-box">
              <img src="../../assets/images/logout.png" />
              <p class="tip">退出</p>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="MainLayoutHeader">
import { ElIcon } from 'element-plus'
import { Fold, Expand, Close } from '@element-plus/icons-vue'
import { logout } from '@/utils/shared'
import useMainLayoutStore from '@/store/layout'
import useMainStore from '@/store/main'
import CurrentTime from '@/components/shared/CurrentTime.vue'
import Message from '@/components/shared/message/Message.vue'
import UserInfo from '@/components/shared/UserInfo.vue'
import LockEntry from '@/components/common/LockEntry.vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const props = defineProps<{
  replyUserId?: number | null
  messageVisible?: boolean
  inLayout?: boolean
}>()

const mainLayoutStore = useMainLayoutStore()

const mainStore = useMainStore()
const showMessageComponent = computed(() => {
  return !mainLayoutStore.markerHeaderLoaded
})
</script>

<style scoped lang="scss">
.main-layout-header {
  height: $MainLayoutHeaderHeight;
  background-color: $MainLayoutHeaderBg;
  padding: 0 $BaseGapSpace 0 $ExtraSmallGapSpace;
  border-bottom: $OnePixelLine;
  :deep(p.tip) {
    color: #8a8a8a;
  }
  &.in-layout {
    :deep(p.tip) {
      color: #666;
    }
  }
  &.in-layout {
    background-color: #fff;
    :deep(.user-info) {
      color: #666 !important;
    }
  }
  .collapse-icon {
    padding: $ExtraSmallGapSpace;
    position: relative;
    bottom: -1px;
    font-size: 16px;
  }
  .header-info-view {
    color: $RegularFontColor;
    font-size: $SmallFont;
    font-weight: bold;
    height: 62px;
    .data-item {
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      padding-left: 15px;
      padding-right: 15px;
      &:not(:last-child) {
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 1px;
          height: 100%;
          background-color: #eee;
        }
      }
      &:last-child {
        padding-right: 10px;
        padding-left: 10px;
      }
      .icon-item {
        // width: 45px;
        padding: 0 10px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 10px;
      }
    }
    .close-icon {
      width: 45px;

      &:hover {
        opacity: 0.7;
      }
      .close-box {
        text-align: center;
        img {
          height: 16px;
          position: relative;
          bottom: -2px;
        }
        .tip {
          font-size: 12px;
          margin-top: 4px;
        }
      }

      // width: 32px;
      // height: 32px;
      // font-size: 1.4em;
      // border-radius: 50%;
      // place-items: center;
      // color: #666;
      // transition: all 0.3s ease-in-out;
      // &:hover {
      //   background-color: #dfdfdf;
      //   color: #444;
      // }
    }
  }
}
</style>
