<template>
  <ul class="hs-menu-list">
    <template v-for = "menu in source">
      <div class="line"
            :key="menu.menuId + '-line'"
            v-show="menu.needLine"></div>
      <li :key = "menu.menuId"
          class = "hs-menu-item"
          :data-hs-menu-code = "menu.menuCode"
          :class = "{
              'on-hover': menu.onHover,
              'on-active': menu.onActive,
              'parent-active': menu.parentActive
            }"
          @click = "setSelectMenu(menu)"
          @hover = "setHoverMenu(menu)">
        <!--左侧图标-->
        <i class = "hs-menu-icon">
          <img v-show = "menu.normalIcon && !menu.onHover && !menu.onActive && !menu.parentActive"
               :src = "menu.normalIcon">
          <!-- 悬停态图标 -->
          <img v-show = "!menu.onActive && !menu.parentActive && menu.onHover"
               :src = "menu.hoverIcon || menu.normalIcon">
          <!-- 激活态图标 -->
          <span class = "active-wrapper"
                v-show = "(menu.onActive || menu.parentActive) && (menu.activeIcon || menu.normalIcon)">
             <img :src = "menu.activeIcon || menu.normalIcon">
          </span>
        </i>
        <!--菜单文字-->
        <span class = "hs-menu-text" :title = "menu.menuName.length > 6 ? menu.menuName : ''">{{ menu.menuName }}</span>
        <img class="hs-menu-guide"
             :src="menu.guideIcon"
             v-if="menu.guideIcon">
        <!--下拉图标-->
        <i :class = "{'hs-menu-arrow': !shrink,'hs-menu-arrow-shrink':shrink}">
            <span v-if = "menu.children.length && !shrink">
              <img v-show = "!menu.onActive && !menu.parentActive"
                   :class = "{'hs-menu-arrow-up':menu.unfold, 'hs-menu-arrow-down':!menu.unfold}"
                   src = "./images/arrow.png">
              <img :class = "{'hs-menu-arrow-up':menu.unfold, 'hs-menu-arrow-down':!menu.unfold}"
                   v-show = "menu.onActive || menu.parentActive"
                   src = "./images/arrow-active.png">
            </span>
        </i>
      </li>

      <li :key="`${menu.menuId}_sub`"
          :class="{'hs-menu-second-wrapper':menu.parentId === -1,
                       'hs-menu-third-wrapper':menu.parentId !== -1 &&
              menu.parent.parentId === -1}"
          v-show="menu.children.length && menu.unfold && !shrink">
        <menu-list :origin-source="source"
                   :source="menu.children"
                   :active-menu="activeMenu"
                   :select="select"
                   :before-select="beforeSelect">
        </menu-list>
      </li>
    </template>
  </ul>
</template>
<script>
  import menuService from './menu-service';

  export default {
    name: 'MenuList',
    props: {
      isActiveParentMenu: {
        type: Boolean,
        default: false,
      },
      shrink: {
        type: Boolean,
        default: false,
      },
      source: {
        type: Array,
        default() {
          return [];
        },
      },
      originSource: {
        type: Array,
        default() {
          return [];
        },
      },
      activeMenu: {
        type: [String, Object],
      },
      select: {
        type: Function,
      },
      beforeSelect: {
        type: Function,
      },
    },
    data() {
      return {
        timeStamp: 0,
      };
    },
    computed: {
    },
    watch: {
    },
    mounted() {
    },
    created() {
    },
    methods: {
      setHoverMenu(menu) {
        menuService.hoverMenuByCode(menu.menuCode, this.originSource);
      },
      async setSelectMenu(menu) {
        if (!this.isActiveParentMenu && menu.onActive) { // 当前菜单已激活
          return;
        }
        if (this.timeStamp > 0 && Date.now() - this.timeStamp < 200) {
          return;
        }
        this.timeStamp = Date.now();

        if (!this.isActiveParentMenu && menu.children.length > 0) {
          menuService.activeMenuByCode(menu.menuCode, this.originSource, this.isActiveParentMenu);
        } else {
          this.beforeSelect(menu).then(() => {
            menuService.activeMenuByCode(menu.menuCode, this.originSource, this.isActiveParentMenu);

            this._clearMenuGuide(menu);
            this.select({
              menu,
              params: '',
            });
            if (typeof this.activeMenu === 'object') {
              this.activeMenu.menuCode = menu.menuCode;
            }
          }).catch(() => {});
        }
      },
      _clearMenuGuide(menu) {
        if (+menu.guideControl === 0) {
          menu.guideIcon = '';
        }
      },
    },
  };
</script>
<style lang="scss">
  .hs-menu-list {
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0;
    .hs-menu-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      height: 45px;
      cursor: pointer;
      color: #b3b5ba;

      &:after {
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
       -webkit-transform: translateY(-50%);
       display: inline-block;
       width: 0;
       height: 0;
       border: 5px solid transparent;
       content: "";
      }
      &:hover{
        background-color: #515c6e;
      }
      &.on-hover {
        background-color: #515c6e;
      }
      &.on-active {
        color: #ff8040;
        &:after {
         border-right-color: #ecf0f5;
        }
      }
      &.parent-active {
        color: #ff8040;
      }
      >.hs-menu-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 48px;
        height: 46px;
        padding: 0 16px;
        flex-shrink: 0;
        >img {
          width: 16px;
          height: 16px;
        }
        .active-wrapper {
          width: 24px;
          height: 24px;
          flex-shrink: 0;
          border-radius: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #ff8040;
        }
      }

      >.hs-menu-text {
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        max-width: 106px;
        margin-right: 5px;
        text-overflow: ellipsis;
      }

      >.hs-menu-arrow {
        position: absolute;
        right: 12px;
        top: 15px;
      }

      >.hs-menu-arrow-shrink {
        float: right;
        margin-right: 0;
      }

      .hs-menu-arrow-up {
        transition: transform .2s ease;
        transform: rotate(180deg);
      }

      .hs-menu-arrow-down {
        transition: transform .2s ease;
        transform: rotate(0deg);
      }
      > .hs-menu-guide {
        display: inline-block;
      }
    }

    .hs-menu-second-wrapper {
      color: #b3b5ba;
      background-color: #1e2631;
    }
    .hs-menu-third-wrapper {
      color: #b3b5ba;
      background-color: #333;
    }
    .line{
      width: 100%;
      height: 1px;
      background-color: #b3b5ba;
    }
    .hs-menu-list {
      .hs-menu-item {
        &.on-active {
           color: #fff !important;
        }
      }
    }
  }
</style>
