<template>
  <el-scrollbar
    class="side-bar-container"
    :class="{ 'is-collapse': collapse }"
    :style="{ background: variables[`${style}-menu-background`] }"
  >
    <ht-logo />
    <el-menu
      :background-color="variables[`${style}-menu-background`]"
      :text-color="variables[`${style}-menu-color`]"
      :active-text-color="themeColor"
      :default-active="activeMenu"
      :collapse="collapse"
      :collapse-transition="false"
      :default-openeds="defaultOpens"
      :unique-opened="uniqueOpened"
      :class="`${style}-menu`"
      mode="vertical"
    >
      <!-- <template v-if="$store.state.settings.showAllRoutes"> -->
      <template v-for="route in newRoutesChange">
        <ht-side-bar-item
          :key="route.id"
          :full-path="route.path"
          :item="route"
        />
      </template>
      <!-- </template>
      <template v-else>
        <template v-for="route in perList">
          <ht-side-bar-item
            :key="route.id"
            :full-path="route.path"
            :item="route"
          />
        </template>
      </template> -->
    </el-menu>
  </el-scrollbar>
</template>
<script>
  import variables from '@/styles/variables.scss'
  import { mapGetters } from 'vuex'
  import { defaultOopeneds, uniqueOpened } from '@/config'
  import setMenuMark from '@/mixins/setMenuMark'

  export default {
    name: 'HtSideBar',
    mixins: [setMenuMark],
    data() {
      return {
        uniqueOpened,

        defFirMun: ['//appCenter', '/appCenter', '//personal', '/personal'],
      }
    },

    computed: {
      ...mapGetters({
        collapse: 'settings/collapse',
        style: 'settings/style',
        routes: 'routes/routes',
        themeColor: 'settings/themeColor',
      }),
      newRoutesChange() {
        return _.cloneDeep(
          this.newRoutes?.filter((item) => {
            return !this.defFirMun.includes(item.path)
          })
        )
      },
      defaultOpens() {
        if (this.collapse) {
        }
        return defaultOopeneds
      },
      activeMenu() {
        const route = this.$route
        const { meta, path } = route
        if (meta.activeMenu) {
          return meta.activeMenu
        }
        return path
      },
      variables() {
        return variables
      },
    },
  }
</script>
<style lang="scss" scoped>
  @mixin dot-border-color {
    border-color: var(--themeColor);
  }
  .side-bar-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: $base-z-index;
    width: $base-left-menu-width;
    height: 100vh;
    overflow: hidden;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    transition: width $base-transition-time;

    &.is-collapse {
      width: $base-left-menu-width-min;
      border-right: 0;

      ::v-deep {
        .el-menu {
          transition: width $base-transition-time;
        }

        .el-menu--collapse {
          border-right: 0;
          .el-menu-item,
          .el-submenu__title {
            padding-left: $base-menu-fold-icon-padding-left !important;
            text-overflow: unset;
          }
          .el-submenu__icon-arrow {
            right: 10px;
            margin-top: -3px;
          }
        }
      }
    }

    ::v-deep {
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }

      .el-menu {
        border: 0;

        .ht-fa-icon {
          padding-right: 3px;
          font-size: $base-font-size-bigger;
          color: $base-menu-color;
        }
        .second-menu.is-active.is-opened {
          .el-submenu__title {
            color: var(--themeColor) !important;
          }
          .three-menu {
            .sub-menu-title {
              color: var(--menuColor) !important;
            }
          }
        }
        .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
          transform: rotateZ(0deg);
          color: var(--themeColor);
        }
        .el-submenu {
          .is-active {
            .sub-menu-child__title {
              &::before {
                background: $base-color-white;
                @include dot-border-color;
              }
            }
          }
          .el-menu-item {
            height: $base-menu-item-height;
            line-height: unset;
            display: flex;
            align-items: center;
            &:hover {
              .sub-menu-child__title {
                // &::before {
                //   @include dot-border-color;
                // }
              }
            }
          }
          .sub-menu-child__title {
            padding-left: 36px;
            overflow: hidden;
            text-overflow: ellipsis;
            // &::before {
            //   border-color: $base-color-second-color;
            // }
          }
        }
        .el-submenu.is-active {
          .ht-fa-icon {
            color: var(--themeColor);
          }
        }
        .el-submenu {
          .el-submenu {
            .el-submenu__title {
              .ht-fa-icon {
                display: none;
              }
            }
            .sub-menu-child__title {
              padding-left: 48px;
            }
          }
        }
        .first-menu {
          .second-menu {
            .menu-title,
            .sub-menu-title {
              font-size: 14px;
              padding-left: 36px;
            }
            .three-menu {
              .menu-title,
              .sub-menu-title {
                font-size: 14px;
                padding-left: 46px;
                width: 100%;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                box-sizing: border-box;
              }
            }
          }
        }
      }

      .el-menu-item,
      .el-submenu__title {
        height: $base-menu-height;
        width: 100%;
        overflow: hidden;
        line-height: unset;
        display: flex;
        align-items: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        padding-left: $base-menu-item-padding-left !important;
        padding-right: 20px;
        .sub-menu-title {
          display: inline-block;
          width: 96px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .dark-menu,
      .mashup-menu {
        .el-menu-item.is-active {
          color: $base-color-white !important;
          background-color: var(--themeColor) !important ;
        }
      }
    }
  }
</style>