<template>
  <el-header class="main-header" height="50px">
    <div class="header-container">
      <div class="collapsed-button">
        <el-icon v-if="collapsed" @click="collapseChange" :size="20" color="grey">
          <expand />
        </el-icon>
        <el-icon v-else @click="collapseChange" :size="20" color="#409EFC">
          <fold />
        </el-icon>
      </div>
      <div class="header-right">
        <div class="header-user-con">
          <!-- 全屏显示 -->
          <div class="btn-fullscreen" @click="handleFullScreen">
            <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
              <el-icon :size="15">
                <full-screen />
              </el-icon>
            </el-tooltip>
          </div>
          <!-- 用户头像 -->

          <!-- 用户名下拉菜单 -->
          <el-dropdown class="user-name" trigger="hover" tabindex="-1" @command="handleCommand">
            <div class="user-avator">
              <img src="../../Assets/img/newHeadPortrait.png" />
              <span class="a-dropdown-link">
                {{ user.userName }}
                <i class="a-icon-caret-bottom"></i>
              </span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </el-header>
</template>

<script setup>
import { computed, getCurrentInstance, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage as $message } from "element-plus";
import { memberService } from "@/ApiService/memberService";
import tagsCom from "@/Components/common/tagsCom.vue";
const props = defineProps({
  collapsed: {
    type: Boolean,
    required: true,
    default: false,
  },
});

const fullscreen = ref(false);

const emit = defineEmits();
const $router = useRouter();
const $common = getCurrentInstance().appContext.config.globalProperties.$common;

const user = computed(() => {
  return $common.getUser();
});

const collapseChange = () => {
  emit("update:collapsed", !props.collapsed);
};
const handleFullScreen = () => {
  let element = document.documentElement;
  if (fullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
  }
  fullscreen.value = !fullscreen.value;
};
const handleCommand = (command) => {
  if (command == "loginout") {
    memberService.logOut().then((res) => {
      if (res.code == 0) {
        $message.success("退出成功");
        setTimeout(() => {
          $router.replace("/login");
          sessionStorage.removeItem("loginInfo");
          sessionStorage.removeItem("phone");
        }, 500);

      } else {
        $message.error(res.err);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.main-header {
  width: 100%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  transition: all 0.2s ease-in-out;
}

.header-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  align-content: center;
}

.collapsed-button {
  cursor: pointer;
  line-height: 60px;
  color: #000;
  display: flex;
  align-content: center;
  align-items: center;
}

.header-right {
  float: right;
  padding-right: 0px;
  display: flex;
  align-content: center;
  align-items: center;
}

.header-user-con {
  display: flex;
  align-items: center;
}

.btn-fullscreen {
  font-size: 24px;
  color: #000;
}

.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}

.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #222d32;
}

.btn-bell .el-icon-bell {
  color: #222d32;
}

.user-avator {
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}

.user-avator img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>
