<template>
  <div class="header-container">
    <!-- 头部左侧按钮及LOGO -->
    <div class="header-left-box fl-around">
      <Icon type="md-menu" class="header-btn-menu" @click="isOpenDrawer = true" />
      <img src="../assets/mark.svg" />
    </div>
    <!-- 头部右侧个人中心部分 -->
    <div class="header-right-box fl-around">
      <Icon type="md-help-circle" />
      <Icon type="ios-settings" />
      <Icon type="ios-bug" />
      <img src="../assets/icon/icon_header.png" />
    </div>

    <!-- 全局抽屉部分 -->
    <Drawer placement="left" :closable="false" v-model="isOpenDrawer" class-name="drawer-container" :width="270">
      <div class="drawer-header fl-center" slot="header">
        <Icon type="md-menu" class="header-btn-menu" @click="isOpenDrawer = true" />
        <img src="../assets/mark.svg" />
      </div>

      <!-- 抽屉菜单栏 -->
      <div class="drawer-body scrollstyle">
        <div class="drawer-menu-item">
          <div class="drawer-menu-top fl-center">
            <img src="../icons/student-analysis/header_icon1.png">
            <span class="drawer-menu-name">智慧校园管理</span>
          </div>
          <div class="drawer-menu-bottom fl-center">
            <ul>
              <li>智慧校园管理</li>
              <li>学生账号管理</li>
              <li>教师账号管理</li>
              <li>班级管理</li>
              <li>软件及授权项目管理</li>
            </ul>
          </div>
        </div>
        <div class="drawer-menu-item">
          <div class="drawer-menu-top fl-center">
            <img src="../icons/student-analysis/header_icon2.png">
            <span class="drawer-menu-name">教材内容管理</span>
          </div>
          <div class="drawer-menu-bottom fl-center">
            <ul>
              <li>校本课纲总览</li>
              <li>校本课纲管理</li>
              <li>内容管理</li>
              <li>题目/库管理</li>
              <li>知识点管理</li>
            </ul>
          </div>
        </div>
        <div class="drawer-menu-item">
          <div class="drawer-menu-top fl-center">
            <img src="../icons/student-analysis/header_icon3.png">
            <span class="drawer-menu-name">学习活动服务</span>
          </div>
          <div class="drawer-menu-bottom fl-center">
            <ul>
              <li>课程管理</li>
              <li>活动行事历</li>
              <li>活动仪表板</li>
              <li>测验与作业管理</li>
              <li>自主学习管理</li>
            </ul>
          </div>
        </div>
        <div class="drawer-menu-item">
          <div class="drawer-menu-top fl-center">
            <img src="../icons/student-analysis/header_icon4.png">
            <span class="drawer-menu-name">班级智慧服务</span>
          </div>
          <div class="drawer-menu-bottom fl-center">
            <ul>
              <li>区班校活动记录簿</li>
              <li>师生联络簿</li>
              <li>操行成绩管理</li>
              <li>成绩总览与登录</li>
              <li>学情仪表盘</li>
            </ul>
          </div>
        </div>
      </div>
    </Drawer>

  </div>
</template>

<script>
  export default {
    name: "headers",
    props: ['parentToChild', 'identityselect'],
    data() {
      return {
        isOpenDrawer: false

      }
    },
    created() {

    },
    methods: {

    },
  }
</script>

<style scoped>
  .header-container {
    width: 100%;
    height: 83px;
    background: #191919;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border:1px solid rgba(128,128,128,.5);
  }

  .header-left-box {
    width: 220px;
    height: 100%;
  }

    .header-left-box .header-btn-menu {
      color: #fff;
      font-size: 24px;
      margin-right: 20px;
      cursor: pointer;
    }

    .header-left-box img {
      width: 140px;
    }

  .header-right-box {
    width: 270px;
    border-left: 2px solid #595959;
    margin: 20px;
  }

    .header-right-box .ivu-icon {
      font-size: 28px;
      color: #d0d0d0;
      cursor: pointer;
    }

    .header-right-box img {
      width: 40px;
      border-radius: 50%;
      border: 2px solid #595959;
    }


  .drawer-header {
    height: 83px;
    width: 100%;
    background: #000;
  }

    .drawer-header .header-btn-menu {
      color: #fff;
      font-size: 22px;
      margin-right: 20px;
      cursor: pointer;
      background:#afafaf;
      border-radius:50%;
      padding:5px;
    }

    .drawer-header img {
      width: 140px;
      margin-top:4px;
      margin-right:3px;
    }
  .drawer-body {
    margin-top:50px;
  }

  .drawer-body .drawer-menu-item {
    width:100%;
  }

  .drawer-body .drawer-menu-item .drawer-menu-top {
    width:100%;
    height:10px;
  }
  .drawer-body .drawer-menu-item .drawer-menu-top img {
    width:20px;
  }
  .drawer-body .drawer-menu-item .drawer-menu-name {
    color:#b5b5b5;
    font-size:16px;
    font-weight:bolder;
    margin-left:20px;
    margin-top:7px;
    letter-spacing:1px;
  }

    .drawer-body .drawer-menu-bottom {
      width:100%;
      padding:20px 10px;
      margin:20px 0;
      background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50% , rgba(110,110,110,.4) 100%);
    }

    .drawer-body .drawer-menu-bottom ul {
      list-style:none;
      width:100%;
      padding-left:80px;
    }

    .drawer-body .drawer-menu-bottom ul li {
      padding:8px 0;
      width:100%;
      font-size:14px;
      font-weight:bold;
      color:#8a8a8a;
      cursor:pointer;
    }

  .fl-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fl-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
</style>

<style>

/*修改iview抽屉样式*/
  .drawer-container .ivu-drawer-left{
    background: #000;
    font-family:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Microsoft JhengHei' !important;
  }

  .drawer-container .ivu-drawer-header {
    padding: 0;
    border:none;
  }
  .drawer-container .ivu-drawer-content {
    background: #000;
  }
  .drawer-container .ivu-drawer-body {
    padding: 0;
  }

/*重绘滚动条样式*/
  .scrollstyle::-webkit-scrollbar {
    width: 5px;
  }
  .ivu-drawer-body::-webkit-scrollbar-track{
    display:none;
  }
  .scrollstyle::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #94998a;
  }
  .scrollstyle::-webkit-scrollbar-thumb:hover {
    /*background: #555;*/
  }
  .scrollstyle::-webkit-scrollbar-button {
    display: none;
  }
    
</style>

