<template>
  <div class="navbar">
    <!--LOGO/TITLE-->
    <div class="left-logo-box">
      <img :src="circularLogo">
      <p>{{VUE_APP_TITLE}}</p>
    </div>
    <top-nav ref="topNav" id="topmenu-container" class="topmenu-container" v-if="topNav" v-show="false"/>
    <div style="flex:1;"></div>
    <!--按钮-->
<!--    <div class="nav-icon-max-box">-->
<!--      &lt;!&ndash;消息&ndash;&gt;-->
<!--      <div class="message-box" @click="goPage('individualMessage')" v-if="userType!='5'">-->
<!--        <span class="iconfont iconfont-a icon-xitongxiaoxi"></span>-->
<!--        <p class="message-num-position-p" v-if="$store.state.user.messageNum>0"></p>-->
<!--      </div>-->
<!--      &lt;!&ndash;首页&ndash;&gt;-->
<!--      <div @click="goPage('home')" v-if="userType!='22'&&userType!='5'&&initPage">-->
<!--        <span class="iconfont iconfont-b icon-shouye-xuanzhong"></span>-->
<!--      </div>-->
<!--      &lt;!&ndash;帮助文档&ndash;&gt;-->
<!--      <div @click="goPage('help')" v-if="userType!='5'">-->
<!--        <span class="el-icon-question"-->
<!--              style="color: rgb(255, 255, 255);-->
<!--              display: inline-block;-->
<!--              font-size: 26px;-->
<!--              width: 54px;-->
<!--              height: 54px;-->
<!--              line-height: 54px;-->
<!--              text-align: center;">-->
<!--        </span>-->
<!--      </div>-->
<!--    </div>-->
    <!--个人中心-->
    <div class="right-menu">
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper" style="display: flex">
          <img :src="avatar" class="user-avatar" v-if="avatar">
          <img src="@/assets/ZDimages/basicsModules/tx_cion.png" class="user-avatar" v-else>
          <p style="color:#fff;font-size:14px;margin:0 20px 0 0;line-height:80px;text-align: center">{{name}}</p>
          <p class="el-icon-arrow-down" style="font-size:20px;color:#fff;margin:32px 0;"></p>
        </div>
        <el-dropdown-menu slot="dropdown" style="margin:0;">
<!--          <el-dropdown-item divided @click.native="goSustain" v-if="sustainType">-->
<!--            <span>调试页面</span>-->
<!--          </el-dropdown-item>-->
<!--          <el-dropdown-item divided @click.native="goPage('individualCenter')" v-if="userType!='5'">-->
<!--            <span>个人中心</span>-->
<!--          </el-dropdown-item>-->
<!--          <el-dropdown-item divided @click.native="logout">-->
<!--            <span>退出登录</span>-->
<!--          </el-dropdown-item>-->
          <el-dropdown-item divided @click.native="close">
            <span>关闭</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--待审批-->
