<template>
  <div class="pl-logo" :class="layout" @click="handleLogoClick">
    <img
      :src="currentLogo.src"
      :width="currentLogo.width"
      :height="currentLogo.height"
      :title="currentLogo.title"
    />
  </div>
</template>

<script>
import def_sy_logo from "@main/assets/logo.png";
import def_sy_logo_horizon from "@main/assets/logo_horizon.png";
import def_sy_minLogo from "@main/assets/logo_min.png";

export default {
  name: "Logo",
  props: {
    hasTitle: {
      type: Boolean,
      default: true,
    },
    logoWidth: {
      type: String,
      default: "140px",
    },
  },
  data() {
    return {
      def_sy_logo: def_sy_logo,
      def_sy_logo_horizon: def_sy_logo_horizon,
      def_sy_minLogo: def_sy_minLogo,
    };
  },
  computed: {
    layout() {
      return window.localStorage.getItem("layout");
    },
    config() {
      return this.$store.state.app.config || {};
    },
    currentLogo() {
      // 获取当前应该显示的logo配置
      const logoConfig = this.getLogoConfig();
      
      // 确定logo源文件
      let src = this.getDefaultLogo();
      if (logoConfig.src) {
        src = logoConfig.src;
      }
      
      // 计算尺寸
      let width = null;
      let height = null;
      
      if (logoConfig.width) {
        width = logoConfig.width + 'px';
      } else if (!logoConfig.height) {
        width = this.logoWidth;
      }
      
      if (logoConfig.height) {
        height = logoConfig.height + 'px';
      }
      
      return {
        src,
        width,
        height,
        title: logoConfig.title
      };
    }
  },
  methods: {
    getLogoConfig() {
      let defaultConfig = this.config.sysLogo || {};
      if (this.layout === 'level') {
        if (this.hasTitle) {
          return this.config.sysLogoHorizon || defaultConfig;
        } else {
          return this.config.MsysLogo || defaultConfig;
        }
      } else if (this.layout === 'concise') {
        return this.config.sysLogoConcise || this.config.sysLogoHorizon || defaultConfig;
      } else {
        return defaultConfig;
      }
    },
    
    getDefaultLogo() {
      if (this.layout === 'level') {
        if (this.hasTitle) {
          return this.def_sy_logo_horizon;
        } else {
          return this.def_sy_minLogo;
        }
      } else if (this.layout === 'concise') {
        return this.def_sy_logo_horizon;
      } else {
        return this.def_sy_logo;
      }
    },
    
    handleLogoClick() {
      const logoConfig = this.getLogoConfig();
      if (logoConfig && logoConfig.clickHandler) {
        logoConfig.clickHandler();
      }
    }
  },
};
</script>

<style lang="less" scoped>
.pl-logo {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0;
  padding: 0 5px;
  &.level {
    padding: 0 10px;
  }
  
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
</style>