<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="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" :to="item.path">
              {{ 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);
          }
        });
      }
    };
    
    // 监听路由变化，更新面包屑
    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
    };
  },
  created() {
    console.log("layout created");
  },
};
</script>

<style scoped lang="scss">
.layout-box {
  display: flex;
  height: 100vh;
  width: 100%;
  .left {
    width: 200px;
    height: 100%;
    background: linear-gradient(180deg, #018796, #014155);
  }
  .colWidth {
    width: 63px;
  }
  .right {
    min-height: 100%;
    width: calc(100% - 200px);
    .header {
      width: 100%;
      height: 4.0625rem !important;
      background: #ffffff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      box-sizing: border-box;
      position: relative;
      .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;
      }
      .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: #606266;
        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;
      }
    .content {
      width: 100%;
      height: calc(100vh - 4.0625rem);
      box-sizing: border-box;
      overflow: hidden;
      padding: 1.25rem 1.25rem 2rem;
      background: #e7eef5;
    }
  }
  .extend {
    width: calc(100% - 63px);
  }
}
</style>