<!--    <p class="approvalNum-p" v-if="tableButtonType" @click="skipApproval()">待审批 {{$store.state.user.approvalNum}}</p>-->
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import TopNav from './TopNav'
  import { constantRoutes } from '@/router'
  import store from '@/store'
  import { xmlRequestLink } from '@/utils/menuLink'
  import { judgmentNetworkReturnOutAddress } from "@/utils/ruoyi";
  export default {
  components: {
    TopNav
  },
  data(){
    return{
      VUE_APP_TITLE:process.env.VUE_APP_TITLE,
      circularLogo:localStorage.getItem('circularLogo'),
      userType:localStorage.getItem('userType'),
      initPage:JSON.parse(localStorage.getItem('initPage')),
      sustainType:false,
      tableButtonType:this.hasPermiDom(['lab:flow:approval:isWaitMe']),
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      "name"
    ]),
    topNav: {
      get() {
        return this.$store.state.settings.topNav
      }
    },
  },
  mounted(){
    let permissions = store.getters.permissions;
    if(permissions[0] == "*:*:*"){
      this.$set(this,'sustainType',true);
    }else{
      this.$set(this,'sustainType',false);
    }
    // this.$store.dispatch("laboratoryLabFlowableApprovalIsWaitMeCount", {}).then((res) => {}).catch(() => {});
  },
  methods: {
    skipApproval(){
      this.$router.push({
        path: '/laboratoryManagement/subApproval',
      });
    },
    goSustain(){
      this.$router.push({ path: '/sustain' });
    },
    goPage(type){
      let self = this;
      if(type == 'home'){
        this.$router.push({ path: '/home' });
      }else if(type == 'individualMessage' || type == 'individualCenter'){
        let topMenus = this.$store.state.permission.topbarRouters;
        let obj = this.forPage(topMenus,type,true);
        store.dispatch('settings/setPageName', obj.obj?obj.obj.meta.title:obj.parent.meta.title)
        self.$store.commit("SET_SIDEBAR_ROUTERS", obj.obj?obj.obj.children:obj.parent.children);
        this.$refs['topNav'].goPage(obj.obj,obj.parent,obj.item)
      }else if(type == 'help'){
        let urlText = window.location.href.split('://')[0]+'://';
        window.open(urlText+this.judgmentNetworkReturnAddress(),'_blank','noreferrer')
      }
    },
    forPage(list,pathName){
      let self = this;
      for (let i = 0; i < list.length; i++) {
        if (list[i].name == pathName) {
          return list[i]
        } else if (list[i].children) {
          let text = self.forPage(list[i].children,pathName)
          if(text){
            if(!text.parent){
              return {
                item: text,
                parent: list[i],
              }
            }
            text.obj = list[i]
            return text
          }
        }
      }
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          if(localStorage.getItem('userType') == '5'){
            this.$router.push({ path: '/supplierLogIn' });
          }else{
            if(process.env.VUE_APP_LOGIN_TYPE === 'skip'){
              window.location.href = judgmentNetworkReturnOutAddress();
            }else{
              this.$router.push({ path: '/login' });
            }
          }
        })
      }).catch(() => {});
    },
    close() {
      this.$confirm('确定关闭吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.close();
      }).catch(() => {});
    },
    judgmentNetworkReturnAddress() {
      /*判断是否是内网IP*/
      // 获取当前页面url
      var curPageUrl = window.location.href;
      var reg1 = /(http|ftp|https|www):\/\//g;//去掉前缀
      curPageUrl =curPageUrl.replace(reg1,'');
      var reg2 = /\:+/g;//替换冒号为一点
      curPageUrl =curPageUrl.replace(reg2,'.');
      curPageUrl = curPageUrl.split('.');//通过一点来划分数组
      var ipAddress = curPageUrl[0]+'.'+curPageUrl[1]+'.'+curPageUrl[2]+'.'+curPageUrl[3];
      var isInnerIp = false;//默认给定IP不是内网IP
      var ipNum = getIpNum(ipAddress);
      /**
       * 私有IP：A类  10.0.0.0    -10.255.255.255
       *       B类  172.16.0.0  -172.31.255.255
       *       C类  192.168.0.0 -192.168.255.255
       *       D类   127.0.0.0   -127.255.255.255(环回地址)
       **/
      var aBegin = getIpNum("10.0.0.0");
      var aEnd = getIpNum("10.255.255.255");
      var bBegin = getIpNum("172.16.0.0");
      var bEnd = getIpNum("172.31.255.255");
      var cBegin = getIpNum("192.168.0.0");
      var cEnd = getIpNum("192.168.255.255");
      var dBegin = getIpNum("127.0.0.0");
      var dEnd = getIpNum("127.255.255.255");
      isInnerIp = isInner(ipNum,aBegin,aEnd) || isInner(ipNum,bBegin,bEnd) || isInner(ipNum,cBegin,cEnd) || isInner(ipNum,dBegin,dEnd);
      return isInnerIp?'172.16.0.65/examdoc/':'labcontrol.nwafu.edu.cn/examdoc/';
      /*获取IP数*/
      function getIpNum(ipAddress) {
        var ip = ipAddress.split(".");
        var a = parseInt(ip[0]);
        var b = parseInt(ip[1]);
        var c = parseInt(ip[2]);
        var d = parseInt(ip[3]);
        var ipNum = a * 256 * 256 * 256 + b * 256 * 256 + c * 256 + d;
        return ipNum;
      }
      function isInner(userIp,begin,end){
        return (userIp>=begin) && (userIp<=end);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 80px;
  overflow: hidden;
  position: relative;
  background: #0045AF;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  display: flex;
  .left-logo-box{
    //flex:1;
    display: flex;
    margin-right:100px;
    img{
      height:50px;
      width:50px;
      margin:15px 12px 15px 18px;
    }
    p{
      font-size:24px;
      color:#fff;
      line-height:80px;
    }
  }
  .nav-icon-max-box{
    display: flex;
    margin-left:20px;
    .message-box{
      position: relative;
      .message-num-position-p{
        position: absolute;
        top:12px;
        left:30px;
        width:10px;
        height:10px;
        background-color: red;
        border-radius:50%;
      }
    }
    div{
      width:54px;
      height:54px;
      margin:13px 0;
      position: relative;
      cursor: pointer;
      img{
        width:24px;
        height:24px;
        margin:15px;
      }
      .iconfont-a{
        width:24px;
        height:28px;
        line-height:54px;
        margin:15px;
        font-size:28px;
        color:#fff;
        text-align: center;
      }
      .iconfont-b{
        width:24px;
        height:24px;
        line-height:52px;
        margin:15px;
        font-size:24px;
        color:#fff;
        text-align: center;
      }
      p{
        position: absolute;
        top:0;
        left:0;
      }
    }
  }
  .right-menu {
    height: 100%;
    line-height: 50px;
    &:focus {
      outline: none;
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }
    .avatar-container {
      margin-right: 10px;
      .avatar-wrapper {
        height:80px;
        position: relative;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin:20px;
        }
        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
  .approvalNum-p{
    text-align: center;
    color:#fff;
    background-color: #0183FA;
    height:30px;
    line-height:30px;
    margin:25px 10px 0 0;
    padding:0 15px;
    border-radius:20px;
    cursor: pointer;
    font-size:14px;

  }
}
</style>
