<template>
  <div>
    <div class="logo">
      <!-- 展开状态：显示厨师帽图标 + 文字 -->
      <div v-if="!isCollapse" class="sidebar-logo">
        <img src="@/assets/login/chef-logo.png" class="logo-img" />
        <span class="logo-text">小厨外卖</span>
      </div>
      <!-- 折叠状态：只显示厨师帽图标（缩小版） -->
      <div v-else class="sidebar-logo-mini">
        <img src="@/assets/login/chef-logo.png" class="mini-logo-img" />
      </div>
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-openeds="defOpen"
               :default-active="defAct"
               :collapse="isCollapse"
               :background-color="variables.menuBg"
               :text-color="variables.menuText"
               :active-text-color="variables.menuActiveText"
               :unique-opened="false"
               :collapse-transition="false"
               mode="vertical">
        <sidebar-item v-for="route in routes"
                      :key="route.path"
                      :item="route"
                      :base-path="route.path"
                      :is-collapse="isCollapse" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import { UserModule } from '@/store/modules/user'
import SidebarItem from './SidebarItem.vue'
import variables from '@/styles/_variables.scss'
import Cookies from 'js-cookie'

@Component({
  name: 'SideBar',
  components: {
    SidebarItem
  }
})
export default class extends Vue {
  private restKey: number = 0
  
  get name() {
    return (UserModule.userInfo as any).name
      ? (UserModule.userInfo as any).name
      : JSON.parse(Cookies.get('user_info') as any).name
  }
  
  get defOpen() {
    let path = ['/']
    this.routes.forEach((n: any, i: number) => {
      if (n.meta.roles && n.meta.roles[0] === this.roles[0]) {
        path.splice(0, 1, n.path)
      }
    })
    return path
  }

  get defAct() {
    let path = this.$route.path
    return path
  }

  get sidebar() {
    return AppModule.sidebar
  }

  get roles() {
    return UserModule.roles
  }

  get routes() {
    let routes = JSON.parse(
      JSON.stringify([...(this.$router as any).options.routes])
    )
    let menuList = []
    let menu = routes.find(item => item.path === '/')
    if (menu) {
      menuList = menu.children
    }
    return menuList
  }

  get variables() {
    return variables
  }

  get isCollapse() {
    return !this.sidebar.opened
  }
  
  private async logout() {
    this.$store.dispatch('LogOut').then(() => {
      this.$router.replace({ path: '/login' })
    })
  }
}
</script>

<style lang="scss" scoped>
.logo {
  text-align: center;
  background-color: #e64340;  // 改为红色，与登录页主题一致
  padding: 12px 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  .logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }
  
  .logo-text {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;  // 白色文字，与红色背景搭配
    letter-spacing: 1px;
  }
}

.sidebar-logo-mini {
  .mini-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
}

.el-scrollbar {
  height: 100%;
  background-color: rgb(52, 55, 68);
}

.el-menu {
  border: none;
  height: calc(95vh - 23px);
  width: 100% !important;
  padding: 47px 15px 0;
}

.sidebar-logo {
  .logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);  /* 将图片变为白色 */
  }
}

.sidebar-logo-mini {
  .mini-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);  /* 同样变白 */
  }
}
</style>