<!--
 * @Author: 曹捷
 * @Date: 2020-06-02 09:11:01
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-10-21 16:35:00
 * @Description: 菜单Logo  大小图标 两种
--> 
<template>
  <div :class="{ collapse: collapse }" :style="{width:width}" class="sidebar-logo-container">
    <!-- 两种模式  -->
    <!-- 展示大图小图 -->
    <router-link class="sidebar-logo-link" key="collapse" to="/" v-if="logo.mixLogo">
      <img class="sidebar-logo  animate__animated animate__flipInX" v-if="collapse" :src="logo.mixLogo " />
      <img class="sidebar-logo   animate__animated animate__flipInX" v-if="!collapse" :src="logo.maxLogo" />
    </router-link>
    <router-link class="sidebar-logo-link obit-logo-text" key="collapse" to="/" v-if="logo.icon">
      <i class="iconfont animate__animated animate__lightSpeedInLeft" :class="logo.icon"></i>
      <span v-show="!collapse" class="logo-title animate__animated animate__lightSpeedInLeft">{{logo.title||'OBIT'}}</span>
    </router-link>
  </div>
</template>

<script>
import { computed, nextTick, onMounted, reactive, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'SidebarLogo',
  setup () {
    let store = useStore()
    let logo = computed(() => store.state.settings.logo)
    let collapse = computed(() => {
      if (store.state.settings.logo.trigger) {
        return store.state.settings.menu.opened
      } else {
        return false
      }
    })
    let _data = reactive({
      width: '100%'
    })
    const sysnWidth = () => {
      setTimeout(() => {
        nextTick(() => {
          if (store.state.settings.logo.trigger) {
            let leftDom = document.getElementById('left-menu')
            if (leftDom) {
              _data.width = leftDom.offsetWidth + 'px'
            }

          }
        })
        // 菜单动画是200ms 兼顾下性能问题
      }, 300);
    }
    watch(() => store.state.settings.menu.opened, sysnWidth)
    onMounted(() => {
      sysnWidth()
    })
    return {
      ...toRefs(_data),
      logo, collapse
    }
  }
}
</script>

<style lang="less" scoped>
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

.left-menu {
  .sidebar-logo-container {
    width: 100%;
  }
}
.obit-logo-text {
  color: @headColor;
  display: flex;
  justify-content: center;
  align-items: center;
  .iconfont {
    font-size: 28px;
  }
  .logo-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    padding-left: 12px;
  }
}
.sidebar-logo-container {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  // overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;
    text-align: left;

    & .sidebar-logo {
      width: 80%;
      height: 100%;
      vertical-align: middle;
      // margin-left: 20px;
      object-fit: contain;
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }
  &.collapse {
    & .sidebar-logo-link {
      text-align: center;
    }
    .sidebar-logo {
      margin-right: 0px;
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-left: 0;
    }
  }
}
</style>
