<script setup>
  import { ref, watch } from "vue";

  import { useRoute } from "vue-router";

  const props = defineProps({
    isCollapse: Boolean,
    navlists: Array,
  });

  const $route = useRoute();

  //新的icon 
  const MenuLetterMap = {
    "销售管理":'Sale',
    "客户管理":'Clnt',
    "路演管理":'RShow',
    "出差管理":'Trip',
    "研报管理":'Rpt',
    "语义分析":'Nlp',
    "ETA表格":'Tbl',
    "ETA指标库":'Inx',
    "相关性":'Co-R',
    "ETA预测指标":'FInx',
    "ETA图库":'Gra',
    /* 151:'FData', */
    "供应分析":'Sup',
    "商品价格曲线":'Crv'
  }

  const activePath = ref('')
  function handleselect (a, b) {
      
    // 清除筛选条件
    sessionStorage.removeItem('pickListBack');
    sessionStorage.removeItem('customSearchBack');
    sessionStorage.removeItem('customListBack');
    sessionStorage.removeItem('approvalListBack');
    activePath.value = a;

    if (a == $route.path.replace(/\//g,'')) {
      window.location.reload();
    }
  }

  watch(
    () =>$route.path,
    (newval) => {
      console.log(newval);
      if($route.meta.pathFrom) {
        activePath.value = $route.meta.pathFrom;
      }else {
        activePath.value = newval.replace('/','');
      }
      // // 用印审批页面 头部需要加上公告
      // if(newval === '/sealApprovalList'){
      //   this.isShowApprovalNotice = true
      //   console.log(this.isShowApprovalNotice);
      // }else{
      //   this.isShowApprovalNotice = false
      //   console.log(this.isShowApprovalNotice);
      // }
      // this.sysUserName =  localStorage.getItem('userName') || '';
      // this.Role = localStorage.getItem('Role') || '';
      // this.RoleType = localStorage.getItem('RoleType') || '';
    }
  )


</script>
<template>
  <el-aside :width="props.isCollapse ? '70px' : '200px'">
    <div id="main_left">
      <div class="logo_cont">
        <!-- 正常logo尺寸 -->
        <img
          class="logo"
          v-if="!props.isCollapse"
          src="~@/assets/img/home/logo.png"
        />
        <!-- 折叠侧边栏logo尺寸 -->
        <img class="logo_coll" v-else src="~@/assets/img/home/logo_mini.png" />
      </div>
      <div class="asider-cont">
        <aside class="menu-expanded">
          <!--导航菜单-->
          <el-menu
            background-color="#323A58"
            text-color="#fff"
            :collapse-transition="false"
            active-text-color="#FDB863"
            :default-active="$route.path.replace('/', '')"
            :collapse="props.isCollapse"
            theme="light"
            unique-opened
            router
            class="el-menu-vertical-demo"
            @select="handleselect"
            ref="expandmenu"
          >
            <template v-for="(item, index) in props.navlists">
              <el-menu-item
                :path="item.level_path"
                :index="item.level_path"
                :key="item.level_path"
                :style="!props.isCollapse ? 'text-align:left' : ''"
                v-if="item.IsLevel === 1&&!item.hidden"
              >
                <a
                  :href="`/${item.level_path}`"
                  class="el-level-path"
                  :style="`color:${
                    item.level_path === activePath ? '#FDB863 ' : '#fff'
                  }`"
                  @click="(e) => e.preventDefault()"
                >
                  <img
                    :src="item.icon_path"
                    alt=""
                    style="width: 24px; height: 24px"
                  />
                  <span class="titleLetter" v-show="props.isCollapse">{{
                    props.isCollapse ? MenuLetterMap[item.name] || "" : ""
                  }}</span>
                  <span
                    v-show="!props.isCollapse"
                    style="
                      width: 96px;
                      text-align: left;
                      font-size: 15px;
                      margin-left: 14px;
                    "
                    >{{ item.name }}</span
                  >
                </a>
              </el-menu-item>

              <el-sub-menu v-if="item.IsLevel !== 1&&!item.hidden" :index="index + ''" :key="index">
                <template #title>
                  <img
                    :src="item.icon_path"
                    alt=""
                    style="width: 24px; height: 24px"
                  />
                  <span class="titleLetter" v-show="props.isCollapse">{{
                    props.isCollapse ? MenuLetterMap[item.name] || "" : ""
                  }}</span>
                  <span
                    style="
                      display: inline-block;
                      width: 96px;
                      text-align: left;
                      font-size: 15px;
                      margin-left: 14px;
                    "
                    >{{ item.name }}</span
                  >
                </template>
                <el-menu-item
                  v-for="child in item.children"
                  :index="child.path"
                  :path="child.path"
                  :key="child.path"
                  v-show="!child.hidden"
                >
                  <a
                    :href="`/${child.path}`"
                    :style="`display: block;color:${
                      child.path === activePath ? '#FDB863 ' : '#fff'
                    }`"
                    @click="(e) => e.preventDefault()"
                  >
                    {{ child.name }}
                  </a>
                </el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </aside>
      </div>
    </div>
  </el-aside>
</template>
<style scoped lang="scss">
.asider-cont {
  overflow: hidden;
  overflow-y: auto;
  height: 90%;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
}
// reset
.el-breadcrumb {
  font-size: 16px;
}
#main_left {
  // width: 200px;
  height: 100%;
  background: #323a58 !important;
  color: #000;
  border-bottom: 1px solid #eaeaea;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  .logo_cont {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    // padding: 10px 0;
    .logo {
      width: 200px;
      height: 66px;
      display: block;
      overflow: hidden;
      // margin: 0 auto;
      // margin-left: 18px;
    }
    .logo_coll {
      width: 35px;
      height: 35px;
      display: block;
      overflow: hidden;
      margin-left: 14px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
  aside {
    text-align: center;
    z-index: 10;
    margin-left: -1px;
    .el-menu {
      width: 200px;
      height: 100%;
      box-sizing: border-box;
      background: #323a58 !important;
    }
    .el-menu--collapse {
      width: 70px;
      height: 100%;
      box-sizing: border-box;
      background: #323a58 !important;
    }
    .collapsed {
      width: 59px;
      background: #344058;
      .item {
        position: relative;
      }
    }
    .menuitem {
      height: 55px;
      padding-left: 28px;
      box-sizing: border-box;
      cursor: pointer;
      color: #1f2e4d;
      font-size: 15px;
      display: flex;
      align-items: center;
      overflow: hidden;
      img {
        width: 20px;
        margin-right: 6px;
      }
    }
    // .menuitem.active {
    //   background: rgba($color: #FDB863, $alpha: 0.2);
    //   color: #FDB863;
    // }
    .el-submenu .el-menu-item {
      font-size: 15px;
      padding: 0 0 0 62px !important;
      text-align: left;
    }
    .el-menu-item.is-active {
      background: rgba($color: #fdb863, $alpha: 0.1) !important;
      color: #fdb863 !important;
    }
    .el-submenu__title {
      //padding-left: 0 !important;
      display: flex;
      align-items: center;
    }
    .el-level-path {
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
      .titleLetter {
        font: 12px "\5FAE\8F6F\96C5\9ED1";
        letter-spacing: 1px;
        left: 0;
      }
    }
    .titleLetter {
      position: absolute;
      bottom: -20px;
      width: auto;
      height: auto;
      visibility: visible;
      font-size: 12px;
    }
    .el-menu--collapse .el-submenu__title {
      padding-left: 20px !important;
    }
  }
  .subItem {
    overflow: hidden;
    .sub-item {
      height: 55px;
      padding-left: 52px;
      box-sizing: border-box;
      cursor: pointer;
      color: #1f2e4d;
      font-size: 15px;
      display: flex;
      align-items: center;
      overflow: hidden;
      &.sub_act {
        background: #dbe4fc;
      }
    }
  }
  .menu-expanded > .el-menu-vertical-demo {
    // width: 200px;
    // min-height: calc(100vh - 80px);
    color: #fff;
    padding-bottom: 20px;
    overflow: hidden;
    overflow-y: auto;
    border-right: none;
    // .el-submenu > .el-menu > .el-menu-item:hover {/* background-color: #5882EF !important;color: #fff !important; */}
    .el-submenu > .el-menu > .active {
      background: rgba($color: #fdb863, $alpha: 0.2) !important;
      color: #fdb863 !important;
    }
  }
  .el-submenu__title > i:nth-of-type(1) {
    color: #fff !important;
  }
}
</style>
