<template>
  <div class="box">
    <div class="logo-container" v-if="!isCollapse">
      <img alt="" src="@/assets/csthyylogoplain.png"/>
      <h1>
        {{ systemTitle }}
        <br/>
        <span style="font-size: 12px">编码:H43010500370 </span>
      </h1>
    </div>
    <!-- 收缩按钮 -->
    <div class="collapse-icon" @click="opendStateChange">
      <el-icon>
        <Expand v-if="isCollapse"/>
        <Fold v-else/>
      </el-icon>
    </div>
  </div>
</template>

<script>
import {computed, defineComponent} 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 opendStateChange = () => {
      store.commit('app/isCollapseChange', !isCollapse.value)
    }

    return {
      isCollapse,
      systemTitle,
      opendStateChange
    }
  },
})
</script>

<style lang="scss" scoped>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 10px;
  background-color: white;

  .collapse-icon {
    margin-right: 5px;
    font-size: 26px;
    &:hover {
      background: lightgray;
      cursor: pointer;
    }
  }
}

.logo-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
  padding-left: 5px;

  img {
    width: 28px
  }

  h1 {
    font-size: 12px;
    white-space: nowrap;
    color: black;
    margin-left: 5px;
  }
}
</style>
