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

<script>
import { defineComponent, computed, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { systemTitle } from '@/config'
export default defineComponent({
  setup() {
    const store = useStore()
    const isCollapse = computed(() => store.state.app.isCollapse)
    const logoStyle = computed(() => {
      return {
        width: '60px',
        marginLeft: isCollapse.value ? '0' : '12px',
      }
    })
    return {
      isCollapse,
      logoStyle,
      systemTitle,
    }
  },
})
</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);
  background-color: white;
  h1 {
    font-size: 20px;
    white-space: nowrap;
    // color: var(--system-logo-color);
    color: black;
    margin-left: 12px;
  }
}
</style>
