<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible style="background: #fff;">
      <div style="text-align:center;line-height:62px;border-bottom:1px solid  gainsboro;border-right:1px solid  gainsboro;">
        <img class="logo" src="../../assets/logo.png">
        <!-- <strong v-if="!collapsed" style="font-size:15px;">平台日志查询系统</strong> -->
      </div>
      <a-menu theme="light" mode="inline"  @click="handleClick" :style="{maxWidth:(collapsed ? '80px' : '200px' )}" :default-open-keys="['sub1']" :default-selected-keys="openKeys" >
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="search" /><span>查询</span></span>
          <a-menu-item key="logQuery" @click="routerClick('/logQuery')">综合查询</a-menu-item>
           <a-menu-item key="logFiltering" @click="routerClick('/logFiltering')">日志筛选</a-menu-item>
          <!--<a-menu-item key="/orgManager"><router-link to="/orgManager" ><a-icon type="monitor"/>组织机构管理</router-link></a-menu-item>-->
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0 20px;border-bottom:1px solid  gainsboro;">
        <a-row>
          <a-col :span="16">
            <a-button size="large" @click="toggleCollapsed">
              <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
            </a-button>
            <strong style="font-size:17px;margin-left:10px;">平台日志查询系统</strong>
          </a-col>
          <a-col :span="8">
            <h3 style="text-align:right;">
              <span>当前用户：</span>
              <a-icon type="user" />
              <span class="user">管理员</span>
              <a-button type="danger" shape="round" @click="logout">退出</a-button>
            </h3>
          </a-col>
        </a-row>
        <!-- <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
         -->
      </a-layout-header>
      <a-layout-content
        :style="{ minHeight: minHeight + 'px' }"
      >
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
const minHeight = document.documentElement.clientHeight - 64
export default {
  data() {
    return {
      minHeight: minHeight,
      collapsed: false,
      openKeys: ['1'],
      flagMenu:'1',
      openKeys:[],
    }
  },
  watch: {
    openKeys(val) {
      console.log('openKeys', val)
    }
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
    handleClick(e) {
      console.log('click', e);
    },
    routerClick(value){
      this.flagMenu = value
      if (this.$route.path != value) {
        this.$router.push({path: value})
      }
    },
    logout() {
      this.$confirm({
        title: '是否确定退出系统?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: this.logoutFun
      })
    },
    logoutFun() {
      this.$router.push('/login')
      // this.$store.dispatch('user/logout')
    }
  },
  created() {
    this.flagMenu = this.$route.path
    this.openKeys = []
    var route = this.$route.path;
    var lastroute=route.substr(1,route.length)
    this.openKeys.push(lastroute)
  }
}
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  margin: 14px;
}
</style>
