<template>
  <div class="logo">
    <router-link :to="{name:'index'}">
      <!-- <LogoSvg alt="logo" /> -->
      <!-- <img :src="LogoSvg" /> -->
      <img :src="logo" alt="logo" height="42" class="img_box"/>
      <!-- <h1 v-if="showTitle">{{ title }}</h1> -->
    </router-link>
  </div>
</template>

<script>
import LogoMax from '@/assets/normalbtn_login.png'
import LogoMin from '@/assets/selectedbtn_login.png'
import LogoLightMax from '@/assets/lightMaxLogo.png'
import LogoLightMin from '@/assets/lightMiniLogo.png'
import { mapState } from 'vuex'
export default {
  name: 'Logo',
  components: {
    // LogoSvg
  },
  props: {
    title: {
      type: String,
      default: process.env.VUE_APP_PRO_NAME,
      required: false
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  data () {
    return {
      // LogoSvg: LogoSvg,
      // logo: LogoSvg //  logo
    }
  },
  computed: {
	  ...mapState({
		  sidebar: state => state.app.sidebar,
      navTheme: state => state.app.theme
	  }),
	 logo () {
      return this.sidebar ? (this.navTheme == 'light' ? LogoLightMax : LogoMax) : (this.navTheme == 'light' ? LogoLightMin : LogoMin)
	 }
  }
}
</script>
<style lang="less" scoped="scoped">
	.logo{
		padding-right: 10px;
		img{
			width: auto !important;
			height: auto !important;
			max-width: 100%;
			max-height: 100%;
		}
	}

</style>
