<style scoped scoped rel="stylesheet/scss" lang="scss">
  h3 {
    float: left;
    line-height: 80px;
    font-size: 1.6em;
  }
  .navbar-menu ul li {
    float: left;
    padding: 13px 20px;
  }
  .navbar-menu ul li a {
    display: inline-block;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    font-size: 16px;
  }
  .navbar-menu ul li a i {
    margin:0 auto 8px auto;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
  .dropdown .fa-home{
    font-size: 16px;
    color: #FFF!important;
  }
  #mask {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
    opacity:0;
  }
  .fadein {
    opacity: 100!important;
    filter: alpha(opacity=100)!important;
    z-index: 1160!important;
  }
  .mask-model {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #FFF;
  }
  .mask-loading {
    position: absolute;
    top: 50%;
    width: 160px;
    height: 100px;
    left: 50%;
    margin-left: -80px;
    z-index: 1090;
  }
  .mask-loading img {
    margin-left: 55px;
    transition: transform 1s;
    animation: rotate 3s linear infinite;
  }
  .mask-loading p {
    text-align: center;
    margin-top: 15px;
    color: #000;
  }
  .main-header {
    background-color: #009143 !important;
    color: #FFF !important;
    background: url(../../static/img/header.png);
    background-size: 100%;
  }
  .main-header a.banner {
    float: left;
    display: inline-block;
    width: 145px;
  }
  .notifications-menu {
    position: relative;
  }
  @-webkit-keyframes rotate {
    from{
      -webkit-transform: rotate(0deg);
    }
    to{
      -webkit-transform: rotate(360deg);
    }
  }
  @-moz-keyframes rotate {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
    }
  }
  @-ms-keyframes rotate {
    from {
      -ms-transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
    }
  }
  @-o-keyframes rotate {
    from {
      -o-transform: rotate(0deg);
    }
    to {
      -o-transform: rotate(360deg);
    }
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @media screen and (min-width: 0px) and (max-width: 1198px) {
    .main-header {
      overflow: hidden;
    }
  }
</style>
<template>
  <div id="app">
    <template v-if="$route.name !== 'Survey'">
      <header class="main-header clearfix">
      <!--<header class="main-header" :style="{ 'background-color': primaryColor }">-->
      <span class="logo-mini">
        <a href="javascript:;;" class="banner">
          <img  alt="Logo" class="img-responsive center-block logo">
        </a>
        <h3 class="">NGLS</h3>
      </span>
      <!-- Header Navbar -->
      <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
          <span class="sr-only">Toggle navigation</span>
        </a>
        <div class="navbar-menu">
          <ul style="margin-left: 40px">
            <li v-for="(item, key) in this.powerMenus.children" :key="key">
              <!-- <template v-if="item.resName == '消费营销'">
                <router-link :to="{name: 'ActiveManagement'}" @click.native="routeClk(key)">
                  <i class="fa fa-rmb"></i> {{item.resName}}
                </router-link>
              </template> -->
              <!-- <template v-if="item.resName == '品牌培育'">
                <router-link :to="{name: 'BrandInfoBase'}" @click.native="routeClk(key)">
                  <i class="fa fa-flag"></i> {{item.resName}}
                </router-link>
              </template>
              <template v-if="item.resName == '客户服务'">
                <router-link :to="{name: 'Customer'}" @click.native="routeClk(key)">
                  <i class="fa fa-user"></i> {{item.resName}}
                </router-link>
              </template> -->
              <template v-if="item.resName == '预警监控'">
                <router-link :to="{name: item.resCode}" @click.native="routeClk(key)">
                  <i class="fa fa-exclamation-triangle"></i> {{item.resName}}
                </router-link>
              </template>
              <template v-if="item.resName == '系统管理'">
                <router-link :to="{name: 'User'}" @click.native="routeClk(key)">
                  <i class="fa fa-wrench"></i> {{item.resName}}
                </router-link>
              </template>
            </li>
          </ul>
        </div>
        <!-- Navbar Right Menu -->
        <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
            <!-- Messages-->
            <!-- User Hom Menu -->
            <li class="dropdown" style="line-height: 58">
              <router-link :to="{name: 'Home'}">
                <i class="fa fa-home"></i>
              </router-link>
            </li>
            <!--Message Hom Menu-->
            <li class="dropdown notifications-menu">
              <router-link :to="{name: 'Message'}">
                <i class="fa fa-bell-o"></i>
                <span class="label label-warning">0</span>
              </router-link>
            </li>
            <!-- User Account Menu -->
            <li class="dropdown user user-menu">
              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                <!-- The user image in the navbar-->
                <!-- hidden-xs hides the username on small devices so only the image appears. -->
                <span class="hidden-xs">
                  {{ userInfo.userName || user.name }}
                  <i class="fa fa-sort-desc"></i>
                </span>
              </a>
              <ul class="dropdown-menu">
                <li  class="dropdown messages-menu">
                  <router-link :to="{name: 'ModifyPwd'}">
                    <i class="fa fa-lock"></i> 修改密码
                  </router-link>
                </li>
                <li  class="dropdown messages-menu">
                  <a href="javascript:;;" @click="logoutClk">
                    <i class="fa fa-power-off"></i> 注销
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    </template>
    <router-view></router-view>
    <div id="mask" :class="isLoading ? 'fadein' : ''">
      <div class="mask-loading">
        <img src="../../static/img/loading.png" width="50" alt="">
        <p class="text-content">内容正在渲染...</p>
      </div>
      <div class="mask-model"></div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { getUser } from '@/config/info'
  export default {
    name: 'App',
    mounted () {
      this.$nextTick(() => {
        setTimeout(() => {
          let menu = JSON.parse(localStorage.getItem('powerMenu'))
          if (menu !== null && menu !== '' && menu !== undefined) {
            this.powerMenus = menu
          } else {
            this.powerMenus = this.powerMenu
          }
          if (this.$route.name !== 'Survey') {
            this.$store.dispatch('setLoading', false)
          }
        }, 200)
      })
    },
    updated () {
      if (JSON.stringify(this.powerMenus) === '{}') {
        setTimeout(() => {
          let menu = JSON.parse(localStorage.getItem('powerMenu'))
          if (menu !== null && menu !== '' && menu !== undefined) {
            this.powerMenus = menu
          } else {
            this.powerMenus = this.powerMenu
          }
          if (this.$route.name !== 'Survey') {
            this.$store.dispatch('setLoading', false)
          }
        }, 200)
      }
    },
    data () {
      return {
        user: {
          name: getUser() != null ? getUser().userName : '',
          logomini: 'static/img/login.png'
        },
        section: 'Head',
        powerMenus: ''
      }
    },
    computed: {
      ...mapState([
        'userInfo',
        'powerMenu',
        'isLoading'
      ])
    },
    methods: {
      logoutClk () {
        /* TODO 请求登出接口 */
        localStorage.removeItem('information')
        localStorage.removeItem('powerMenu')
        sessionStorage.setItem('sessionMenus', '0')
        this.$router.go(0)
      },
      routeClk (key) {
        sessionStorage.setItem('routingIndex', key)
        /* TODO 等所有模块确定在添加 */
      }
    }
  }
</script>
