<template>
  <router-view />
  <reset-pwd ref="resetPwdRef" />
</template>

<script setup>
import { nextTick, onMounted, watch } from 'vue'
import { handleThemeStyle } from '@/utils/theme'
import useSettingsStore from '@/store/modules/settings'
import ResetPwd from '@/views/system/user/profile/components/resetPwd'
import useUserStore from '@/store/modules/user'
import { getCurrentInstance } from '@vue/runtime-core'

const userStore = useUserStore()
const { proxy } = getCurrentInstance()

onMounted(() => {
  document.body.style.setProperty('--el-color-primary', '#453DEA')
  document.body.style.setProperty('--el-color-primary-light-3', '#8623FC')
  document.body.style.setProperty('--el-button-hover-bg-color', '#fff')
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})

// watch(() => userStore.user?.changePassFlag, (val) => {
//   if (val === '1') {
//     proxy.$modal.confirm('密码长期未更新，请及时更新').then(() => {
//       proxy.$refs['resetPwdRef'].open()
//     })
//   }
// })

</script>

<style lang="scss">
:root {
  --el-color-golden: #946A12;
  --el-fill-color-light: #faf5f5;
  --el-button-hover-border-color: #94080B;
  --el-button-hover-bg-color: rgba(148, 8, 11, 0.3);
  --el-fill-color-lighter: #F6F9FE!important;
}

.el-button:focus, .el-button:hover {
  //--el-button-hover-border-color: #94080B;
  //--el-button-hover-bg-color: transparent;
}

.box {
  width: 90%;
  max-width: 1400px;
  margin: auto;
}

.app-container {
  min-height: 100vh;
}

.app-main {
  background: #F4F4F4;
}

.el-breadcrumb__inner {
  display: flex;

  .el-icon {
    margin: 0 4px;
  }
}

li.el-select-dropdown__item {
  height: auto;
}

:root {
  --el-menu-active-color: var(--el-color-primary);
}

.el-popper .el-menu {
  background: #fff;
}
.el-popper .el-menu--horizontal .el-menu .el-menu-item {
  background: transparent;
  justify-content: center;
  height: 50px;
  font-size: 18px;
}
.el-popper .el-menu--horizontal .el-menu .el-sub-menu .el-sub-menu__title {
  background: transparent;
  justify-content: center;
  height: 50px;
  font-size: 18px;
}
.el-popper .el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title {
  color: #fff;
}

.el-popper .el-menu--horizontal .el-menu .el-menu-item.is-active {
  color:var(--el-color-primary);
}

.el-popper, .el-menu--popup {
  border-radius: 0;
}

:deep(.el-menu--popup) {
  min-width: 130px;padding: 0;
}

.el-popper.is-light.is-pure {
  border: none;
}

.el-popper {
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: var(--el-color-primary);
  }

  .el-menu--horizontal {
    border: none;
  }
}

.home-menu {

  .el-menu {color: #000;}

  .el-menu--horizontal>.el-menu-item {
    transition: none;color: #000;padding: 6px 10px ;margin: 0 10px;border-radius: 18px;
  }

  .el-sub-menu .el-sub-menu__title {
    font-size: 20px;color: #000;
  }

  .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
    border-bottom: none;
    color: var(--el-color-primary);
  }

  .el-menu--horizontal .el-menu .el-menu-item {
    justify-content: center;
  }

  .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
    color: #453DEA;
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {

  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #453DEA;
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: none;background: linear-gradient(-90deg, #8623FC, #453DEA);
    border-radius: 18px;color: #fff!important;
  }

  .el-menu--horizontal {
    height: 35px;
    border-bottom: none;
    justify-content: space-between;
  }

  .el-menu--horizontal > .el-menu-item {
    font-size: 20px;
  }
}

@media (max-width: 1600px) {
  .el-menu--horizontal > .el-menu-item {
    padding: 0 15px;
  }
}

@media (max-width: 1500px) {
  .home-menu .el-menu--horizontal > .el-menu-item {
    padding: 0 10px;
  }
}

@media (max-width: 1440px) {
  .fixed_nav{    transform: scale(0.8);
    transform-origin: left;}
  .home-menu .el-menu--horizontal > .el-menu-item {
    font-size: 16px;
    padding: 0 10px;
  }
  .home-menu .el-sub-menu .el-sub-menu__title {
    font-size: 16px;
  }
  .serverRow .item {
    height: 260px;
  }
  .el-popper .el-menu--horizontal .el-menu .el-menu-item {
    font-size: 16px;
  }
}

//思源宋体
@font-face {
  font-family: SC-song;
  src: url("@/assets/fonts/SHSCN_regular.otf") format('otf');
}

.imgbox {
  img {
    width: 100%;
  }
}

.searchpp {
  .el-dialog__headerbtn .el-dialog__close {
    font-size: 33px;
  }

  &.el-dialog {
    padding: 0 100px;
    --el-dialog-title-font-size: 40px;
    --el-dialog-padding-primary: 50px 20px 0 0;
    box-shadow: 0 2000px 0 2000px rgba(0, 0, 0, 0.6);
  }

  .el-dialog__headerbtn {
    right: 20px;
    top: 30px;
  }
}
.searchPark{padding: 10px 20px;height: 100%;
  background: #F6F6F6;
  .el-input__suffix{color:var(--el-color-primary)}
  .el-icon{color:var(--el-color-primary)}
  .el-input{--el-input-icon-color:var(--el-color-primary)}
}
.flexformItem{
  display: flex;width: 100%;
  .el-date-editor{
    --el-date-editor-width:100%
  }
  .el-input__suffix{color:var(--el-color-primary)}
  .el-icon{color:var(--el-color-primary)}
  .el-input{--el-input-icon-color:var(--el-color-primary)}
}

.topBanner{
  .imgbox{position: relative;height: 100%;
    img{height: 100%;object-fit: cover;}
  }
  h3{position: absolute;bottom: 0;color: #fff;
    font-size: 36px;margin: 0;
    text-align: center;width: 100%;padding: 60px 0 40px;
    background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0));
  }
}


</style>