//个人中心侧边栏
<template>
  <div class="HtPerSideBar">
    <template v-for="(route, i) in perList">
      <div
        class="item_content"
        @click="handleSelect(route)"
        :class="active == route.alias ? 'item_content_active' : ''"
      >
        {{ route.meta.title }}
      </div>
    </template>
  </div>
</template>

<script>
  import variables from '@/styles/variables.scss'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        perList: [],
        defaultPerMun: ['security', 'information', 'Setting'],
        newRoutes: [],
        information: {
          alias: 'information',
          type: 'page',
          path: '/personal/information',
          meta: {
            isChildren: true,
            menuLevel: 'first',
            title: '个人信息',
          },
        },
        active: '',
      }
    },
    mounted() {
      let li = []
      this.newRoutes = _.cloneDeep(
        this.routes.filter((item) => {
          return item.path.indexOf('/personal') > -1
        })
      )

      if (
        this.newRoutes &&
        this.newRoutes[0] &&
        this.newRoutes[0].children &&
        this.newRoutes[0].children.length > 0
      ) {
        this.newRoutes[0].children.forEach((item) => {
          this.defaultPerMun.forEach((its) => {
            if (item.alias == its) {
              li.push(item)
            }
          })
        })
        this.perList = li

        this.perList.forEach((item) => {
          item.path = '/personal/' + item.alias.toLowerCase()
        })
      }
      //添加个人信息
      this.perList.some((item) => {
        return item.alias == 'information'
      })
        ? ''
        : this.perList.unshift(this.information)
      if (this.perList.length > 0) {
        this.handleSelect(this.perList[0])
      }
      this.$emit('perList', this.perList)
    },
    computed: {
      ...mapGetters({
        collapse: 'settings/collapse',
        style: 'settings/style',
        routes: 'routes/routes',
        themeColor: 'settings/themeColor',
      }),
      activeMenu() {
        const route = this.$route
        const { meta, path } = route
        if (meta.activeMenu) {
          return meta.activeMenu
        }
        return path
      },

      variables() {
        return variables
      },
    },
    methods: {
      handleSelect(key) {
        this.active = key.alias
        this.$emit('alis', key.alias)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .HtPerSideBar {
    margin-right: 16px;
    width: 200px;
    border-radius: 12px 12px 12px 12px;
    height: calc(100% - 48px);
    padding: 24px 8px;
    border-radius: 12px;
    border-right: none;
    background: $base-color-white !important;
    ::v-deep {
      .el-menu {
        margin: 24px 8px;
        border-radius: 12px;
        border-right: none;
        .el-menu-item {
          height: 48px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .is-active {
          background: #ebf5ff !important;
          border-radius: 8px 8px 8px 8px;
          &:hover {
            background: #ebf5ff !important;
          }
        }
      }
    }
  }
  .item_content {
    height: 48px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 56px;
    font-size: 14px;
    padding: 0 20px;
    list-style: none;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 0;
  }
  .item_content_active {
    border-radius: 8px 8px 8px 8px;
    color: var(--themeColor) !important;
    background: #ebf5ff !important;
  }
</style>