<template>
  <div class="scale_container">
    <div class="scale_home">
      <div class="layout">
        <HeaderNav :userInfo="userInfo" @change="changeAvatar" />
        <!-- 面包屑导航 -->
        <div class="breadcrumbs" v-if="routePage.path !== '/portal/home'">
          <div class="back-button" @click="toHome()">
            <img src="@/assets/imgs/news/back_home.png" class="back" alt="返回门户" />
            <span>返回门户</span></div
          >
          <span class="dqwz">当前位置</span><span class="left_arrow">></span
          ><span class="c_title">{{ breadcrumbs }}</span>
        </div>

        <!-- 中间内容区域，使用 <router-view> 动态渲染 -->
        <main style="background: rgba(245, 247, 250)">
          <!-- <KeepAlive :include="['PortalHome']">
        <router-view />
      </KeepAlive> -->
          <router-view v-slot="{ Component, route }">
            <KeepAlive :include="['PortalHome']">
              <component :is="Component" :key="route.path" />
            </KeepAlive>
          </router-view>
        </main>

        <div class="footer_box">
          <RecordNumber />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/store/modules/user'
import * as UserApi from '@/api/system/user'
import HeaderNav from './layoutComponents/header.vue'
import RecordNumber from './layoutComponents/RecordNumber.vue'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'

const routePage = useRoute() // 路由
const router = useRouter() // 路由
const userInfo = ref({})

const toHome = () => {
  router.push({
    name: 'PortalHome'
  })
}

// 计算面包屑导航
const breadcrumbs = computed(() => {
  console.log(9999999, routePage.meta.title)
  const title = routePage.meta.title // 去掉空字符串
  // 你可以根据实际需求调整面包屑的显示逻辑，比如映射路由名
  return title // 简单返回路径片段，实际可能需要映射成可读文本
})

const changeAvatar = () => {
  getUserInfo()
}

const getUserInfo = async () => {
  try {
    const userStore = useUserStore()
    const userId = userStore.getUser.id || 1 // 默认使用id=1作为备选

    // 使用UserApi获取用户信息
    const result = await UserApi.getUserInfo()

    if (!result) {
      ElMessage.error('获得个人信息失败，返回数据为空')
      return
    }

    userInfo.value = result
    console.log('userInfo.value', userInfo.value)
    //缓存用户信息
    localStorage.setItem('user', JSON.stringify(result))
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 可以根据需要添加错误提示
  }
}
// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo()
})
</script>

<style scoped lang="less">
// .scale_container {
//   // width: 100vw;
//   // height: 100vh;
//   // overflow: auto; /* 如果内容超出屏幕，允许滚动 */
//   // display: flex;
//   // justify-content: center;
//   // align-items: center;
// }

// .scale_home {
//   // transform-origin: top left; /* 缩放基准点 */
//   // width: 1920px; /* 设计稿宽度（例如 1920px） */
//   // height: 1080px; /* 设计稿高度（可选） */
//   // transform: scale(0.8); /* 默认缩放比例 */
//   transform-origin: top center; /* 缩放基准点（顶部中间） */
//   transform: scaleY(0.8); /* 仅缩放高度为 80% */
//   width: 120%; /* 补偿宽度（因为 scale(0.8) 会缩小宽度） */
//   height: auto; /* 高度自适应 */
//   // height: 100vh; /* 确保高度占满视口 */
// }

/* 添加一些基本样式 */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.breadcrumbs {
  padding: 8px 40px 8px 30px;
  background: #fff;
  margin-top: 45px;
  display: flex;
  .back-button {
    width: 80px;
    height: 24px;
    font-size: 12px;
    color: #333;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 30px;
    .back {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
  }
  .dqwz {
    font-size: 14px;
    color: #999;
  }
  .left_arrow {
    font-size: 14px;
    color: #999;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
  }
  .c_title {
    font-size: 14px;
    color: #333;
  }
}

main {
  flex: 1;
  /* padding: 1rem; */
}

.footer_box {
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 3;
}
</style>
