<template>
  <div
    :class="'logo-container-horizontal'"
    :style="{ background: variables[`${style}-menu-background`] }"
  >
    <div class="app-title__wrap">
      <div class="app-title">
        <div class="app-left">
          <div
            class="app-left__wrap"
            :style="{
              background: getIconBkColor(appInfo.iconColor),
            }"
          >
            <el-image
              v-if="appInfo.icon && appInfo.icon.indexOf('icon') < 0"
              :src="appInfo.icon"
              :style="{
                background: getIconBkColor(appInfo.iconColor),
              }"
              style="height: 32px; width: 32px"
            ></el-image>
            <i
              v-else
              :class="appInfo.icon || 'el-icon-house'"
              class="app-icon"
            ></i>
          </div>
        </div>

        <span
          v-show="!collapse"
          class="title"
          :class="{ 'hidden-xs-only': layout === 'horizontal' }"
          :title="appInfo.name"
        >
          {{ appInfo.name }}
        </span>
      </div>

      <center v-show="!collapse" open-type="router">
        <!-- <i
          class="icon-gongzuotai_nor switch-app-icon"
          style="cursor: pointer"
        ></i> -->

        <i class="iconMune" style="cursor: pointer; margin: 2px 0 0 16px">
          <img
            :src="`data:image/svg+xml;base64,${src}`"
            alt=""
            width="18"
            height="18"
          />
        </i>
      </center>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import variables from '@/styles/variables.scss'
  import Center from '../center/index.vue'
  import { yyzx } from '@/icon/index.js'
  export default {
    name: 'AppLogo',
    components: {
      Center,
    },
    data() {
      return {
        title: '',
        logoImgInfo: [],
        src: yyzx,
      }
    },
    computed: {
      ...mapGetters({
        appInfo: 'app/appInfo',
        style: 'app/style',
        layout: 'app/layout',
        themeColor: 'app/themeColor',
        collapse: 'settings/collapse',
      }),
      variables() {
        return variables
      },
      logoImgURL() {
        return localStorage.getItem('frontLogo')
      },
    },
    created() {
      this.title = this.$baseTitle
    },
    methods: {
      //获取图标背景色
      getIconBkColor(iconColor) {
        if (iconColor) {
          return iconColor
        }
        return this.themeColor || '#1339E0'
      },
    },
  }
</script>
<style lang="scss" scoped>
  @mixin container {
    position: relative;
    height: $base-top-bar-height;
    overflow: hidden;
    line-height: $base-top-bar-height;
    // background: $base-menu-background;
  }

  @mixin logo {
    display: inline-block;
    width: $base-logo-icon-width;
    height: $base-logo-icon-height;
    margin-right: 12px;
    color: var(--themeColor);
    vertical-align: middle;
  }

  @mixin title {
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    color: #333333;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-family: Source Han Sans SC-Medium, Source Han Sans SC;
    font-weight: 500;
  }

  .logo-container-horizontal {
    @include container;

    .logo {
      @include logo;
    }

    .title {
      @include title;
      width: 96px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .app-title__wrap {
      display: flex;
      padding: 0 20px;
      justify-content: space-between;

      .app-title {
        display: flex;
        align-items: center;
        .title {
          color: var(--themeColor) !important;
        }
      }

      .app-left {
        height: 60px;
        display: flex;
        align-items: center;

        .app-left__wrap {
          width: 32px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 8px;
          margin-right: 4px;
          flex-shrink: 0;

          .app-icon {
            font-size: 24px;
            color: #fff;
          }
        }
      }
    }
  }

  .logo-container-vertical {
    @include container;

    height: $base-logo-height;
    line-height: $base-logo-height;
    text-align: left;
    padding: 0 20px;
    .logo {
      @include logo;
    }

    .title {
      @include title;

      max-width: calc(#{$base-left-menu-width} - 60px);
    }
  }

  .logoImg {
    width: 168px;
    height: $base-logo-height;
    ::v-deep.el-image {
      width: 100%;
      height: 100%;
    }
  }

  .switch-app-icon {
    font-size: 16px;
  }
</style>