<template>
  <div class="logo-container">
    <img v-if="showLogo" src="@/assets/logo.png" alt="">
    <h1 v-if="!isCollapse">{{ systemSubTitle }}</h1>
  </div>
</template>

<script lang="js">
  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex'
  import { showLogo, systemTitle, systemSubTitle } from '@/config'
  export default defineComponent({
    setup() {
      const store = useStore()
      const isCollapse = computed(() => store.state.app.isCollapse)
      return {
        showLogo,
        isCollapse,
        systemTitle,
        systemSubTitle
      }
    }
  })
</script>

<style lang="scss" scoped>
  .logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--system-logo-background);

    img {
      height: 30px;
      width: 30px;
    }

    h1 {
      margin-left: 10px;
      font-size: 18px;
      white-space: nowrap;
      color: var(--system-logo-color);
    }
  }
</style>