<script setup>
import { ref } from 'vue'

import { ElMessage } from 'element-plus'
import logo from '@renderer/assets/logo.png'
import avatar from '@renderer/assets/avatar.png'
const isCollapse = ref(true)
// 获取父组件传递过来的数据
const showIcon = defineProps({
  isCollapse: Boolean
})

// 获取父组件自定义的事件
const emit = defineEmits(['changeAside'])

// 自定义按钮点击事件，侧边栏的收缩按钮
const collapseAside = () => {
  emit('changeAside')
}

// 登出按钮
const LogOut = () => {}
</script>


<template>
  <div>
    <el-header style="display: flex; font-size: 16px">
      <div class='header-left'>
        <el-avatar :size="40" :src="logo" />
      </div>
<!--      <div class='haeder-menu'>-->
<!--        <el-menu-->
<!--          router="true"-->
<!--        >-->
<!--          <el-menu-item index="/">系统工具</el-menu-item>-->
<!--        </el-menu>-->
<!--      </div>-->
      <div class="haeder-right">
        <div class="block" style="margin-right: 10px">
          <el-icon><QuestionFilled /></el-icon>
        </div>
        <div class="block" style="margin-right: 10px">
          <el-icon><Bell /></el-icon>
        </div>
        <el-dropdown trigger="click">
          <div class="el-dropdown-link" style="cursor: pointer">
            <el-icon :size='16' style='line-height: 30px'><User /></el-icon>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>admin</el-dropdown-item>
<!--              <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>-->
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
  </div>
</template>



<style scoped>
.el-header {
  width: 100%;
  background-color: #fff;
  color: var(--el-text-color-primary);
  box-shadow: var(--el-box-shadow);
  justify-content: space-between;
}
.header-left{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
}
.haeder-menu{
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.haeder-right{
  display: flex;
  align-items: center;
}

.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
  text-align: right;
}

.el-dropdown-menu__item {
  width: 120px;
}

.icon-color {
  color: white;
}
</style>
