<template>
  <div class="r-menu">
    <i class="fa fa-bars ibar" aria-hidden="true"></i>
    <ul class="te-menu pop full" :class="[mini?'small':'']">
      <li class="brand" v-if="showLogo">
        <i v-if="!system.logo_url" :class="system.logo"></i>
        <img v-if="system.logo_url" :src="system.logo_url" />
      </li>

      <li class="te-menu-item" v-for="(item) in menus" :key="item.m_id" @click="menuChanged(item)"
        :class="item.selected ? 'active' : ''">
        <i :class="item.icon"></i> <a>{{ item.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TeMenu",
  props: {
    system: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showLogo: {
      type: Boolean,
      default: false,
    },
    mini: {
      type: Boolean,
      default: false,
    },
    menus: {
      type: Array,
    },
  },
  data() {
  },
  methods: {
    menuChanged(item) {
      this.menus.forEach((e) => {
        e.selected = false
      });
      item.selected = true;
      this.$emit("menuChanged", item);
    },
  },
};
</script>

<style scoped>
.r-menu {
  display: flex;
  position: relative;
}

.r-menu .ibar {

  position: absolute;
  left: 100px;
  top: 16px;
  color: white;
  cursor: pointer;
}

/*  一级菜单样式 */
.te-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: var(--menu-full-width);
  background-color: var(--menu-bg-color);
  color: var(--menu-color);
}
.full{
  width: calc(var(--submenu-width)+var(--menu-full-width)) !important;
}

.te-menu.small {
  width: var(--menu-small-width);
}

.te-menu.small a {
  display: none;
}

i.hv:hover {
  color: var(--banner-bg-color);
  font-weight: 600;
}

a {
  text-decoration: none;
  color: var(--submenu-color);
}

.te-menu-item {
  cursor: pointer;
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.7rem;
}

.te-menu-item a {
  color: var(--menu-color);
}

.brand {
  cursor: pointer;
  display: block;
  text-decoration: none;
  font-size: 1.2rem;
  white-space: nowrap;
  height: var(--banner-height);
  line-height: var(--banner-height);
  text-align: center;
}

.te-menu-item.active {
  background-color: var(--menu-active-bg-color);
  color: var(--menu-active-color);
}

.te-menu-item:hover:not(.active) {
  background-color: var(--menu-active-bg-color);
  color: var(--menu-active-color);
}

.te-menu-item i {
  font-size: 0.8rem;
  text-align: center;
  margin: auto 4px;
}

.small li>a {
 display: none;
}
</style>