<template>
  <div class="logo" :class="{ 'logo-collapsed': collapsed }">
    <div class="logo-content">
      <div class="logo-icon">🏔️</div>
      <h1 v-if="showTitle && !collapsed" class="logo-title">{{ title }}</h1>
    </div>
  </div>
</template>

<script>
  import { mixin } from '@/utils/mixin.js'

  export default {
    name: 'Logo',
    mixins: [mixin],
    props: {
      title: {
        type: String,
        default: window.SYS_TITLE,
        required: false
      },
      showTitle: {
        type: Boolean,
        default: true,
        required: false
      },
      collapsed: {
        type: Boolean,
        default: false,
        required: false
      }
    }
  }
</script>
<style lang="less" scoped>
  @height: 49px;

  .logo {
    color: #ffffff;
    height: @height !important;
    line-height: @height !important;
    box-shadow: none !important;
    transition: all 300ms ease;
    background: linear-gradient(135deg, #001a3a 0%, #003d82 100%);
    padding: 0 12px;
    overflow: hidden;
    white-space: nowrap;
    
    .logo-content {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      overflow: hidden;
      
      .logo-icon {
        font-size: 22px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
      }
      
      .logo-title {
        font-size: 14px;
        color: #ffffff;
        margin: 0 0 0 8px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 1;
        transition: opacity 300ms ease;
      }
    }
    
    // 折叠状态：只显示图标居中
    &.logo-collapsed {
      padding: 0;
      
      .logo-content {
        justify-content: center;
      }
    }

    a {
      color: white;
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  .sider {
    box-shadow: none !important;
    
    &.light .logo {
      background: linear-gradient(135deg, @primary-color 0%, #096dd9 100%);
    }
  }
</style>