<template>
  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
    <div key="collapse" class="sidebar-logo-link" to="/dashboard">
      <!-- <img v-if="logo" :src="settings.title=='电能质量监测系统'?logo:logo1" class="sidebar-logo" :style="{ width: settings.layout === 'layout1' ? '35px' : '50px',height: settings.layout === 'layout1' ? '35px' : '50px'}"> -->
       <img :src="logourl" class="sidebar-logo" :style="{ width: settings.layout === 'layout1' ? '35px' : '180px',height: settings.layout === 'layout1' ? '35px' : '50px'}">
      <!-- <svg-icon icon-class="logo" class="sidebar-logo" />  -->
      <transition name="sidebarLogoFade">
        <h1
          v-show="!collapse"
          class="sidebar-title"
          :style="{ fontSize: settings.layout === 'layout1' && settings.title.length >= 8 ? '14px' : '24px'}"
        >{{ settings.title }} <span style="font-size: 14px">(v1.0.0)</span> </h1>
      </transition>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'sidebar-logo',
    props: {
      collapse: {
        type: Boolean,
        required: true
      }
    },
    computed: {
      ...mapGetters(['settings'])
    },
    data () {
      return {
       // logo: require('../../assets/login/'+window.logo),
        logourl:window.sessionStorage.logo
      }
    },
    created(){
      // console.log(this.logourl)
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";
  .sidebarLogoFade-enter-active {
    transition: opacity 1.5s;
  }

  .sidebarLogoFade-enter,
  .sidebarLogoFade-leave-to {
    opacity: 0;
  }

  .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 60px;
    padding-left: 20px;
    overflow: hidden;
    line-height: 60px;

    & .sidebar-logo-link {
      width: 100%;
      height: 100%;

      & .sidebar-logo {
        width: 52px;
        height: 52px;
        margin-right: 8px;
        color: #fff;
        vertical-align: middle;
      }

      & .sidebar-title {
        display: inline-block;
        margin: 0;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: 600;
        line-height: 50px;
        color: #fff;
        vertical-align: middle;
      }
    }

    &.collapse {
      padding-left: 10px;
    }
  }
</style>
