<script setup>
import Breadcrumb from '~/components/Breadcrumb/index.vue'
import { user } from '~/store/index'

const router = useRouter()
function handleCommand(command) {
  switch (command) {
    case 'loginOut':
      if (localStorage.getItem('userInfo')) {
        // localStorage.removeItem('userInfo')
        user.value = null
        router.replace('/login')
      }
      break
    case 'home':
      router.replace('/')
  }
}
</script>

<template>
  <div class="w-full leading-50px py-2 px-8 text-xl text-white  flex justify-between items-center">
    <Breadcrumb />

    <div class="flex items-center justify-evenly">
      <i:clarity:bell-line class="text-hex-606266 mr-6" />
      <i:clarity:bell-outline-badged v-show="false" class="text-hex-606266 mr-6" />
      <el-avatar class="mr-1" />
      <el-dropdown @command="handleCommand">
        <span class="flex items-center cursor-pointer text-center">
          <div class="min-w-16">{{ user?.user_realname }}</div>
          <i:ep:arrow-down class="ml-1" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="home">
              首页
            </el-dropdown-item>
            <el-dropdown-item command="loginOut">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<!-- <style lang="scss">
.header {
  display: flex;
  justify-content: space-between;

  .icon-message {
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 20px;
    background: url("/images/header/icon-message.png") center no-repeat;
  }
}

.shot {
  margin-top: 1px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #3EBB92;
    border: 2px solid #F1FEF6;
  }
}

.shot-name {
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #fff;
  line-height: 50px;
}
</style> -->

