<template>
  <el-container class="pc-home">
    <!-- 头部导航 -->
    <el-header class="pc-header flex-row">
      <div class="df aic jcc" style="gap: 0.1rem; height: 0.6rem; white-space: nowrap">
        <img referrerpolicy="no-referrer" src="@/assets/imgs/logo.png" style="height: 30px" />
        <div style="color: #ffffff; font-size: 0.16rem; font-weight: bolder">PMS:新光线平台</div>
      </div>
      <div class="df aic" style="gap: 10px">
        <el-dropdown trigger="click" style="cursor: pointer">
          <span class="el-dropdown-link">
            <img class="avatar-wrap" src="@/assets/imgs/touxiang.jpg" alt="" />
            {{ userInfo?.userName }}
            <el-icon class="ml10">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item @click="dialogVisible = true">更改密码</el-dropdown-item> -->
              <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <!-- <RouteTab></RouteTab> -->
    <el-container>
      <el-aside :style="{ width: isCollapse ? '64px' : '200px' }"><Aside></Aside></el-aside>
      <!-- 主体部分 -->
      <div class="pc-main flex-row">
        <div class="page-conatiner">
          <div class="mainpart">
            <MainContent></MainContent>
          </div>
        </div>
      </div>
    </el-container>
  </el-container>
  <editPassWordCom v-model:visible="dialogVisible" @confirm="editPassWord" />
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, onMounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import editPassWordCom from './components/editPassWordCom.vue'
import { useMenu } from '@/layout/hook/hook.aside.js'
import Aside from './components/Aside.vue'
import MainContent from './components/MainContent.vue'
// import RouteTab from './components/routeTab.vue'
import { loginApi } from '@/utils/api'
import { removeToken } from '@/utils/auth'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const isCollapse = ref(false)
// hook函数使用
useMenu(isCollapse)
const userInfo = ref(
  sessionStorage.getItem('userInfo') !== 'undefined' && sessionStorage.getItem('userInfo')
    ? JSON.parse($utils.decryptByDES.CBC(sessionStorage.getItem('userInfo')))
    : {},
)
const outLogin = async () => {
  await userStore.logOut()
}
const dialogVisible = ref(false)
const editPassWord = async data => {
  const params = {
    newPassword: data.newPassword,
    password: data.originalPassword,
    id: userInfo.value.id,
  }
  await loginApi.editPassword(params)
  ElMessage.success({ message: '修改密码成功' })
  dialogVisible.value = false
  removeToken()
  router.push({ path: '/login' })
}
let isFull = false
// 判断是否全屏
// 判断当前页面是否全屏
window.onresize = () => {
  // 可视区域的高度
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
  // screen是window的属性方法，window.screen可省略window，指的是窗口
  isFull = screen.height == clientHeight
}

// 阻止f11默认行为,改用自定义全屏
window.onkeydown = function (event) {
  if (event.keyCode === 122) {
    event.preventDefault()
    event.returnValue = false
  }
}

//退出全屏
const exitFullscreen = () => {
  if (document.exitFullScreen) {
    document.exitFullScreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}
//开启全屏
const requestFullScreen = () => {
  let element = document.getElementById('app')
  let requestMethod =
    element.requestFullScreen || //w3c
    element.webkitRequestFullScreen || // Chrome等
    element.mozRequestFullScreen || // FireFox
    element.msRequestFullScreen // IE11
  if (requestMethod) {
    requestMethod.call(element)
  }
}
// forceUpdate
onMounted(() => {
  haddleBreadcrumbArr()
})

watch(
  () => route.path,
  () => {
    haddleBreadcrumbArr()
  },
)


let breadcrumbArr = ref([])
const haddleBreadcrumbArr = () => {
  let routeArr = [...route.matched]
  routeArr.shift()
  let arr = []
  for (let item of routeArr) {
    if (item.meta.breadcrumb?.length > 0) {
      arr = arr.concat(item.meta.breadcrumb)
    }
    arr.push({
      name: item.name,
      title: item.meta.title,
    })
  }
  breadcrumbArr.value = arr
}


// 获取消息 通知
const messageCount = ref(0)

</script>
<style lang="scss" scoped>
// @function calcHeight($height) {
//   @return ($height / 1080) * 100vh;
// }

.pc-home {
  display: flex;
  background-color: #f0f2f5;
  width: 100vw;
  .pc-header {
    @include flex-row;
    height: 0.6rem;
    background: #242a2f;
    // background-color: #4684e2;
    color: #ffffff;
    justify-content: space-between;
    align-items: center;
    gap: 0.2rem;
    background-size: 100% 100%;

    .el-dropdown-link {
      font-size: 0.16rem;
      color: #999;
      display: flex;
      justify-content: center;
      align-items: center;
      .avatar-wrap {
        width: 0.33rem;
        height: 0.33rem;
        background-color: #fff;
        // background-color: red;
        // padding: 3px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        border-radius: 50%;
        img {
          display: block;
          width: 0.3rem;
          height: 0.3rem;
          border-radius: 50%;
        }
        margin-right: 0.1rem;
      }
      // margin-top: -0.3rem;
      // margin-right: 0.3rem;
    }
  }

  //  :deep(.el-header)  {
  //   --el-header-height: calcHeight(100);
  // }

  .pc-main {
    height: 9.9rem;
    flex: 1 1 auto;
    background-color: #f0f2f5;
    min-width: 0;
    // .pc-menu {
    //   height: 100%;
    //   flex: 0 0 calcWidth(260);
    //   min-width: 260px;
    // }
    .mainpart {
      // flex: 1;
      width: 100%;
      @include flex-row-vc;
      gap: 5px;
      padding: 10px;
      // .main-banner{
      //   flex: 1;
      //   height: 100%;
      //   background: #f60;
      // }
    }

    .page-conatiner {
      // height: 100%;
      flex: 1 1 auto;
      display: flex;
    }
  }
}
.right-box {
  display: flex;
  margin-left: auto;
  justify-content: flex-end;
  gap: 0.1rem;
  align-items: center;
  // position: absolute;
  // right: 0;
  // bottom: 10px;
}
:deep(.homePageDialog) {
  .el-dialog__body {
    padding-top: 0;
    overflow-y: hidden;
    height: 30vh;
  }

  .el-dialog__header {
    border-bottom: 1px solid #d8d8d8;
    height: 38px;
    font-weight: bold;
    font-size: 14px;
    line-height: 38px;
    padding: 0;
    padding-left: 16px;
    text-align: left;
    .el-dialog__title {
      color: #333333;
      font-size: 14px !important;
    }
  }
}
:deep(.el-tabs) {
  height: 100%;
  .el-tabs__content {
    overflow: auto;
    height: 100%;
  }
}
.messageBox {
  padding: 0 10px;

  .msgItem {
    display: flex;
    gap: 5px;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .time {
    color: #c1c1c1;
    font-size: 12px;
  }
  .msgContent {
    line-height: 24px;
  }
  .doc {
    background-color: rgb(221, 37, 42);
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
  }
}
</style>
