<!--
 * @Author: Billy
 * @Date: 2021-12-18 16:30:05
 * @LastEditors: Billy
 * @LastEditTime: 2022-03-07 14:54:56
 * @Description: 请输入
-->
<!--
props: 看下面注释
event: 
1.select index: 选中菜单项的index, item: 选中菜单项的MenuItem类型对象
-->

<template>
  <div
    class="menu"
    :class="[arrangeMode, { 'has-active-effect': hasActiveEffect }]"
  >
    <div
      class="menu-item"
      :class="{ active: item.id === activeId }"
      v-for="(item, index) in menuItems"
      :key="index"
      @click="onItemClick(item, index)"
    >
      <template v-if="item.iconSrc && item.iconSrcInactive">
        <el-tooltip
          v-if="displayMode === 'icon'"
          class="text-tip"
          effect="light"
          :content="item.title"
          :open-delay="750"
          :placement="arrangeMode === 'horizontal' ? 'bottom' : 'right'"
        >
          <img
            class="icon-img"
            :src="
              item.id !== activeId && item.iconSrcInactive
                ? item.iconSrcInactive
                : item.iconSrc
            "
          />
        </el-tooltip>

        <img
          v-if="displayMode === 'both'"
          class="icon-img before-title"
          :src="
            item.id !== activeId && item.iconSrcInactive
              ? item.iconSrcInactive
              : item.iconSrc
          "
        />
      </template>

      <span class="title-text" v-if="displayMode !== 'icon'">{{
        item.title
      }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 主菜单栏的信息数组
    menuItems: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 排列模式，横向还是竖向
    arrangeMode: {
      type: String,
      default: "horizontal",
      validator: function (value) {
        return ["horizontal", "vertical"].indexOf(value) !== -1;
      },
    },
    // 显示模式，只显示文字、只显示图标，还是都显示
    displayMode: {
      type: String,
      default: "both",
      validator: function (value) {
        return ["text", "icon", "both"].indexOf(value) !== -1;
      },
    },
    // 是否有选中后的效果(如底色变深/字体变色)
    hasActiveEffect: {
      type: Boolean,
      default: true,
    },
    // 当前激活菜单的 index (支持.sync)
    defaultActive: { type: String },
  },
  computed: {
    activeId: {
      get() {
        return this.activeId_;
      },
      set(val) {
        // this.$emit("update:defaultActive", val); // 暂时用不上
        this.activeId_ = val;
      },
    },
  },
  watch: {
    defaultActive: function (val, oldVal) {
      this.activeId_ = val;
    },
  },
  data() {
    return {
      activeId_: this.defaultActive,
    };
  },
  mounted() {},
  methods: {
    onItemClick(item, index) {
      this.activeId = item.id;
      this.$emit("select", item, index);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/scss/_variables";
.menu {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  &.horizontal {
    flex-direction: row;
    .menu-item {
      flex-direction: row;
      padding: 0 16px;
      // border-bottom: solid 2px transparent;
      .icon-img {
        &.before-title {
          padding-right: 4px;
        }
      }
    }
  }
  &.vertical {
    flex-direction: column;
    .menu-item {
      flex-direction: column;
      padding: 16px 0;
      // border-right: solid 2px transparent;
      .icon-img {
        &.before-title {
          padding-bottom: 4px;
        }
      }
    }
  }
  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: $font-color-light;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;

    .icon-img {
      width: 24px;
      height: 24px;
    }
  }

  &.has-active-effect {
    .menu-item {
      &.active {
        // border-bottom-color: $theme-main-color;
        // border-right-color: $theme-main-color;
        // background-color: $theme-background-dark;
        .title-text {
          color: $theme-main-color;
        }
      }
    }
  }
}
</style>