<template>
  <div class="pageHeader">
    <div class="routes-case">
      <SvgIcon class="sidebar-icon" :name="storeConfigure.configure.collapse ? 'Expand' : 'Fold'" size="20" color="#555"
        @click="changeSidebar"></SvgIcon>
      <el-breadcrumb separator="/">
        <!-- <transition-group name="breadcrumb"> -->
        <el-breadcrumb-item v-for="item in storeRoutes.breadcrumb" :key="item.path">
          <span style="color: #333;">{{ item?.meta?.title || item.path
          }}</span></el-breadcrumb-item>
        <!-- </transition-group> -->
      </el-breadcrumb>
    </div>
    <div class="info-case">
      <!-- <SvgIcon class="info-icon" name="Operation" @click="operationFunction('operation')"></SvgIcon> -->
      <SvgIcon class="info-icon" name="Refresh" @click="operationFunction('refresh')"></SvgIcon>
      <el-popover :width="400">
        <template #reference>
          <div class="bell_wrap">
            <div class="dot" v-if="storeUser.notices.num">
              {{ storeUser.notices.num > 99 ? '99+' : storeUser.notices.num }}
            </div>
            <svg-icon class="bell" name="Bell" />
          </div>
        </template>
        <template #default>
          <div class="bell_container">
            <div class="header">
              <el-text size="large">通知</el-text>
            </div>
            <div class="content">
              <div class="list">
                <div class="item" :class="{ active: item.typefirst == 1 && item.typesecond }"
                  v-for="item in storeUser.notices.list" :key="item.id" @click="toDetail(item)">
                  <!-- <div class="title">
                    <el-text size="large">{{ item.title }}</el-text>
                  </div> -->
                  <div class="conetnt">
                    <el-text :type="item.isdeal == 1 ? 'info' : ''">
                      {{ `[${title1[item.typefirst]}-${title2[item.typesecond]}] ${item.conrtent}` }}
                    </el-text>
                  </div>
                  <div class="time">
                    <el-text size="small" type="info">{{ dayjs(item.createdt).format('YYYY-MM-DD') }}</el-text>
                  </div>
                </div>
              </div>
            </div>
            <div class="footer">
              <RouterLink :to="{ name: 'noticeIndex' }">
                <el-link type="primary">前往通知中心</el-link>
              </RouterLink>
            </div>
          </div>
        </template>
      </el-popover>
      <el-dropdown style="cursor: pointer" @visible-change="changeDropdownVisible">
        <div class="flex align-center" style="gap: 0 10px">
          <!-- <img class="info-avatar" :src="storeUser.userInfo.avatar" alt="" srcset="" /> -->
          <p class="info-name">{{ storeUser.userInfo.loginName }}</p>
          <SvgIcon color="#333" name="arrow-down"></SvgIcon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
            <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { dayjs } from "element-plus";
import { useConfigure } from "@/store/configure.js";
import { useUser } from "@/store/user.js";
import { useRoutes } from "@/store/routes.js";
import { useRouter } from "vue-router"

import { unread } from '@/api/home.js'

const router = useRouter()

const storeUser = useUser();
const storeRoutes = useRoutes();

import { title1, title2 } from '@/views/notice/noticeEnum.js'

// 获取配置
const storeConfigure = useConfigure();

// 侧边栏导航的收起与展开
function changeSidebar() {
  storeConfigure.change("collapse", !storeConfigure.configure.collapse);
}

// 下拉菜单
let showDropdown = ref(false);
let rotateUserIcon = ref("0deg");
function changeDropdownVisible() {
  showDropdown.value = !showDropdown.value;
  rotateUserIcon.value = showDropdown.value ? "180deg" : "0deg";
}

// info 中的按钮操作
const emits = defineEmits(["operation"]);
function operationFunction(type) {
  emits("operation", type);
}

// 跳转详细详情
function toDetail(item) {
  if (item.typefirst == 1 && item.typesecond == 1) {
    router.push({
      name: 'shop_detail',
      query: {
        id: item.userid,
        type: 'msg1'
      }
    })
    if (!item.isdeal) {
      unread({ noticecode: item.noticecode })
      storeUser.getNotices()
    }
  }
}

// 退出登录
function logOut() {
  // 清除缓存 / token 等
  _hook.useLocalStorage.clear();
  // 使用 reload 时，不需要调用 resetRoute() 重置路由
  // 且刷新页面时 pinia 数据会重置
  window.location.reload();
}
</script>

<style lang="scss" scoped>
// 面包屑的动画
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s ease;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-leave-active {
  position: absolute;
  z-index: -1;
  transition: all 0s ease;
}

.pageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  // border-bottom: 1px solid #efefef;
}

.routes-case {
  display: flex;
  align-items: center;
  justify-content: center;

  .sidebar-icon {
    margin-right: 10px;
  }
}

.info-case {
  display: flex;
  align-items: center;
  gap: 0 16px;

  .info-icon {
    cursor: pointer;
    font-size: 16px;
    color: #333;
    transition: all 0.3s;

    &:hover {
      color: var(--el-color-primary);
      transform: scale(1.2, 1.2);
    }
  }

  .bell_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;

    &:hover {
      .bell {
        color: var(--el-color-primary);
        transform: scale(1.2, 1.2);
      }
    }

    .dot {
      display: flex;
      border-radius: 20px;
      color: #fff;
      font-size: 12px;
      padding: 1px 6px;
      background-color: #DC362E;
      position: absolute;
      top: -8px;
      left: 40%;
    }

    .bell {
      color: #333;
      font-size: 16px;
      transition: all 0.3s;
    }
  }

  .info-avatar {
    border-radius: 2px;
    width: 35px;
    height: 35px;
  }

  .info-name {
    font-size: 14px;
    color: #333;
  }
}

.bell_container {
  .header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #ececec;
  }

  .content {
    max-height: 400px;
    overflow-y: auto;

    .list {
      padding: 14px 0;
    }

    .item {
      padding: 14px;
      border-radius: 8px;

      &:hover {
        cursor: pointer;
        background-color: #efefef;
      }
    }
  }

  .footer {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    border-top: 1px solid #ececec;
  }
}
</style>
