<template>
  <div class="header-wrapper">
    <div class="left">
      <div class="logo"><img :src="LogoZh" alt="" style="height: 30px;width: 169px"></div>
      <span class="menu-icon" @click="handleToggle">
        <!-- 使用 props.collapsed -->
        <component v-if="!props.collapsed" :is="renderIcon('antd MenuFoldOutlined')"></component>
        <component v-else :is="renderIcon('antd MenuUnfoldOutlined')"></component>
      </span>
    </div>
    <div class="user">
      <span>
        <component :is="renderIcon('element User')"></component>
      </span>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import { renderIcon } from '@/utils/webutils.js'
import Logo from '@/assets/images/logo.png'
import LogoZh from '@/assets/images/logo_zh.png'
// 接收 props
const props = defineProps({
  isMobile: Boolean,
  collapsed: Boolean // 这个是父组件传进来的菜单状态
})
const emit = defineEmits(['toggle-collapse'])
function handleToggle() {
  emit('toggle-collapse')
}
</script>
<style lang="less">
.header-wrapper {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  .left{
    flex:1;
    display: flex;
    flex-direction: row;
    .logo {
      display: flex;
      align-items: center;
      margin: 0 20px 0 10px;
    }
    .menu-icon{
      display: inline-flex;
      padding:10px;
      cursor: pointer;
      .el-icon{
        font-size: 20px;
        color:#fff;
      }
    }
  }
  .user {
    display: flex;
    flex-direction: row;
    align-items: center;

    & > span {
      display: inline-flex;
      padding: 5px;
      background: #f4c521;
      border-radius: 15px;
      color: #fff;
    }
  }
}
</style>
