<template>
  <span class="i-layout-menu-side-title">
    <span class="i-layout-menu-side-title-icon" :class="{ 'i-layout-menu-side-title-icon-single': hideTitle }" v-if="withIcon">
      <Icon :type="menu.icon" v-if="menu.icon" />
      <Icon :custom="menu.custom" v-else-if="menu.custom" />
      <img :src="menu.img" v-else-if="menu.img" />
    </span>
    <span
      class="i-layout-menu-side-title-text"
      :class="{
        'i-layout-menu-side-title-text-selected': selected,
        'i-layout-menu-side-title-text-with-subtitle':
          (this.layout.showI18n && !!(this.$t('Permission_' + menu.code + '_SubName') || '').trim()) || (!this.layout.showI18n && !!(menu.subTitle || '').trim()),
        'i-layout-menu-side-title-text-with-icon': withIcon
      }"
      v-if="!hideTitle"
    >
      {{ this.layout.showI18n ? this.$t('Permission_' + menu.code) : menu.title }}
      <em v-if="layout.showI18n && !!($t('Permission_' + menu.code + '_SubName') || '').trim()">{{ $t('Permission_' + menu.code + '_SubName') }}</em>
      <em v-if="!layout.showI18n && !!(menu.subTitle || '').trim()">{{ menu.subTitle }}</em>
    </span>
  </span>
</template>
<script>
  import mixinPage from '../../../mixins/page';
  // import tTitle from '../mixins/translate-title';

  export default {
    name: 'iMenuSideTitle',
    mixins: [mixinPage],
    props: {
      menu: {
        type: Object,
        default() {
          return {};
        }
      },
      hideTitle: {
        type: Boolean,
        default: false
      },
      // 用于侧边栏收起 Dropdown 当前高亮
      selected: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      withIcon() {
        return this.menu.icon || this.menu.custom || this.menu.img;
      }
    }
  };
</script>
