<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">{{ $t('components.learnSysLayout.sideBar.updatePic') }}</div>
          <template v-if="UserInfo.avatar">
            <img :src="UserInfo.avatar" :alt="$t('components.learnSysLayout.sideBar.updateAvatar')" />
          </template>
          <template v-else>
            <img
              style="border-radius: 0;"
              src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/weapp/share/paa/paa-learn-logo.png"
              :alt="$t('components.learnSysLayout.sideBar.updateAvatar')"
            />
          </template>
        </div>
        <el-button type="text" class="com-txt set-pwd" @click="goSetPwd">{{
          $t('components.learnSysLayout.sideBar.updatePwd')
        }}</el-button>
        <el-button type="text" class="com-txt out-login" @click="goOutLogin">{{
          $t('components.learnSysLayout.sideBar.outLogin')
        }}</el-button>
      </el-menu-item>
      <template v-for="(item, index) in headerData">
        <template v-if="item.children && item.children.length > 0">
          <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>
          <template v-if="item.index === '3'">
            <el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)" v-if="isExamination">
              <i :class="item.iconClass"></i><span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </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>
      </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 '@action'

export default {
  props: {
    /**
     * 详细参数，请查看 app.vue
     */
    obj: { type: Object, require: true }
  },
  data() {
    const _global = this.$GLOBAL
    const _path = (_global && _global.sidebar && _global.sidebar.defaultPath) || this.$route.path || '/'
    let defaultActive = ''
    switch (_path) {
      case '/app/tips/learning-tips':
        defaultActive = '1-1'
        break
      case '/app/tips/examina-tips':
        defaultActive = '1-2'
        break
      case '/app/learn/course':
        defaultActive = '2'
        break
      case '/app/examination/my-examination':
        defaultActive = '3'
        break
    }
    return {
      isExamination: !!parseInt(window.G.UserInfo.student_info.is_open_examination),
      UserInfo: (_global && _global.UserInfo) || {},
      defaultActive: defaultActive,
      headerData: [
        // {
        //   name: '学员须知',
        //   iconClass: 'el-icon-self-xuexi-',
        //   index: '1',
        //   children: [
        //     { name: '学习须知', index: '1-1' },
        //     { name: '考前须知', index: '1-2' }
        //     // { name: this.$t('components.learnSysLayout.sideBar.header1Child3'), index: '1-3' }
        //   ]
        // },
        // {
        //   name: this.$t('components.learnSysLayout.sideBar.header2'),
        //   iconClass: 'el-icon-self-grade',
        //   index: '2',
        //   children: [
        //     { name: this.$t('components.learnSysLayout.sideBar.header2Child1'), index: '2-1' }
        //   ]
        // },
        // {
        //   name: this.$t('components.learnSysLayout.sideBar.header3'),
        //   iconClass: 'el-icon-self-fankuiyijian',
        //   index: '4'
        // },
        {
          name: '我的学习',
          iconClass: 'el-icon-self-grade',
          index: '2'
        }
        // {
        //   name: '我的考试',
        //   iconClass: 'el-icon-self-fankuiyijian',
        //   index: '3'
        // }
      ]
    }
  },
  mounted() {
    this.defineEvent()
    // this.showHeaderData()
  },
  methods: {
    arrHeader(arr) {
      var newArr = []
      arr.map(k => {
        newArr.push({
          name: k.name,
          iconClass: k.iconClass,
          index: k.index,
          children: []
        })
        return arr
      })
      return newArr
    },
    showHeaderData() {
      const isOpenExamination = this.UserInfo.student_info.is_open_learning_notes || null
      const isOpenExaminationNotes = this.UserInfo.student_info.is_open_examination_notes || null

      const isOpenTextbookLearning = this.UserInfo.student_info.is_open_textbook_learning || null
      const isOpenRequiredCourse = this.UserInfo.student_info.is_open_required_course || null
      const isOpenXxtendedCourse = this.UserInfo.student_info.is_open_extended_course || null

      var arrList = []
      var obj
      if (
        Number(isOpenExamination) === 0 &&
        Number(isOpenExaminationNotes) === 0 &&
        (Number(isOpenTextbookLearning) || Number(isOpenRequiredCourse) || Number(isOpenXxtendedCourse))
      ) {
        this.headerData = this.arrHeader(this.headerData).filter(k => k.index !== '1')
        if (this.defaultActive === '1-1' || this.defaultActive === '1-2') {
          this.defaultActive = '2'
          this.$router.push({ path: '/app/learn/course' })
        }
      } else if (Number(isOpenExamination) === 1 && !Number(isOpenExaminationNotes)) {
        obj = { name: '学习须知', index: '1-1' }
        if (Number(isOpenTextbookLearning) || Number(isOpenRequiredCourse) || Number(isOpenXxtendedCourse)) {
          arrList = this.arrHeader(this.headerData)
        } else {
          arrList = this.arrHeader(this.headerData).filter(k => k.index !== '2')
        }
        arrList[0].children.push(obj)
        this.headerData = arrList
      } else if (Number(isOpenExaminationNotes) === 1 && !Number(isOpenExamination)) {
        obj = { name: '考前须知', index: '1-2' }
        if (Number(isOpenTextbookLearning) || Number(isOpenRequiredCourse) || Number(isOpenXxtendedCourse)) {
          arrList = this.arrHeader(this.headerData)
        } else {
          arrList = this.arrHeader(this.headerData).filter(k => k.index !== '2')
        }
        arrList[0].children.push(obj)
        this.headerData = arrList
        if (this.defaultActive === '1-1') {
          this.defaultActive = '1-2'
          this.$router.push({ path: '/app/tips/examina-tips' })
        }
      } else if (Number(isOpenExaminationNotes) === 1 && Number(isOpenExamination) === 1) {
        obj = [
          { name: '学习须知', index: '1-1' },
          { name: '考前须知', index: '1-2' }
        ]
        if (Number(isOpenTextbookLearning) || Number(isOpenRequiredCourse) || Number(isOpenXxtendedCourse)) {
          arrList = this.arrHeader(this.headerData)
        } else {
          arrList = this.arrHeader(this.headerData).filter(k => k.index !== '2')
        }
        obj.forEach(item => {
          arrList[0].children.push(item)
        })
        this.headerData = arrList
      } else if (!Number(isOpenTextbookLearning) && !Number(isOpenRequiredCourse) && !Number(isOpenXxtendedCourse)) {
        if (this.isExamination) {
          this.headerData = this.headerData.filter(k => k.index === '3')
          this.defaultActive = '3'
          this.$router.push({ path: '/app/examination/my-examination' })
        } else {
          this.headerData = []
          this.$router.push({ path: '/empty' })
        }
      }
    },
    goPages(str) {
      switch (str) {
        case '1-1':
          this.$router.push({ path: '/app/tips/learning-tips' })
          break
        case '1-2':
          this.$router.push({ path: '/app/tips/examina-tips' })
          break
        case '2':
          this.$router.push({ path: '/app/learn/course' })
          break
        case '3':
          this.$router.push({ path: '/app/examination/my-examination' })
          break
      }
    },
    /* 修改头像 - 跳转方法 */
    goUpdatePic() {
      this.$router.push({ path: '/app/other/update-pic' })
    },
    /* 修改密码 - 跳转方法 */
    goSetPwd() {
      this.$router.push({ path: '/app/other/set-pwd' })
    },
    /* 退出登录 - 跳转方法 */
    goOutLogin() {
      cAction.Other.outLogin()
        .then(str => {
          window.G.UserInfo = {}
          // this.$router.push({ path: '/login/index' })
          window.location.href = webConf.others.loginUrl
        })
        .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-menu-item {
    text-align: center;
    i {
      margin-left: -35px;
    }
  }
  .el-submenu {
    text-align: center;
    font-size: 18px;
    color: #333333;
    i {
      margin-left: -35px;
    }
    .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: 10px;
    overflow: hidden;
    text-align: center;
    .pic {
      position: relative;
      margin-bottom: 0;
      img {
        display: block;
        margin: 0 auto;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
      }
      &: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;
}
.com-txt {
  color: #999999;
  font-size: 14px;
}
.el-menu-item.is-active {
  color: #71c0ff;
}

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