<template>
  <div class="layout-box">
    <div class="left" :class="{ colWidth: sidebar }">
      <menuCom></menuCom>
    </div>
    <div class="right" :class="{ extend: sidebar }">
      <div class="header">
        <hamburger
          class="hamburger-container"
          @toggleClick="toggleSideBar"
          :is-active="sidebar"
        />
        <h3>DC-TOM管理平台</h3>
        <div class="go-tom" @click="goTom">EcoTOM 三流合一</div>
        <div class="right-block">
          <el-dropdown class="right-menu-item" trigger="click">
            <div class="user-info">
              <svg
                color="red"
                data-icon-name="user-circle"
                data-style="line"
                icon_origin_id="24289"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                id="user-circle"
                class="icon line"
                width="40"
                height="40"
              >
                <path
                  style="
                    fill: none;
                    stroke: rgb(1, 135, 150);
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-width: 1;
                  "
                  d="M12,21h0a9,9,0,0,1-9-9H3a9,9,0,0,1,9-9h0a9,9,0,0,1,9,9h0A9,9,0,0,1,12,21Zm0-6a5,5,0,0,0-5,4.5,9,9,0,0,0,9.94,0A5,5,0,0,0,12,15Zm0-8a4,4,0,1,0,4,4A4,4,0,0,0,12,7Z"
                  id="primary"
                ></path>
              </svg>
              <!-- <img
                src="data:image/png;base64, "
                class="user-avatar"
              /> -->
              <span class="user-name">{{ userName }}</span>
            </div>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="content">
        <div class="breadcrumb-container">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumbList"
              :key="index"
            >
              {{ item.meta?.title || "未命名页面" }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
import menuCom from "./menuCom.vue";
import { CaretBottom } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { watch, ref, onMounted } from "vue";
import { getToken } from "@/utils/auth";
import { useUsersStore } from "@/pinia/user.js";
import { menuStore } from "@/pinia/menu.js";
import hamburger from "@/components/Hamburger/index.vue";
import { storeToRefs } from "pinia";
export default {
  components: {
    menuCom,
    hamburger,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const breadcrumbList = ref([]);

    // 获取当前路由的面包屑数据
    const getBreadcrumbData = () => {
      breadcrumbList.value = [];

      if (route.matched && route.matched.length > 0) {
        const matchedRoutes = route.matched;

        // // 添加首页项（可选）
        // breadcrumbList.value.push({
        //   path: '/dashboard',
        //   meta: { title: '首页' }
        // });

        // 添加匹配的路由
        matchedRoutes.forEach((item) => {
          if (item.meta && item.meta.title) {
            breadcrumbList.value.push(item);
          }
        });
      }
    };

    const goTom = () => {
      router.push({ path: "/intermediate" });
    };

    // 监听路由变化，更新面包屑
    watch(
      () => route.path,
      () => {
        getBreadcrumbData();
      },
      { immediate: true }
    );

    onMounted(() => {
      getBreadcrumbData();
    });

    const userName = getToken("userName");
    const store = useUsersStore();
    const menu = menuStore();
    const { sidebar } = storeToRefs(menuStore());
    async function logout() {
      sessionStorage.setItem("permissionData", "");
      sessionStorage.setItem("branchFactoryList", []);
      sessionStorage.setItem("primaryTypeList", []);
      await store.logout();
      store.istrue = false;
      router.push({ path: "/login" });
    }
    const toggleSideBar = () => {
      menu.toggleSideBar();
    };
    return {
      breadcrumbList,
      userName,
      logout,
      sidebar,
      toggleSideBar,
      goTom,
    };
  },
  created() {},
};
</script>

<style scoped lang="scss">
.layout-box {
  display: flex;
  height: 100vh;
  width: 100%;
  .left {
    width: 200px;
    height: 100%;
    background: linear-gradient(180deg, #000000, #181d21);
    transition: all 0.3s ease;
  }
  .colWidth {
    width: 63px;
    transition: all 0.3s ease;
  }
  .right {
    min-height: 100%;
    width: calc(100% - 200px);
    .header {
      width: 100%;
      height: 4.0625rem !important;
      background: #181d21;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      box-sizing: border-box;
      position: relative;
      color: #ccc;
      .hamburger-container {
        line-height: 4.0625rem;
        height: 100%;
        float: left;
        cursor: pointer;
        transition: background 0.3s;
        -webkit-tap-highlight-color: transparent;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }

      h3 {
        font-size: 1.75rem !important;
        margin: 0;
        position: absolute;
        left: 50px;
        top: 14px;
      }
      .go-tom {
        font-size: 0.9rem;
        margin-top: -16px;
        top: 50%;
        height: 32px;
        line-height: 32px;
        padding: 0 20px;
        position: absolute;
        right: 200px;

        color: #36f1cd;
    background-color: var(--bg-secondary);
    border: 1px solid #434343;
    // color: #ffffff;
    //     background-color: var(--bg-primary);
    //     border: 1px solid var(--success);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          border: 1px solid rgba(54, 241, 205, .7);
          box-shadow: 0px 1.33px 16px 0px rgba(83, 100, 170, 0.5);
        }
      }
      .right-block {
        line-height: 50px;
        float: right;
        height: 100%;
        &:focus {
          outline: none;
        }
        .right-menu-item {
          display: inline-block;
          padding: 0 8px;
          height: 100%;
          vertical-align: text-bottom;
        }
      }
      .user-info {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-right: 3.125rem;
        font-size: 1.25rem !important;
        color: #ccc;
        height: 100%;
        .user-avatar {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 10px;
        }
        .user-name {
          font-size: 0.9rem;
          margin: 0 0.4rem;
          line-height: 1.5rem;
        }
      }
    }
    .breadcrumb-container {
      flex: 1;
      margin-bottom: 0.6rem;
      color: #ccc !important;
    }
    .content {
      width: 100%;
      height: calc(100vh - 4.0625rem);
      box-sizing: border-box;
      overflow: hidden;
      padding: 1.25rem 1.25rem 2rem;
      background: black;
    }
  }
  .extend {
    width: calc(100% - 63px);
  }

}
</style>
<style>
.el-breadcrumb__inner {
  color: #848383 !important;
  font-weight: 600;
}

.el-menu--collapse {
  width: auto !important;
}
.hamburger-icon path {
  fill: #ccc !important;
}
</style>
