<template>
  <div id="app">
    <mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
      <mu-list :value="default_list_index" @change="listChange">
        <mu-list-item :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button active-class="is-selected">
          <mu-list-item-title>{{ v.title }}</mu-list-item-title>
        </mu-list-item>
      </mu-list>
      <mu-list :value="default_list_index" @change="listChange" toggle-nested>
        <mu-list-item button :ripple="false" nested :open="open === 'send'" @toggle-nested="open = arguments[0] ? 'send' : ''">
          <mu-list-item-action>
            <mu-icon value="send"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>展开项</mu-list-item-title>
          <mu-list-item-action>
            <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
          </mu-list-item-action>
          <mu-list-item button :ripple="false" slot="nested" :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" active-class="is-selected">
            <mu-list-item-title>{{ v.title }}</mu-list-item-title>
          </mu-list-item>
        </mu-list-item>
      </mu-list>
    </mu-drawer>
    <mu-appbar :class="['mu-appbar-header', {'is-open': side_show}]" color="primary">
      <mu-button v-if="!side_show" @click="side_show = !side_show" icon slot="left">
        <mu-icon value="menu"></mu-icon>
      </mu-button>
      <p style="text-align: left;">讲师管理系统</p>
      <!-- <mu-button flat slot="right">登录</mu-button> -->
      <mu-menu slot="right" :open.sync="menu_open">
        <mu-button flat>
          <mu-avatar :size="25" color="#FFFFFF">
            <img src="../assets/logo.png">
          </mu-avatar>
          <p v-if="side_show" style="margin-left: 10px;">牛讲师</p>
        </mu-button>
        <mu-list slot="content">
          <mu-list-item button @click="menuClick('exit')">
            <mu-list-item-content>
              <mu-list-item-title>退出</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
      </mu-menu>
    </mu-appbar>
    <div :class="['main-contain', {'is-open': side_show}]">
      <div style="text-align: left; margin-left: 20px; margin-bottom: 20px;">
        {{side_menu[default_list_index]['title']}}
      </div>
      <router-view/>
    </div>
  </div>
</template>

<script>
// import side from 'components/side'

export default {
  components: {
    // side
  },
  mounted () {
    // 屏幕宽度小于600隐藏侧边栏
    this.resize($('body').width());
    // 键盘屏幕宽度
    $(window).resize(() => {
      // 屏幕宽度小于600隐藏侧边栏
      this.resize($('body').width());
    });
    // 默认选中
    this.default_list_index = localStorage.getItem('default_list_index') ? +localStorage.getItem('default_list_index') : 0;
    //
    $('body').css('background', '#FAFAFA')
  },
  data () {
    return {
      default_list_index: 0,
      menu_open: false,
      side_show: false,
      screen_width: '',
      docked: false,
      position: 'left',
      side_menu: [{
        title: '课程管理',
        auth: '',
        url: '/'
      }, {
        title: '讲师管理',
        auth: '',
        url: '/table'
      }],
      open: 'send'
    }
  },
  methods: {
    resize (v) {
      // 屏幕宽度小于600隐藏侧边栏
      if (v <= 600) {
        this.side_show = false;
        this.docked = false;
      } else {
        this.side_show = true;
        this.docked = true;
      }
    },
    close () {
      // 关闭侧边栏
      this.side_show = false;
      $(window).resize()
    },
    goTo (v) {
      this.resize($('body').width());
    },
    listChange (v) {
      //
      if (!_.isUndefined(v)) {
        this.default_list_index = v;
        localStorage.setItem('default_list_index', v)
      }
    },
    menuClick (v) {
      // 下拉菜单项选中
      this.menu_open = false;
      if (v === 'exit') {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

.mu-appbar-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 101;
    overflow: hidden
}

.mu-appbar-header.is-open {
    left: 256px;
}

.mu-appbar-header.is-only-title .mu-appbar-title {
    margin-left: 16px
}

.main-contain {
  top: 90px;
  position: relative;
}

.main-contain.is-open {
  left: 256px;
  width: calc(100% - 256px)
}

// .mu-item.is-selected {
//     color: #2196f3;
// }

</style>