<template>
  <div class="wrapper floatBar">
    <div class="floatBar-top">
      <i class="el-icon-menu"></i>
    </div>
    <div class="floatBar-li">
      <ul>
        <li v-for="(item ,index) in titleArray" :key="index" @click="$toPush(item.path, item.meta.selected)" v-if="isShowInde != index" :class="`floatBar-li` + index">
          <span class="img">
            <img :src="require('@/assets/sicon' + (index + 1) + '.png')" width="20px" />
          </span>&nbsp;
          <font>{{item.meta.title}}</font>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
@import "@/utils/default.scss";
@keyframes round {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.floatBar {
  position: fixed;
  right: 0px;
  top: 60px;
  z-index: 9;
  padding: 0;
  overflow: visible !important;
  padding: 0 !important;
  height: auto !important;
  &:hover {
    .floatBar-li {
      display: block;
    }
    .floatBar-top i{
      animation: round 0.3s;
    }
  }
  .floatBar-top {
    cursor: pointer;
    height: 40px;
    text-align: center;
    width: 60px;
    line-height: 40px;
    i {
      font-size: 2em;
      color: #3366e5;
      line-height: 40px;
    }
  }
  .floatBar-li {
    width: auto;
    cursor: pointer;
    position: relative;
    display: none;
    ul {
      padding: 0;
      width: 50px;
      height: 360px;
      margin: 0;
    }
    li {
      list-style: none;
      height: 40px;
      line-height: 40px;
      position: absolute;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      padding: 0 10px;
      width: 30px;
      transition: width 0.3s;
      -webkit-transition: width 0.3s;
      &:hover {
        width: 100px;
        font{
          display:inline-block;
        }
      }
    }
    @for $num from 1 through 9 {
      $cl: nth($colors, $num);
      li:nth-child(#{$num}) {
        $hei: 40px;
        $n: #{($num - 1) * $hei};
        top: #{$n};
      }
    }
    @for $num from 1 through 9 {
      $cl: nth($colors, $num);
      $index: $num - 1;
      .floatBar-li#{ $index }  .img {
        background: lighten($cl, 40%);
      }
    }
    .img {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: olivedrab;
      text-align: center;
      vertical-align: middle;
      border-radius: 3px;
    }
    font {
      color: #eeeeee;
      display: none;
    }
  }
}
    
</style>
<script lang="ts">
import { State, Getter, Mutation, Action } from "vuex-class";
import { Component, Vue, Provide,Watch } from "vue-property-decorator";
import Layout from "@/views/Layout/index.vue";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class Navbar extends Vue {
  @Getter("moudleArr") getModuleArr: any;

  @Provide() titleArray: any = [];//变化的

  @Provide() isShowInde: any = null;;

  @Watch("$route") RouteChange(currRouter:any): any {
    let that = this,
    inde = that.titleArray.findIndex( ( ele: any) => currRouter.path == ele.redirect );
    that.isShowInde = inde
  } 

  toPush(url: string) {
    let toUrl = "";
    window.open(window.location.origin + url, "_self");
  }

  created() {
    let that = this;
    if( that.getModuleArr.length > 0) that.titleArray = [...that.getModuleArr]
    else that.titleArray = [...METHOD.titleArray];
    let inde = that.titleArray.findIndex( (ele :any) => that.$router.currentRoute.path == ele.redirect );
    that.isShowInde = inde
  }
}
</script>