<template>
  <Layout class="layout">

    <Sider width="310">
      
      <div class="layout-logo">
        看房4DKanKan-管理后台
      </div>
      <Menu theme="dark" :active-name="$route.name" width="auto" class="layout-menu">
        <MenuGroup >
          <template v-for="(item, index) in menuList[0].children">
            <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">
                    <Icon class="menu-icon" :custom="`iconfont icon${item.meta.icon}`" />
                    {{ item.meta.title }}
                </template>
                <MenuItem :name="`${index}-${childIndex}`" :to="`${item.path}/${child.path}`" v-for="(child, childIndex) in item.children" :key="child.path">{{child.meta.title}}</MenuItem>
            </Submenu>
          </template>
        </MenuGroup>
      </Menu>
    </Sider>
    <Layout>
      <Header class="layout-header">
        <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>
      </Header>
      <div class="layout-navigation">
        <Breadcrumb separator=">">
          <BreadcrumbItem class="bread-navigation" v-for="item in breadcrumb" :key="item">{{ item }}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <Content class="layout-main">
        <!-- <keep-alive>
          <router-view v-if="!$route.meta.noKeepAlive" />
        </keep-alive>
        <router-view v-if="$route.meta.noKeepAlive" /> -->
        <router-view />
      </Content>
    </Layout>
    <Modal v-model="show" class="edit-modal" width="420" footer-hide>
      <div class="modal-header" slot="header">修改密码</div>
      <editPassword v-if="show" @change="changeEditShow" />
    </Modal>
    <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'
export default {
  name: 'Index',
  data() {
    return {
      show: false,
      logoutModal: false
    }
  },
  computed: {
    menuList() {
      return this.$store.getters.menuList
    },
    userName() {
      return this.$store.getters.userName
    },
    breadcrumb () {
      return this.$route.matched.map(item => item.meta.title).filter(item => item)
    }
  },
  components: {
    editPassword,
    CModal
  },
  methods: {
    ...mapActions([
      'logout'
    ]),
    handleLogout() {
      this.logout().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    changeEditShow (show) {
      this.show = show
    }
  }
}
</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 {
    .menu-item {
      height: 28px;
      line-height: 28px;
      .menu-icon {
        margin-right: 10px;
      }
    }
  }

  &-header {
    border-bottom: 1px solid #555a5a;
    height: 64px;
    .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;
      }
    }
  }

  &-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) {
    color: #fff;
  }
}
.user-btn {
  margin-left: 30px;
  font-size: 14px;
  cursor: pointer;
  span {
    margin-left: 8px;
  }
}
</style>
