<template>
  <div>
    <ul v-if="menu.children.length==0">
      <li @click="handleMenu"  class="center" style="width: 90%;height: 50px;margin-top: 0px;">
        <dv-border-box-2 :class="{active: isActive}"  class="button">
          <div class="full center title" >
            <i :class="menu.source"></i>
            {{menu.name}}
          </div>
        </dv-border-box-2>

      </li>
    </ul>
    <ul v-else>
      <li @click="handleOpen" class="center button" style="width: 90%;height: 50px;margin-top: 0px;">
        <dv-border-box-2 :class="{active: isActive}">
          <div class="full center title">
            <i :class="menu.source"></i>
            {{menu.name}}
            <div :class="{open: isOpen,noOpen: !isOpen}"></div>
          </div>
        </dv-border-box-2>
      </li>
      <sub-menu style="width: 95%;float: right" v-if="menu.isOpen==2"  v-for="item of menu.children" :menu="item"></sub-menu>
    </ul>
  </div>
</template>

<script>
export default {
  name: "subMenu",
  inject: ['menuWrap'],
  props: {
    menu: {
      type: 'Object',
      default: {}
    }
  },
  computed: {
    isActive(){
      return this.menuWrap.activeName == this.menu.name
    }
  },
  mounted() {
  },
  methods: {
    handleOpen(){
      this.menuWrap.activeName = this.menu.name;
      this.menu.isOpen = this.menu.isOpen==2? 1:2;
    },
    handleMenu(){
      this.menuWrap.activeName = this.menu.name;
      this.$router.push({path: this.menu.path})
    },
  }
}
</script>

<style scoped>
  ul li{
  list-style: none;
  }
  ul{
    padding: 0px;
  }
  li{
    margin: 15px 20px;
    cursor: pointer;
    user-select: none;
  }
  .title{
    color: white;
    justify-content: left;text-indent: 20px;
  }
  .title>i{
   margin-right: 10px;
  }
  .open{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(78, 241, 236);
  }
  .noOpen{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid  rgba(78, 241, 218,0.3);
  }
  .active{
    background: rgba(11, 150, 214,0.5) ;
    animation: jello-horizontal 0.5s both !important;
  }
  .button{
    animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }
  .button:hover{
    background: rgba(11, 150, 214,0.5);
  }
  @keyframes slide-in-blurred-left {
    0% {
      -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
      transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
      -webkit-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
      -webkit-filter: blur(40px);
      filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0) scaleY(1) scaleX(1);
      transform: translateX(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
</style>
