<template>
  <div class="app-top-menus">
    <div v-for="(menu,index) in menus" :key="index" class="app-top-menu-item text" @click="openWindow(menu)">
      <div class="app-top-menu-item-icon">
        <i :class="menu.iconcls" :aria-hidden="true" />
      </div>
      <div class="app-top-menu-item-text">{{$t(menu.title)}}</div>

    </div>
  </div> 
</template>

<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
import { Subject } from "rxjs";
import { Environment } from '@/environments/environment';

@Component({
})
export default class AppTopMenus extends Vue {

  /**
   * 菜单数据
   * 
   * @type {any}
   * @memberof AppTopMenus
   */
  public menus:any = [
      {
          name: "ibizlab",
          title: "components.appHeaderMenus.ibizlab.title",
          url: Environment.ibizlabtUrl,
          iconcls: 'fa fa-home',
      },
      {
          name: "publishProject",
          title: "components.appHeaderMenus.publishProject.title",
          url: Environment.PublishProjectUrl,
          iconcls: 'fa fa-folder-open-o',
      },
      {
          name: "ibizstudio",
          title: "components.appHeaderMenus.ibizstudio.title",
          url: `${Environment.StudioUrl}?#/common_slnindex/srfkeys=${Environment.SlnId}/sysdesign_psdevslnsysmodeltreeexpview`,
          iconcls: 'fa fa-wrench',
      },
      {
          name: "ibizbbs",
          title: "components.appHeaderMenus.ibizbbs.title",
          url: Environment.ibizbbstUrl,
          iconcls: 'fa fa-comments-o',
      },
  ];

  /**
   * 触发界面行为
   * 
   * @memberof AppTopMenus
   */
  public openWindow(menu:any){
      window.open(menu.url, '_blank');
  }


}
</script>

<style lang='less'>
@import "./app-top-menus.less";
</style>