<template>
  <div id="app">
    <mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
      <mu-list :value="default_list_title" @change="listChange" toggle-nested>
        <div v-for="(v, k) in side_menu" :key="k" >
          <mu-list-item v-if="v.sub.length"
           button :ripple="false" nested :open="open === v.title" @toggle-nested="toggleChage">
            <mu-list-item-action>
              <mu-icon value="list"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>{{ v.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="x.title" v-for="(x, key) in v.sub" :key="key" :to="x.url" @click="goTo()" active-class="is-selected">
              <mu-list-item-title>{{ x.title }}</mu-list-item-title>
            </mu-list-item>
          </mu-list-item>
          <mu-list-item v-else :value="v.title" :to="v.url" @click="goTo()" button active-class="is-selected">
            <mu-list-item-action>
              <mu-icon value="menu"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>{{ v.title }}</mu-list-item-title>
          </mu-list-item>
        </div>
      </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('register')">
            <mu-list-item-content>
              <mu-list-item-title>注册</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button @click="menuClick('404')">
            <mu-list-item-content>
              <mu-list-item-title>404</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button @click="menuClick('401')">
            <mu-list-item-content>
              <mu-list-item-title>401</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <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 v-if="default_list_title !== '首页'" style="text-align: left; margin-left: 20px; margin-bottom: 20px;">
        {{default_list_title}}
      </div>
      <div v-if="default_list_title === '首页'" style="background-color: #FFFFFF;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </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_title = localStorage.getItem('default_list_title') ? localStorage.getItem('default_list_title') : '首页';
    this.open = localStorage.getItem('default_open_menu') ? localStorage.getItem('default_open_menu') : '';
    //
    $('body').css('background', '#FAFAFA')
  },
  data () {
    return {
      default_list_title: '首页',
      menu_open: false,
      side_show: false,
      screen_width: '',
      docked: false,
      position: 'left',
      side_menu: [{
        title: '首页',
        auth: ['C', 'S'],
        sub: [],
        url: '/'
      }, {
        title: '我的管理',
        auth: ['C', 'S'],
        sub: [{
          title: '我的介绍',
          auth: ['C', 'S'],
          url: '/info'
        }, {
          title: '我的账户',
          auth: ['C'],
          url: '/account'
        }, {
          title: '关注我的',
          auth: ['C'],
          url: '/attention'
        }, {
          title: '联系信息',
          auth: ['S'],
          url: '/contact'
        }]
      }, {
        title: '课程管理',
        auth: ['C', 'P'],
        sub: [],
        url: '/class'
      }, {
        title: '视频管理',
        auth: ['C'],
        sub: [],
        url: '/video'
      }, {
        title: '讲师管理',
        auth: ['P'],
        sub: [],
        url: '/teacher'
      }, {
        title: '标签管理',
        auth: ['C'],
        sub: [{
          title: '讲师标签',
          auth: ['C'],
          url: '/teacher_tag'
        }, {
          title: '课程标签',
          auth: ['C'],
          url: '/course_tag'
        }]
      }, {
        title: '权限管理',
        auth: ['P'],
        sub: [],
        url: '/auth'
      }, {
        title: '系统参数管理',
        auth: ['P'],
        sub: [],
        url: '/parameter'
      }, {
        title: '培训机构管理',
        auth: ['P'],
        sub: [],
        url: '/organization'
      }, {
        title: '订单管理',
        auth: ['P'],
        sub: [],
        url: '/order'
      }, {
        title: '第三方接口管理',
        auth: ['P'],
        sub: [],
        url: '/api'
      }],
      open: ''
    }
  },
  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()
    },
    toggleChage (v) {
      // console.warn(v);
      // if (v) {
      //   localStorage.setItem('default_open_menu', this.open)
      // }
    },
    goTo (v) {
      this.resize($('body').width());
    },
    listChange (v) {
      //
      if (!_.isUndefined(v)) {
        this.default_list_title = v;
        localStorage.setItem('default_list_title', v);
        // 默认打开菜单栏名称
        _.each(this.side_menu, x => {
          _.each(x.sub, y => {
            if (y.title === v) {
              this.open = x.title
              localStorage.setItem('default_open_menu', x.title)
            }
          })
        })
      }
    },
    menuClick (v) {
      // 下拉菜单项选中
      this.menu_open = false;
      if (v === '404') {
        this.$router.push('/error')
      }
      if (v === '401') {
        this.$router.push('/error401')
      }
      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>