<template>
  <Layout class="layout">

    <Sider width="310">
      
      <div class="layout-logo">
        好玩展-管理后台
      </div>
      <Menu theme="dark" :active-name="$route.name" width="auto" class="layout-menu">
        <template v-for="(item, index) in menuList">
            <MenuItem
              :key="item.name"
              :to="item.path"
              :name="item.name"
              v-if="!item.children || item.redirect"
            >
              <div class="menu-item">
                <Icon class="menu-icon" :custom="`iconfont icon${item.meta.icon}`" />
                {{ item.meta.title }}
              </div>
            </MenuItem>
            <Submenu :name="index" v-else>
                <template slot="title">
                    <div class="menu-item">
                      <Icon class="menu-icon" :custom="`iconfont icon${item.meta.icon}`" />
                    {{ item.meta.title }}
                    </div>
                </template>
                <MenuItem :name="child.name" :to="`${item.path}/${child.path}`" v-for="(child) in item.children" :key="`${item.path}/${child.path}`">{{child.meta.title}}</MenuItem>
            </Submenu>
          </template>
      </Menu>
    </Sider>
    <Layout>
      <Header class="layout-header">
        <template>
          <div class="layout-navigation">
          <Breadcrumb separator="/">
            <BreadcrumbItem class="bread-navigation" v-for="item in breadcrumb" :key="item">{{ item }}</BreadcrumbItem>
          </Breadcrumb>
        </div>
        <div class="header-user">
          <span class="user-name">{{ userName }}</span>
            <span class="user-btn" @click="changeEditShow(true)"><Icon custom="iconfont iconnav_password" /><span>修改密码</span></span>
            <span class="user-btn" @click="logoutModal=true"><Icon custom="iconfont iconnav_exit" /><span>退出登录</span></span>
            <i class="iconfont iconarrow_down" />
        </div>
        </template>
      </Header>
      
      <Content class="layout-main">
        <!-- <keep-alive>
          <router-view v-if="!$route.meta.noKeepAlive" />
        </keep-alive>
        <router-view v-if="$route.meta.noKeepAlive" /> -->
        <div class="container">
          <router-view />
        </div>
      </Content>
    </Layout>
    <CModal :show="logoutModal" :width="420" title="提示" @close="logoutModal=false" @submit="handleLogout" submitText="确定">
      <div style="height:60px">确定退出登录吗？</div>
    </CModal>
  </Layout>
</template>

<script>
import { mapActions } from 'vuex'
import editPassword from 'components/editPassword'
import CModal from 'components/Modal'
import { authRoutes } from '@/router/routes'
import { getAdmin } from '@/libs/token'

export default {
  name: 'Index',
  data() {
    return {
      show: false,
      logoutModal: false
    }
  },
  computed: {
    menuList() {
      const menuList = getAdmin().menuList ? getAdmin().menuList.map(item => item.name) : []
      return this.$store.getters.menuList[0].children.filter(item => menuList.indexOf(item.meta.title) > -1 )
    },
    userName() {
      return this.$store.getters.userName
    },
    breadcrumb () {
      return this.$route.matched.map(item => item.meta.title).filter(item => item)
    }
  },
  components: {
    editPassword,
    CModal
  },
  mounted () {
    
  },
  methods: {
    ...mapActions([
      'logout'
    ]),
    handleLogout() {
      this.logout().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    changeEditShow (show) {
      window.open('https://4dkankan.com')
    }
  }
}
</script>

<style scoped lang="less">
.layout {
  height: 100%;
  &-logo {
    position: relative;
    height: 64px;
    border-bottom: 1px solid #555a5a;
    line-height: 64px;
    padding-left: 23px;
    font-size: 16px;
  }

  &-menu {
    padding-top: 30px;
    .menu-item {
      height: 28px;
      line-height: 28px;
      font-size: 16px;
      display: flex;
      align-items: center;
      .menu-icon {
        margin-right: 15px;
        color: #17D2D2;
      }
    }
  }

  &-header {
    border-bottom: 1px solid #555a5a;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-user {
      float: right;
      // cursor: pointer;
      color: #fff;
      .user-name {
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
      }
    }
    .header-user /deep/ .ivu-select-dropdown {
      background-color: #161a1a;
      .ivu-dropdown-item:hover {
        background-color: #161a1a;
      }
    }
  }
  .layout-main {
    padding: 30px;
    .container {
      // min-height: 100%;
      background: #252828;
    }
  }
  &-navigation {
    height: 48px;
    padding: 12px 29px;
    border-left: 1px solid #555a5a;
    background-color: #252828;
  }
  .bread-navigation {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
  }

  .ivu-menu-dark.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
  }
  .ivu-menu-vertical .ivu-menu-submenu-title {
    font-size: 16px;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    background: transparent;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active {
    background: transparent !important;
    color: #1FE4DC;
  }
  
  .layout-navigation {
    border-left: none;
    padding: 0;
  }
}
.user-btn {
  margin-left: 30px;
  font-size: 14px;
  cursor: pointer;
  span {
    margin-left: 8px;
  }
}
</style>
