<template>
  <div :class="['wrapper', classes]">
    <!-- Left side column. contains the logo and sidebar -->
    <sidebar :display-name="demo.displayName" :picture-url="demo.avatar" />
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <div class="tag_div">
        <div class="tag_label">
          <ul>
            <li>
              <router-link :to="{name: 'Home'}">
                <i class="fa fa-circle"></i>
                首页
              </router-link>
            </li>
            <li v-for="(item, key) in menus" :key="key">
              <router-link :to="{name: item.resCode}">
                <i class="fa fa-circle"></i>
                {{item.resName}}
              </router-link>
              <i class="fa fa-close" @click="remMenuClk(item, key)"></i>
            </li>
          </ul>
        </div>
        <div class="tag_close">
          <ul class="nav navbar-nav">
            <li class="dropdown messages-menu">
              <a href="javascript:;;" style="padding: 0 0;">
                标签选项
                <i class="fa fa-caret-down"></i>
              </a>
              <ul>
                <li @click="remMenusClk">
                  <a href="javascript:;;">关闭所有</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
        <router-view></router-view>
    </div>
    <!-- /.content-wrapper -->
  </div>
  <!-- ./wrapper -->
</template>

<script>
  import config from '../config'
  import Sidebar from './Sidebar'
  import { mapState } from 'vuex'
  export default {
    name: 'Dash',
    mounted () {
      let sessionMenus = !sessionStorage.getItem('sessionMenus') ? sessionMenus = [] : JSON.parse(sessionStorage.getItem('sessionMenus'))
      this.$store.dispatch('setSessionMenus', JSON.stringify(sessionMenus))
    },
    components: {
      Sidebar
    },
    data: function () {
      return {
        menus: [],
        classes: {
          fixed_layout: config.fixedLayout,
          hide_logo: config.hideLogoOnMobile
        },
        error: ''
      }
    },
    computed: {
      demo () {
        return {
          displayName: '1',
          avatar: '2',
          email: '3',
          randomCard: '3'
        }
      },
      ...mapState([
        'sessionMenus'
      ])
    },
    methods: {
      changeloading () {
        this.$store.commit('TOGGLE_SEARCHING')
      },
      remMenuClk (obj, key) {
        let sessionMenus = JSON.parse(sessionStorage.getItem('sessionMenus'))
        if (obj.resCode === this.$route.name && key > 0) {
          let tmp = sessionMenus[key - 1]
          this.$router.push({name: tmp.resCode})
        }
        sessionMenus.splice(key, 1)
        sessionStorage.setItem('sessionMenus', JSON.stringify(sessionMenus))
        this.$store.dispatch('setSessionMenus', JSON.stringify(sessionMenus))
      },
      remMenusClk () {
        sessionStorage.setItem('sessionMenus', JSON.stringify([]))
        this.$store.dispatch('setSessionMenus', JSON.stringify([]))
        this.$router.push({name: 'Home'})
      }
    },
    watch: {
      sessionMenus (val, old) {
        this.menus = JSON.parse(val)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .logo-mini,
  .logo-lg {
    text-align: left;

  img {
    padding: .4em !important;
  }
  }

  .user-panel {
    height: 4em;
  }

  hr.visible-xs-block {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.17);
    height: 1px;
    border-color: transparent;
  }
  .navbar-nav {
    float: right;
    margin-right: 10px!important;
  }
  .navbar-nav>.user-menu>.dropdown-menu{
    width: 180px!important;
  }
  .tag_div {
    position: absolute;
    background: #FFF;
    margin-left: 5px;
    z-index: 333;
    width: 100%;
    height: 40px;
    box-shadow: 0px 2px 2px #ccc;
  }
  .tag_div ul {
    margin: 0 0;
    padding: 0 0;
  }
  .tag_div ul li {
    float: left;
    margin-left: 10px;
    padding: 5px 8px;
    margin-top: 7px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0px 2px #999;
  }
  .tag_div ul li:hover{
    box-shadow: 0 0px 2px #666;
  }
  .tag_div ul li a {
    color: #333333;
  }
  .tag_div ul li:hover > a {
    color: #666;
  }
  .tag_div ul li:hover > a .fa-close{
    color: #ccc;
  }
  .tag_close li a {
    position: relative;
  }
  .tag_close li ul {
    position: absolute;
    z-index: 9;
    display: none;
    width: 83px;
    border: 1px solid #ccc;
    left: 0px;
    background: #fff;
    padding: 4px;
  }
  .tag_close li ul li{
    padding: 0 0;
    margin: 0 0;
    box-shadow: none;
    width: 100%;
    text-align: center;
  }
  .tag_close li ul li:hover {
    box-shadow: none;
  }
  .tag_close > ul:hover > li > ul {
    display: inline-block;
  }

  .fa {
    margin: 0 4px;
    color: #ddd;
  }
  .fa-close {
    font-weight: 100;
    font-size: 12px;
  }
  .actived{
    color: #009143 !important;
  }
</style>
