<template>
  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
    <transition name="sidebarLogoFade">
      <router-link key="collapse" class="sidebar-logo-link" to="/">
        <template v-if="sysHeaderInfo.isShowLogos">
          <img :src="sysHeaderInfo.logoUrls" class="sidebar-logo-1" >
        </template>
        <template v-else>
          <!-- <img :src="sysHeaderInfo.logoUrls" class="sidebar-logo" > -->
          <div class="describe">
            <span class="title">{{ sysHeaderInfo.logoName }}</span>
            <!-- <span class="english">{{ sysHeaderInfo.logoEName }}</span> -->
          </div>
        </template>
      </router-link>
    </transition>
  </div>
</template>

<script setup>
import variables from '@/assets/styles/variables.module.scss'
import logo from '@/assets/logo/logo.png'
import useSettingsStore from '@/store/modules/settings'
import { reactive, watchEffect } from 'vue';
const { proxy } = getCurrentInstance();

defineProps({
  collapse: {
    type: Boolean,
    required: true
  }
})

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
const {isShowLogos, logoUrls, logoName, logoEName} = JSON.parse(localStorage.getItem('sys.header.info') || '{}')
console.log(isShowLogos, logoUrls, logoName, logoEName);
const sysHeaderInfo = reactive({
  isShowLogos: isShowLogos || false,
  logoUrls: logoUrls || logo,
  logoName: logoName || '',
  logoEName: logoEName || ''
})

// const isShowLogos = ref(true) // 是否直接展示logo图片
// const logoUrls = ref(logo) // logo图片
// const logoName = ref('') // logo医院名
// const logoEName = ref('') // logo医院名英文
async function getLogoConfig() {
  let {msg: isShowLogo} = await proxy.getConfigKey("sys.header.directLogo")
  let {msg: logoUrl} = await proxy.getConfigKey("sys.header.logoUrl")
  sysHeaderInfo.logoUrls = logoUrl
  if (isShowLogo) {
    let {msg: name} = await proxy.getConfigKey("sys.header.name")
    let {msg: englishName} = await proxy.getConfigKey("sys.header.englishName")
    sysHeaderInfo.logoName = name
    sysHeaderInfo.logoEName = englishName
  }
  sysHeaderInfo.isShowLogos = JSON.parse(isShowLogo)
  localStorage.setItem('sys.header.info', JSON.stringify(sysHeaderInfo))
}

watchEffect(() => {
  getLogoConfig()
}, [])
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

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

.sidebar-logo-container {
  position: relative;
  width: auto !important;
  min-width: 200px;
  height: $base-top-height;
  // line-height: $base-top-height;
  background: #2b2f3a;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    @include flex-center;
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-right: 12px;
    }

    .sidebar-logo-1 {
      width: auto;
      max-height: 52px;
    }

    .describe {
      display: flex;
      flex-direction: column;
      margin-left: 6px;
      .title {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        text-align: justify;
        -moz-text-align-last: justify;
        text-align-last: justify;
      }
      .english {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
      }
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0px;
    }
  }
}
</style>