<template>
<el-aside :style="[obj.sidebarStyle]">
  <el-menu :default-active="defaultActive" :collapse="obj.status">
    <el-submenu index="1">
      <template slot="title"><i class="el-icon-self-new"></i><span slot="title">文章管理</span></template>
      <el-menu-item index="1-1" @click="goPages('1-1')">添加文章</el-menu-item>
      <el-menu-item index="1-2" @click="goPages('1-2')">文章列表</el-menu-item>
    </el-submenu>
    <el-menu-item index="2" @click="goPages('2')">
      <i class="el-icon-self-statistic"></i><span slot="title">网站统计</span>
    </el-menu-item>
    <el-menu-item index="3" @click="goPages('3')">
      <i class="el-icon-self-album"></i><span slot="title">内容管理</span>
    </el-menu-item>
    <el-menu-item index="4" @click="goPages('4')">
      <i class="el-icon-self-discover"></i><span slot="title">SEO管理</span>
    </el-menu-item>
    <el-menu-item index="99" @click="goPages('99')">
      <i class="el-icon-self-settings"></i><span slot="title">账号管理</span>
    </el-menu-item>
  </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>
export default {
  props: {
    /**
     * 详细参数，请查看 app.vue
     */
    obj: { type: Object, require: true }
  },
  data () {
    let _path = this.$GlobalVariable.siderbar.defaultPath
    let defaultActive = ''
    switch (_path) {
      case '/app/news/add-news': defaultActive = '1-1'; break
      case '/app/news/news-list': defaultActive = '1-2'; break
      case '/app/website/site-show': defaultActive = '2'; break
      case '/app/content/content-list': defaultActive = '3'; break
      case '/app/content/add-carousel': defaultActive = '3'; break
      case '/app/seo/page-list': defaultActive = '4'; break
      case '/app/account/set-pwd': defaultActive = '99'; break
    }
    return {
      defaultActive: defaultActive
    }
  },
  methods: {
    goPages (str) {
      switch (str) {
        case '1-1': this.$router.push({ path: '/app/news/add-news' }); break
        case '1-2': this.$router.push({ path: '/app/news/news-list' }); break
        case '2': this.$router.push({ path: '/app/website/site-show' }); break
        case '3': this.$router.push({ path: '/app/content/content-list' }); break
        case '4': this.$router.push({ path: '/app/seo/page-list' }); break
        case '99': this.$router.push({ path: '/app/account/set-pwd' }); break
      }
    },
    /* 侧边栏 拖拽条按下并移动前 */
    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-submenu {
    .el-menu-item {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: auto;
    }
  }
}
/* 侧边栏 拖拽条 */
.side-move {
  position: absolute;
  z-index: 999;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
}
</style>

