<template>
<el-aside :style="[obj.sidebarStyle]">
  <el-menu :default-active="defaultActive" :collapse="obj.status" :default-openeds="['1', '2']" @select="curSelect">
    <el-menu-item index="0" class="my-account">
      <div class="pic" @click="goUpdatePic">
        <div class="set-pic">修改头像</div>
        <template v-if="UserInfo.avatar">
          <img :src="UserInfo.avatar" alt="人物头像">
        </template>
        <template v-else>
          <img src="../../assets/img/person-default.jpg" alt="人物头像">
        </template>
      </div>
      <el-button type="text" class="com-txt set-pwd" @click="goSetPwd">修改密码</el-button>
      <el-button type="text" class="com-txt out-login" @click="goOutLogin">退出登录</el-button>
    </el-menu-item>
    <template v-for="(item, index) in headerData">
      <template v-if="item.children">
        <el-submenu v-bind:key="index" :index="item.index">
          <template slot="title"><i :class="item.iconClass"></i><span slot="title">{{item.name}}</span></template>
          <template v-for="(_item, _index) in item.children">
            <el-menu-item v-bind:key="_index" :index="_item.index" @click="goPages(_item.index)">{{_item.name}}</el-menu-item>
          </template>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)">
          <i :class="item.iconClass"></i><span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
  <div class="side-move"
    :style="{left: (obj.isMouseDown ? 0 : (parseInt(obj.sidebarStyle.width)-2+'px')), width: (obj.isMouseDown ? obj.containerStyle.width : '5px')}"
    v-if="obj.sidebarStyle.width !== 'auto'"
    @mousedown="beforeMove"
    @mousemove="moving"
    @mouseup="afterMove"
  ></div>
</el-aside>
</template>

<script>
import cAction from '@actions'

export default {
  props: {
    /**
     * 详细参数，请查看 app.vue
     */
    obj: { type: Object, require: true }
  },
  data () {
    let _path = this.$GlobalVariable.siderbar.defaultPath
    let defaultActive = ''
    switch (_path) {
      case '/app/my-learn/course': defaultActive = '1-1'; break
      case '/app/my-learn/course-detail': defaultActive = '1-1'; break
      case '/app/my-learn/course-all': defaultActive = '0'; break
      case '/app/my-learn/discussion': defaultActive = '1-2'; break
      case '/app/my-learn/report-list': defaultActive = '1-3'; break
      case '/app/my-grade/credit': defaultActive = '2-1'; break
      case '/app/account/feedbackList': defaultActive = '3'; break
    }
    return {
      UserInfo: this.$GlobalVariable.UserInfo || {},
      defaultActive: defaultActive,
      headerData: [
        {
          name: '我的学习',
          iconClass: 'el-icon-self-xuexi-',
          index: '1',
          children: [
            { name: '我的课程', index: '1-1' },
            { name: '课程讨论', index: '1-2' },
            { name: '学术报告', index: '1-3' }
          ]
        },
        {
          name: '我的成绩',
          iconClass: 'el-icon-self-grade',
          index: '2',
          children: [
            { name: '我的学分', index: '2-1' }
          ]
        },
        {
          name: '系统反馈',
          iconClass: 'el-icon-bell',
          index: '3'
        }
      ]
    }
  },
  mounted () {
    this.defineEvent()
  },
  methods: {
    goPages (str) {
      switch (str) {
        case '1-1': this.$router.push({ path: '/app/my-learn/course' }); break
        case '1-2': this.$router.push({ path: '/app/my-learn/discussion' }); break
        case '1-3': this.$router.push({ path: '/app/my-learn/report-list' }); break
        case '2-1': this.$router.push({ path: '/app/my-grade/credit' }); break
        case '3': this.$router.push({ path: '/app/account/feedbackList' }); break
      }
    },
    /* 修改头像 - 跳转方法 */
    goUpdatePic () {
      this.$router.push({ path: '/app/account/update-pic' })
    },
    /* 修改密码 - 跳转方法 */
    goSetPwd () {
      this.$router.push({ path: '/app/account/set-pwd' })
    },
    /* 退出登录 - 跳转方法 */
    goOutLogin () {
      cAction.loginAction.outLogin().then(str => {
        if (/^login/gi.test(str)) {
          window.G.UserInfo = {}
          this.$router.push({ path: '/login/index' })
        } else {
          /* 出错 */
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
      /* 清空一下记录，然后调整到登录页 */
      // this.$router.push({ path: '/login/index' })
    },
    /* 定义监听事件 */
    defineEvent () {
      this.VueEvent.$off('can-change-sidebar').$on('can-change-sidebar', (data) => {
        this.defaultActive = data.defaultActive
      })
    },
    /* 当前菜单选中 */
    curSelect (i, p) {
      this.defaultActive = i
    },
    /* 侧边栏 拖拽条按下并移动前 */
    beforeMove (e) {
      this.obj.isMouseDown = true
      this.obj.beforeMoveInitX = parseInt(this.obj.sidebarStyle.width) - e.pageX
    },
    /* 侧边栏 拖拽条按下并移动中 */
    moving (e) {
      if (this.obj.isMouseDown) {
        this.obj.sidebarStyle.width = e.pageX + this.obj.beforeMoveInitX + 'px'
      }
    },
    /* 侧边栏 拖拽条按下并移动中 */
    afterMove () {
      this.obj.isMouseDown = false
    }
  }
}
</script>

<style scoped lang="scss">
.el-menu {
  user-select: none;
  height: 100%;
  /* 直接消失 */
  &.el-menu--collapse {
    display: none;
  }
  .el-submenu {
    .el-menu-item {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: auto;
    }
  }
  .el-menu-item.my-account {
    height: auto;
    line-height: 0;
    padding-top: 20px;
    overflow: hidden;
    text-align: center;
    .pic {
      position: relative;
      margin-bottom: 15px;
      img {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      &:hover {
        .set-pic {
          display: block;
          color: #000000;
        }
      }
      .set-pic {
        display: none;
        position: absolute;
        left: 50%;
        top: 70%;
        width: 50%;
        line-height: 2;
        color: #000000;
        background: #eeeeee4f;
        transform: translate(-50%, -50%);
      }
    }
  }
}
/* 侧边栏 拖拽条 */
.side-move {
  position: absolute;
  z-index: 999;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
}

@media (max-width: 767px) {
  // .el-aside {
    // position: fixed;
    // z-index: 99;
  // }
}
</style>

