<template>
  <div>
    <ul class="nav">
      <!-- <li class="nav-item" :style="{'transition-delay': `${index/10}s`}"  v-for="(item, index) in listQY" :key="index" @click="openQY(item.url)">
        <div class="nav-item-wrap" >
          <i :class="item.icon"></i>
          <span class="nav-item-name" >{{ item.text }}</span>
        </div>
        <div class="hideBox" style="display: none; opacity: 1;">
        </div>
      </li> -->
      <!-- <li class="nav-item" :style="{'transition-delay': `${(index + listQY.length)/10}s`}"  v-for="(item, index) in list" :key="index" @click="open(item.url)"> -->
      <li class="nav-item" :style="{'transition-delay': `${index/10}s`}"  v-for="(item, index) in list" :key="index" @click="open(item.url)">
        <div class="nav-item-wrap" >
          <i :class="item.icon"></i>
          <span class="nav-item-name" >{{ item.text }}</span>
        </div>
        <div class="hideBox" style="display: none; opacity: 1;">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {     
      url: '',
      listQY: [
        {
          text: '企业信息',
          icon: 'sh-icon-qiyexinxi', 
          url: '/admin/rnBasic'
        },      
        {
          text: '应用管理',
          icon: 'sh-icon-yingyongguanli',
          url: '/admin/rnApplicationManagement'
        },
        {
          text: '自建菜单',
          icon: 'sh-icon-gongzuoxiaoxi',
          url: '/admin/rnSelfMenu'
        },
        {
          text: '组织与权限',
          icon: 'sh-icon-zuzhiyuquanxian',
          url: '/admin/rnOrgManagenent'
        },
        {
          text: '角色与权限',
          icon: 'sh-icon-jiaoseyuquanxian', 
          url: '/admin/rnPersonType'
        }
      ],
      list: [ 
        {
          text: '待办事项',
          icon: 'sh-icon-daibanshixiang', 
          url: 'backlogInit'
        }, 
        {
          text: '通知公告',
          icon: 'sh-icon-tongzhigonggao',
          url: 'noticeInit'
        },
        // {
        //   text: '工作消息',
        //   icon: 'sh-icon-gongzuoxiaoxi'
        // },
        {
          text: '在线客服',
          icon: 'sh-icon-zaixiankefu',
          url : 'online'
        }
      ]
    }
  },
  methods: {
    open(url) {
      if(url){
          if(url == 'backlogInit'){
            this.$refs.backlogDialog.init({url: 'myBacklog'});
            return false
          }else if(url == 'noticeInit'){
            this.$refs.noticeDialog.init('notice');
            return false
          } else if(url == 'online'){
             qimoChatClick();
            return false
          }
          this.$router.push({path: url})
      }else{
        this.$message.warning("此功能正在研发中")
      }
    },
    openQY (url) {
      let routeData = this.$router.resolve({path: url})
      window.open(routeData.href, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>
.nav{
  position: fixed;
  right: 0;
  bottom: 20%;
  width: 140px;
  left: calc(100vw - 35px);
  z-index: 2001;
  &-item{
    background: #0085cd;
    margin: 4px 0;
    padding: 10px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-size: 18px;
    transition: right 0.5s;
    right: 0px;
    &-name{
      font-size: 16px;
      margin-left: 20px;
    }
    &:hover{
      background-color: #cf1322;
    }
  }
  &:hover &-item{
     right: 100px;
  }
}
</style>

 

