<template>
  <div
    :class="'logo-container-' + layout"
  >
    <router-link to="/">
      <div v-if="logoImgURL" class="logoImg">
        <el-image :src="logoImgURL" fit="contain"></el-image>
      </div>
      <div v-else class="logoImg">
          <el-image :src="logoImg"  />
      </div>
<!--      <div v-else >-->
<!--        <img :src="logoImg"  class="logo" />-->
<!--        <span-->
<!--          class="title"-->
<!--          :class="{ 'hidden-xs-only': layout === 'horizontal' }"-->
<!--          :title="title"-->
<!--        >-->
<!--                  {{ title }}-->
<!--                </span>-->

<!--      </div>-->
    </router-link>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import variables from '@/styles/variables.scss'
  import { fileUrl } from '@/api/portal'
  import { getTenantInfo } from '@/api/uc'
  export default {
    name: 'HtLogo',
    data() {
      return {
        title: '',
        logoImgInfo: [],
        logoImg: require('@/assets/login_images/logo.png'),
      }
    },
    computed: {
      ...mapGetters({
        logo: 'settings/logo',
        layout: 'settings/layout',
        style: 'settings/style',
      }),
      variables() {
        return variables
      },
      tenant() {
        return this.$route.query?.tenant || 'platform'
      },
      logoImgURL() {
        return localStorage.getItem('frontLogo')
      },
    },
    created() {
      this.title = this.$baseTitle
      // this.getTenantInfoByCode()
    },
    methods: {
      getTenantInfoByCode() {
        getTenantInfo(this.tenant)
          .then((res) => {
            const { frontLogo } = res.value
            // localStorage.setItem('frontLogo', frontLogo)
            if (!frontLogo) return
            this.logoImgInfo = JSON.parse(frontLogo)
            this.logoImgURL = fileUrl(this.logoImgInfo[0].id)
          })
          .catch((e) => {
            console.error(e)
          })
      },
    },
  }
</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: 22px;
    line-height: 55px;
    font-weight: bold;
    color: var(--themeColor);
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .logo-container-horizontal {
    @include container;

    .logo {
      @include logo;
    }

    .title {
      @include title;
    }
  }

  .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%;
    }
  }
</style>
