<template>

  <el-row style=" background-color: var(--admin-color); height: 50px">

    <!--logo-->
    <el-col :span="5" style="height: 100%">
      <img src="@/image/seecoderLogo_wide.png" alt="logo" style="height: 46px; margin-left: 20px">
    </el-col>

    <!--系统名称-->
    <el-col :span="3">
      <div style=" text-align: center; height: 50px">
        <span style="height: 50px; line-height: 50px; display: inline-block; font-size: 24px; color: white">EAI后台管理系统</span>
      </div>
    </el-col>

    <!--头像和名字-->
    <el-col :offset="14" :span="2">
      <el-dropdown style="cursor: pointer">
        <div style="padding-right: 20px; display: flex; align-items: center">
          <img style="width: 40px; height: 40px; border-radius: 50%;" :src="store.user.userAvatar" alt="">
          <span style="margin-left: 5px; color: white">{{ store.user.name }}</span><el-icon color="#fff"><arrow-down /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/manager/person')">个人资料</el-dropdown-item>
            <el-dropdown-item @click="router.push('/manager/password')">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>

  </el-row>

</template>

<script lang="ts" setup>
  import router from "../../router";
  import {useStore} from "@/store";
  import {ArrowDown} from "@element-plus/icons-vue";

  const store = useStore()

  const logout = () => {
    alert("TODO:logout")
  }

</script>

<script lang="ts">
export default {
  name: "AdminHeader"
}
</script>