<template>
  <div class="other-portals">
    <ul
      class="portals"
      :class="[layout === 'vertical' ? 'is-horizontal' : 'is-vertical']"
      :style="{ '--topPortalColor': variables[`${style}-portal-color`] }"
    >
      <li
        v-for="(item, index) in otherPortalList"
        :key="index"
        class="portals-item"
        :class="{ 'is-active': index === currentIndex }"
        @click="handleOtherPortal(index)"
      >
        <ht-icon :name="item.iconName" class="ht-icon"></ht-icon>
        <span class="other-portal-name">
          {{ item.name }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import variables from '@/styles/variables.scss'
  export default {
    name: 'HtOtherPortals',
    data() {
      return {
        otherPortalList: [
          {
            name: '门户',
            iconName: 'home',
          },
          {
            name: '财务系统',
            iconName: 'matterCenter',
          },
          {
            name: '人事系统',
            iconName: 'user',
          },
        ],
        currentIndex: null,
      }
    },
    computed: {
      ...mapGetters({
        layout: 'settings/layout',
        style: 'settings/style',
      }),
      variables() {
        return variables
      },
    },
    methods: {
      handleOtherPortal(index) {
        this.currentIndex = index
      },
    },
  }
</script>

<style lang="scss" scoped>
  @mixin portal-hover-or-active {
    color: var(--themeColor);
  }
  .other-portals {
    .portals {
      list-style: none;
      font-size: $base-font-size-big;
      .portals-item {
        cursor: pointer;
        color: var(--topPortalColor);
        &:hover {
          @include portal-hover-or-active;
        }
        .other-portal-name {
          white-space: nowrap;
        }
      }
      .is-active {
        @include portal-hover-or-active;
      }
    }
    .is-vertical {
      display: flex;
      flex-direction: column;
      .portals-item {
        padding: 0 16px 48px 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        &:first-child {
          padding-top: 27px;
        }
        .ht-icon {
          padding-right: 14px;
          vertical-align: -0.1em;
        }
      }
    }
    .is-horizontal {
      display: flex;
      flex-direction: row;
      padding-left: 43px;
      height: $base-top-bar-height;
      line-height: $base-top-bar-height;
      .portals-item {
        padding-right: 46px;
        .ht-icon {
          width: 18px;
          height: 18px;
          padding-right: 10px;
          vertical-align: -0.1em;
        }
      }
    }
  }
</style>
