<template>
  <div class="flex items-center main-layout-header">
    <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>
      <current-time class="m-l-auto m-r-base"></current-time>
      <div class="m-r-base">
        <message :reply-user-id="props.replyUserId" :message-visible="props.messageVisible"></message>
      </div>
      <div class="m-r-base">
        <user-info></user-info>
      </div>
      <div class="grid fill-light-gray pointer close-icon" @click="logout()">
        <el-icon><close /></el-icon>
      </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'

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

const mainLayoutStore = useMainLayoutStore()

const mainStore = useMainStore()
</script>

<style scoped lang="scss">
.main-layout-header {
  height: $MainLayoutHeaderHeight;
  background-color: $MainLayoutHeaderBg;
  padding: 0 $BaseGapSpace 0 $ExtraSmallGapSpace;
  border-bottom: $OnePixelLine;
  .collapse-icon {
    padding: $ExtraSmallGapSpace;
  }
  .header-info-view {
    color: $RegularFontColor;
    font-size: $SmallFont;
    .close-icon {
      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>
