<template>
  <div class="logo-container">
    <Row>
      <Col :span="isCollapse?24:5" class="login-posi">
        <img src="@/assets/AYN.png" style="width:70%;" alt="">
      </Col>
      <Col span="19" v-if="!isCollapse">
        <h1>{{ systemTitle }}</h1>
      </Col>
    </Row>
  </div>
</template>

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

<style lang="scss" scoped>
  .logo-container {
    height: 60px;
    width: 100%;
    background-color: var(--system-logo-background);
    .login-posi{
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    h1 {
      font-size: 20px;
      white-space: nowrap;
      color: var(--system-logo-color);
    }
  }
</style>