<template>
  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
    <div class="box_weather">
      天气
    </div>
    <router-link key="expand" class="sidebar-logo-link" to="/">
      <div class="sidebar-logo">
        <div class="sidebar-title">{{ title }}</div>
        <div class="sidebar-title1"></div>
        <div class="sidebar-title2"></div>
      </div>
    </router-link>
    <div class="avatar-container">
      <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="userStore.avatar" class="user-avatar" />
          <el-icon><caret-bottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided command="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import useSettingsStore from '@/store/modules/settings'
import variables from '@/assets/styles/variables.module.scss'
import useUserStore from '@/store/modules/user'

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

const userStore = useUserStore()
const title = import.meta.env.VITE_APP_TITLE;
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

// 获取Logo背景色
const getLogoBackground = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-bg)';
  }
  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
});

// 获取Logo文字颜色
const getLogoTextColor = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-text)';
  }
  return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
});

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index';
    })
  }).catch(() => { });
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

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

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

.sidebar-logo-container {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

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

    & .sidebar-logo {
      display: inline-block;
      position: relative;
    }

    & .sidebar-title {
      letter-spacing: 5px;
      font-family: fangsong;
      font-style: italic;
      z-index: 3;
      color: v-bind(getLogoTextColor);
      font-weight: 600;
      font-size: 22px;
      padding: 10px 70px;
      background-image: linear-gradient(to right, #1da1d3 0%, #003aa5 20%, #003aa5 80%, #1da1d3 100%, );
      clip-path: polygon(0 0, 50px 100%, calc(100% - 50px) 100%, 100% 0);
      box-shadow: inset 0px -3px 30px #62d4ff;
      border-bottom: 1px solid #73caff;
    }

    & .sidebar-title1 {
      z-index: -1;
      position: absolute;
      top: 0;
      bottom: 10px;
      left: -30px;
      right: -30px;
      background: radial-gradient(circle, #0067ff, #002d5b);
      clip-path: polygon(0 0, 60px 100%, calc(100% - 60px) 100%, 100% 0);
      box-shadow: inset 0px -3px 30px rgb(0 186 255);
    }

    & .sidebar-title2 {
      z-index: -2;
      position: absolute;
      top: 0;
      bottom: 15px;
      left: -65px;
      right: -65px;
      background: radial-gradient(circle, rgb(203 203 203 / 76%), #0e4dae);
      clip-path: polygon(0 0, 70px 100%, calc(100% - 70px) 100%, 100% 0);
      box-shadow: inset 0px -3px 30px rgb(208 242 255);
    }
  }
}

.box_weather {
  margin-left: 20px;
  font-size: 18px;
}

.avatar-container {
  margin-right: 20px;

  .avatar-wrapper {
    margin-top: 5px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    i {
      cursor: pointer;
      font-size: 18px;
      margin-left: 6px;
    }
  }
}
</style>