<template>
  <div>
    <ul class="nav">
      <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>
import { mapState } from 'vuex'
import { CHECK_ADMIN } from '@/apis/admin'
export default {
  computed: {
    ...mapState(['user', 'env']),
    list() {
      let arr = [{
          text: '在线客服',
          icon: 'sh-icon-zaixiankefu',
          url : 'online'
        }]
      if (this.isAdmin && this.env.VUE_APP_SYSTEM_CODE !== 'HLJ-ENTERPRISE' && this.env.VUE_APP_SYSTEM_CODE !== 'CS-ENTERPRISE') {
        arr.unshift({
          text: '管理员模式',
          icon: 'sh-icon-guanliyuan',
          url: this.env.VUE_APP_ADMIN_URL || 'http://219.147.76.5:7832'
        })
      }
      return arr
    }
  },
  data () {
    return {     
      url: '',
      isAdmin: false
    }
  },
  methods: {
    checkAdmin() {
      this.$post(
        CHECK_ADMIN,
        {},
        data => {
          this.isAdmin = data.data
        }
      )
    },
    open(url) {
      if(!url) {
        this.$message.warning("此功能正在研发中")
      } else if (url.indexOf('http') !== -1) {
        window.open(url)
      } else if(url == 'online'){
          qimoChatClick()
      } else {
        this.$router.push({path: url})
      } 
    },
    openQY (url) {
      let routeData = this.$router.resolve({path: url})
      window.open(routeData.href, '_blank');
    }
  },
  mounted () {
    this.checkAdmin()
  }
}
</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>

 

