<template>
  <div class="admin-main-page">
    <div class="admin-page-header">
      <div class="admin-logo">
        <a class="title" href="javascript:void(0);">
          <img src="./../../assets/img/logo.png" alt="logo图标">
          <h1>校园小飞侠后台管理系统</h1>
        </a>
      </div>
      <div class="admincont">
        <img src="./../../assets/img/top-user.png" alt="用户头像">
        <div class="username">
          <em>{{ adminName }}</em>
        </div>
        <a class="logout" v-on:click="handleLogout">退出</a>
      </div>
    </div>
    <div class="admin-page-body">
      <div class="admin-page-leftMenu">
        <leftMenu :leftMenuData='leftMenuData'></leftMenu>
      </div>
      <div class="admin-p-right-cont">
        <transition name='opa-mini'>
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import leftMenu from './AdminLeftMenu'

export default {
  components: {
    leftMenu
  },
  data () {
    return {
      leftMenuData: [
        {
          index: '1',
          icon: 'el-icon-location',
          title: '所有用户',
          menuItem: [
            {route: 'au', listTitle: '所有用户'},
          ]
        },
        {
          index: '2',
          icon: 'el-icon-tickets',
          title: '所有订单',
          menuItem: [
            {route: 'all', listTitle: '所有订单'}
          ]
        },
        {
          index: '3',
          icon: 'el-icon-message',
          title: '消息系统',
          menuItem: [
            {route: 'sm', listTitle: '发送消息'},
            {route: 'mail', listTitle: '邮箱配置'}
          ]
        },
        // {
        //   index: '4',
        //   icon: 'el-icon-edit-outline',
        //   title: '加入我们',
        //   menuItem: [
        //     {route: 'jua', listTitle: '申请列表'},
        //     {route: 'jha', listTitle: '历史申请'}
        //   ]
        // },
        {
          index: '4',
          icon: 'el-icon-document',
          title: '投诉建议',
          menuItem: [
            {route: 'sl', listTitle: '用户反馈'}
          ]
        }
      ],
      adminName: ''
    }
  },
  created () {
    this.adminName = sessionStorage.getItem('username')
  },
  methods: {
    handleLogout () {
      sessionStorage.clear()
      this.$router.push({path: '/rootlogin'})
    }
  }
}
</script>

<style scoped lang='scss'>
$color: #34495e;
.admin-main-page {
  position: relative;
  width: 100%;
}

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  line-height: 3rem;
  background-color: #fff;
  border-bottom: 1px solid #f3f0f0;
  cursor: pointer;
}

.admin-logo {
  display: flex;
  height: 100%;
  margin-left: 1rem;

  .title {
    display: flex;
    align-items: center;

    h1 {
      color: $color;
      font-size: 1rem;
      letter-spacing: 2px;
    }
  }

  img {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.admincont {
  display: flex;
  align-items: center;
  margin-right: 4rem;
  color: $color;

  img {
    display: block;
    max-width: 1.5rem;
    margin-right: 5px;
    height: auto;
  }

  .logout {
    margin-left: 1rem;

    &:hover {
      color: rgb(252, 85, 85);
    }
  }
}

.admin-page-body {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
}

.admin-page-leftMenu {
  position: fixed;
  height: 100%;
}

.admin-p-right-cont {
  width: 100%;
  width: calc(100% - 10.1rem);
  min-height: 30rem;
  margin-left: 10.1rem;
}
</style>
