<template>
  <div class="sidebar-logo-container" :class="{ collapse: props.collapse }">
    <transition name="sidebarLogoFade" v-if="settingsStore.navigationType === 'top-menuMix-type'">
      <div key="expand" class="sidebar-icon-link">
        <div class="icon-title" v-if="!props.collapse">导航</div>
      </div>
    </transition>

    <transition name="sidebarLogoFade" v-if="settingsStore.navigationType === 'left-menu-type'">
      <div key="expand" class="sidebar-logo-link" @click="returnMiddleOrHome">
        <img v-if="middlePage.page.homeLogo" :src="middlePage.page.homeLogo" class="sidebar-logo" />
        <h1 v-if="!props.collapse" class="sidebar-title">
          {{ middlePage.page.middleTitle }}
        </h1>
      </div>
    </transition>
  </div>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { ElMessage, ElMessageBox } from "element-plus";
import { getCurrentInstance, defineComponent, ref, onMounted, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { usePermissionStore, useUserStore, useSettingsStore, useAppStore } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const router = useRouter();
const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();

const props = defineProps({
  collapse: {
    type: Boolean,
    required: true,
  },
});
const emits = defineEmits(["setLayout"]);
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const middlePage = computed(() => userStore.middlePageData); //全局公共变量集

function toggleSideBar() {
  appStore.toggleSideBar();
}

function home() {
  if (middlePage.defaultHomePage.indexOf("http") > 0) {
    window.open(middlePage.defaultHomePage, "_blank");
  } else {
    router.push({ path: middlePage.defaultHomePage });
  }
}

function returnMiddleOrHome() {
  if (localStorage.getItem("middlePageStatus")) {
    router.push({ path: "/middle" });
  }
}
</script>
<style lang="scss" scoped>
.hamburger-container {
  line-height: 50px;
  height: 100%;
  float: right;
  cursor: pointer;
  transition: background 0.3s;
  -webkit-tap-highlight-color: transparent;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }
}

.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

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

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

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

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

    & .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 {
      margin-right: 0px;
    }
  }
}
</style>
