<template>
  <div class="wrapper-content">
    <div class="content-nav">
      <div class="nav-left">  
        <div>xSynergy远程协作后台管理系统</div>
      </div>
      <div class="nav-right">
        <el-dropdown trigger="click" @command="handleCommand">
          <div class="avatar-wrapper"> 
            <img v-if="userStore.avatar" :src="userStore.avatar" />
            <img v-else src="@/assets/images/profile.jpg"/>
            <span class="username">{{ nickName }}</span> 
            <!-- <el-icon><caret-bottom /></el-icon> -->
          </div>
          <template #dropdown>
            <el-dropdown-menu> 
              <el-dropdown-item command="changePassword">
                <span>修改密码</span>
              </el-dropdown-item>
            <el-dropdown-item command="logout" divided>
              <span>退出登录</span>
            </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> 
      </div>
    </div>
    <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
      <div
        v-if="device === 'mobile' && sidebar.opened"
        class="drawer-bg"
        @click="handleClickOutside"
      />
      <div class="main-container" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
        <sidebar v-if="!sidebar.hide" class="sidebar-container" /> 
        <div class="sidebar-right"> 
        <!-- :class="{ 'fixed-header': fixedHeader }" -->
            <div >
                <navbar ref="navbarRef"/> 
            </div>
          <app-main />
        </div>
      </div>
    </div>
    <ResetPwd ref="resetPwdRef"/> 
  </div>  
</template>

<script setup>
import { ElMessageBox ,ElMessage} from 'element-plus' 
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, TagsView ,ResetPwd,Navbar} from './components/index.js'
import { useAppStore } from '@/stores/modules/app.js'
import { useSettingsStore } from '@/stores/modules/settings.js'
import { useUserStore } from '@/stores/modules/user.js'
import { removeToken } from '@/utils/auth.js'
import { onMounted ,ref} from 'vue' 

const settingsStore = useSettingsStore()
const userStore = useUserStore()
const useAppStoreStore = useAppStore()
const router = useRouter() 
 
const theme = computed(() => settingsStore.theme)
const sidebar = computed(() => useAppStoreStore.sidebar)
const device = computed(() => useAppStoreStore.device) 
const needTagsView = computed(() => settingsStore.tagsView)

const nickName = computed(() => {
  // 优先从 userStore 获取
  if (userStore.name) {
    return userStore.name
  }
  
  try {
    const userData = sessionStorage.getItem('userData')
    if (userData) {
      const parsedData = JSON.parse(userData)
      return parsedData.name || ''
    }
  } catch (error) {
    console.error('解析 userData 失败:', error)
  } 
  return ''
}) 

const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
  openSidebar: sidebar.value.opened,
  withoutAnimation: sidebar.value.withoutAnimation,
  mobile: device.value === 'mobile',
}))

const resetPwdRef = ref(null)

const { width, height } = useWindowSize()
const WIDTH = 992 

watchEffect(() => {
  if (device.value === 'mobile' && sidebar.value.opened) {
    useAppStoreStore.closeSideBar({ withoutAnimation: false })
  }
  if (width.value - 1 < WIDTH) {
    useAppStoreStore.toggleDevice('mobile')
    useAppStoreStore.closeSideBar({ withoutAnimation: true })
  } else {
    useAppStoreStore.toggleDevice('desktop')
  }
})
function handleCommand(command) { 
    switch (command) {
        case 'changePassword':
            resetPwdRef.value.open()
        break
        case 'logout':
          logout()
        break
        default:
        break
    }
}
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => { 
        userStore.logOut().then(() => {
            location.href = '/'
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消注销'
        })
    })
}

function handleClickOutside() {
  useAppStoreStore.closeSideBar({ withoutAnimation: false })
}

onMounted(async () => {})

</script>

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

.tags-view {
  opacity: 0;
  top: 0;
  position: fixed;
}
.main-container {
  position: relative;
  display: flex;
  height: calc(100vh - 50px); 
  overflow-y: auto;
  overflow: hidden;
  margin: 0;
  background-color: #fff;
  // border-radius: 30px;
  box-shadow: 0 0 10px 4px #ece9e3;

  .sidebar-container {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    width: 200px;
    // box-shadow: 0 0 10px 4px #f6f6f6;
  }
  .sidebar-right { 
    width: calc(100% - 200px);
    position: relative;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    // padding: 0 20px;
    .right-bar {
      width: 100%;
      background: #f6f6f6;
      overflow-x: hidden;
      // border-radius: 0 30px 0 0;
    }
  }
  /* 滚动条整体 */
  .sidebar-right::-webkit-scrollbar {
    height: 0px;
    width: 0px;
  }
}

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  background: #f6f6f6;
  // padding: 20px;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
// @media screen and (max-width: 995px) {
//   .wrapper-content {
//     .content-nav {
//       z-index: 0 !important;
//     }
//   }
// }
.wrapper-content {
  .content-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1111;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: #409EFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.3s;

    .nav-left {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 18px;
      font-weight: 600;

      img {
        width: 28px;
        height: 28px;
        margin-right: 12px;
      }
    }

    .nav-right {
      display: flex;
      align-items: center;

      .avatar-wrapper {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 20px;
        transition: all 0.3s;

        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          border: 2px solid rgba(255, 255, 255, 0.4);
          transition: all 0.3s;
        }

        .username {
          margin-left: 10px;
          color: #fff;
          font-weight: 600;
          font-size: 16px;
        }

        &:hover img {
          transform: scale(1.05);
          border-color: #fff;
        }
      }

      .el-dropdown-menu {
        border-radius: 6px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

        .el-dropdown-item {
          transition: background 0.3s, color 0.3s;

          &:hover {
            background-color: rgba(64, 158, 255, 0.1);
            color: #409EFF;
          }
        }
      }
    }
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

// .hideSidebar .fixed-header {
//   width: calc(100% - 54px);
// }

.sidebarHide .fixed-header {
  width: 100%;
}

.mobile .fixed-header {
  width: 100%;
}
</style>
