<script setup>
import { useLayoutState } from '../hooks/index'
import { useRoute, useRouter } from 'vue-router'
import NoticeWrap from './NoticeWrap.vue'

const { menuClose, menuCloseChange } = useLayoutState()

const router=useRouter()
const route=useRoute()


const breadcrumbArr=computed(()=>{
  const arr=route.matched
  let temarr=arr.map(item=>{
    return {title:item.meta.title}
  })
  if(arr[1]&&arr[1].meta.from){
    temarr.splice(1,0,{title:arr[1].meta.from,path:arr[1].meta.fromPath})
  }
  if(arr[1]){
    if(['消息推送管理','客户反馈','图片资源库'].includes(arr[1].meta.title)){
        return [{title:arr[1].meta.title}]
    }
  }
  return temarr
})
function handleClickBreadcrumb(e){
  console.log(e);
  if(e.path){
    router.push(e.path)
  }else{
    window.location.reload();
  }
  // router.push()
}


const hasUnRead=ref(false)//是否有未读

const userName=computed(()=>{
  return localStorage.getItem('userName')
})
function resetpwd() {
  router.push('/system/resetPwd')
}

function logout() {
  ElMessageBox.confirm(
    '确认退出吗?',
    '提示',
    { type: 'warning', }
  ).then(() => {
    localStorage.removeItem('token')
    localStorage.removeItem('userName')
    router.replace('/login')
  }).catch()
}
function handleCommand(command){
    const commandMap = {
        'logout':logout,
        'resetpwd':resetpwd
    }
    commandMap[command]()
}

</script>

<template>
  <div class="flex header-wrap">
    <img src="@/assets/imgs/logo.png" alt="" class="logo-img">
    <!-- 折叠按钮 -->
    <el-icon size="26px" v-if="menuClose" @click="menuCloseChange"
      ><i-ep-Expand
    /></el-icon>
    <el-icon size="26px" v-else @click="menuCloseChange"><i-ep-Fold /></el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="margin-left: 30px">
      <el-breadcrumb-item v-for="item,index in breadcrumbArr" :key="index" @click="handleClickBreadcrumb(item)">{{
        item.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content"></div>
    <!-- 通知 -->
     <!-- v-if="hasPermission('message:info')"  @show="handleReadNotice" -->
    <div class="popover">
      <el-popover placement="bottom" :width="800" trigger="click">
        <template #reference>
          <div :class="['system-notice-box',hasUnRead?'system-notice-box_red':'']">
            <svg-icon name="notification-filled" size="18px"></svg-icon>
          </div>
        </template>
        <NoticeWrap @change="e=>hasUnRead=e"/>
      </el-popover>
    </div>
    <!-- 用户信息 -->
    <el-dropdown @command="handleCommand">
        <div class="system-user-box">
            <img src="@/assets/imgs/default_user.png">
            {{ userName||'清风好物俱乐部' }}
        </div>
        <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item command="resetpwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
        </template>
    </el-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.header-wrap {
  position: fixed;
  left: 0px;
  top: 0;
  right: 0;
  height: 48px;
  z-index: 50;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  padding: 0 30px 0 0;
  align-items: center;
  color: #333;
  .logo-img{
    width: 140px;
    display: block;
    margin-left: 20px;
    margin-right: 40px;
  }
  :deep(.el-breadcrumb__item){
    .el-breadcrumb__inner{
      color: #333;
    }
  }

  .content {
    flex: 1;
  }
  .popover{
    padding-top: 5px;
    margin-right: 15px;
  }
  .system-notice-box{
    position: relative;
    &.system-notice-box_red::after{
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      background-color: #f00;
      border-radius: 6px;
      position: absolute;
      top: -2px;
      right: -2px;
    }
  }
  .system-user-box{
    display: flex;
    align-items: center;
    outline: none;
    img{
        width:28px;
        height: 28px;
        margin-right: 5px;
    }
  }
}
</style>