<template>
  <div
    class="sidebar-logo-container"
    :class="{'collapse':collapse}"
    :style="designStyle"
  >
    <transition name="sidebarLogoFade">
      <logo-link
        v-if="collapse"
        key="collapse"
        class="sidebar-logo-link"
        to="/"
      >
        <img
          v-if="sidebarLogo && logo.type === 'img'"
          :src="logo.src"
          class="sidebar-logo"
          :style="{minWidth: logo.logoWidth? logo.logoWidth + 'px':'32px', height: logo.logoHeight? logo.logoHeight + 'px':'32px', margin: logo.logoMargin? logo.logoMargin: '0 12px 0 0'}"
        >
        <svg-icon
          v-if="sidebarLogo && logo.type === 'svg'"
          :icon-class="logo.src"
          class-name="sidebar-logo"
          :style="{minWidth: logo.logoWidth? logo.logoWidth + 'px':'32px', height: logo.logoHeight? logo.logoHeight + 'px':'32px', margin: logo.logoMargin? logo.logoMargin: '0 12px 0 0'}"
        />
      </logo-link>
      <logo-link
        v-else
        key="expand"
        class="sidebar-logo-link"
        to="/"
      >
        <img
          v-if="sidebarLogo && logo.type === 'img'"
          :src="logo.src"
          class="sidebar-logo"
          :style="{minWidth: logo.logoWidth? logo.logoWidth + 'px':'32px', height: logo.logoHeight? logo.logoHeight + 'px':'32px', margin: logo.logoMargin? logo.logoMargin: '0 12px 0 0'}"
        >
        <svg-icon
          v-if="sidebarLogo && logo.type === 'svg'"
          :icon-class="logo.src"
          class-name="sidebar-logo"
          :style="{minWidth: logo.logoWidth? logo.logoWidth + 'px':'32px', height: logo.logoHeight? logo.logoHeight + 'px':'32px', margin: logo.logoMargin? logo.logoMargin: '0 12px 0 0'}"
        />
        <h1
          v-if="!logo.titleImg"
          class="sidebar-title"
        >{{ title }} </h1>
        <svg-icon
          v-if="logo.titleImg && logo.titleImg.endsWith('.svg')"
          :icon-class="logo.titleImg.replace('.svg', '')"
          class-name="sidebar-title-svg"
        />
        <img
          v-if="logo.titleImg && !logo.titleImg.endsWith('.svg')"
          class="sidebar-img"
          :src="logo.titleImg"
        >
      </logo-link>

      <!--      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">-->
      <!--        <img v-if="sidebarLogo && logo.type === 'img'" :src="logo.src" class="sidebar-logo">-->
      <!--        <svg-icon v-if="sidebarLogo && logo.type === 'svg'" :icon-class="logo.src" class-name="sidebar-logo" />-->
      <!--        <h1 v-else class="sidebar-title">{{ title }} </h1>-->
      <!--      </router-link>-->
      <!--      <router-link v-else key="expand" class="sidebar-logo-link" to="/">-->
      <!--        <img v-if="sidebarLogo && logo.type === 'img'" :src="logo.src" class="sidebar-logo">-->
      <!--        <svg-icon v-if="sidebarLogo && logo.type === 'svg'" :icon-class="logo.src" class-name="sidebar-logo" />-->
      <!--        <h1 class="sidebar-title">{{ title }} </h1>-->
      <!--      </router-link>-->
    </transition>
  </div>
</template>

<script>
import { logo } from '@/settings'
import LogoLink from './LogoLink'

export default {
  name: 'SidebarLogo',
  components: { LogoLink },
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      logo:
        typeof logo === 'function'
          ? logo(this.$store.state.user.tenantId)
          : logo
    }
  },
  computed: {
    designStyle() {
      const { defaultTheme, startColor, gradientBol, navbarLayoutType } = this

      let txt = ''

      let r = ''
      let sc = ''
      if (gradientBol.includes('value')) {
        const obj = JSON.parse(gradientBol)

        r = obj.value
      } else {
        r = gradientBol === '' ? '1' : gradientBol
      }

      if (startColor.includes('value')) {
        const obj = JSON.parse(startColor)

        sc = obj.value
      } else {
        sc = startColor === '' ? '1' : startColor
      }

      if (navbarLayoutType === 'primary') {
        if (r === '2') {
          txt = `background-color:${sc};`
        } else {
          txt = `background-color:${defaultTheme};`
        }
      }

      // console.log('txt-logo', txt)

      // `navbarLayoutType === 'primary' ?`background:${defaultTheme}`: ''`

      return txt
    },
    startColor() {
      return this.$store.state.settings.startColor || ''
    },
    gradientBol() {
      return this.$store.state.settings.gradientBol || ''
    },
    title() {
      const logoTitle = window._CONFIG['title']
      return (
        (typeof logoTitle === 'function'
          ? logoTitle(this.$store.state.user.tenantId)
          : logoTitle) || this.$store.state.settings.title
      )
    },
    sidebarLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    defaultTheme() {
      if (this.$store.state.settings.darkTheme) {
        return ''
      }
      return this.$store.state.settings.defaultTheme
    },
    sidebarLayoutSkin() {
      return this.$store.state.settings.sidebarLayoutSkin
    },
    navbarLayoutType() {
      if (this.$store.state.settings.darkTheme) {
        return ''
      }
      return this.$store.state.settings.navbarLayoutType
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'ecip-web/styles/variables';
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

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

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;

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

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    & .sidebar-title-svg {
      display: inline-block;
      margin: 0;
      font-weight: 600;
      line-height: 50px;
      width: 77px;
      height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

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