<template>
  <router-view />
  <reset-pwd ref="resetPwdRef" />
<!--  <Maintain ref="maintainRef" />-->
</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 { dayjs } from 'element-plus'
// import Maintain from '@/viewsPc/center/component/maintain.vue'
// 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', '#BF3031')
  document.body.style.setProperty('--el-color-primary-light-3', '#d44')
  document.body.style.setProperty('--el-button-hover-bg-color', '#fff')
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })

  setInterval(() => {
    if (dayjs().format('HH:mm') == '02:00') {
      location.reload()
    }
  }, 1000 * 60)
})

// watch(() => userStore.user?.idcCode, (val) => {
//   if (!val && userStore.userId) {
//     proxy.$modal.confirm('请维护证件号!').then(() => {
//       proxy.$refs['maintainRef'].open()
//     })
//   }
// })

</script>

<style lang="scss">
:root {
  --el-color-primary: #94080B;
  --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-button:focus, .el-button:hover {
  //--el-button-hover-border-color: #94080B;
  //--el-button-hover-bg-color: transparent;
}

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

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

.app-main {
  background: #F5F7F9;
}

.el-breadcrumb__inner {
  display: flex;

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

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

:root {
  --el-menu-active-color: #CA171D;
}

.el-popper .el-menu {
  background: #99141B;
  color: #fff;
}
.el-popper .el-menu--horizontal .el-menu .el-menu-item {
  background: transparent;
  justify-content: center;
  color: #fff;
  height: 50px;
  font-size: 18px;
}
.el-popper .el-menu--horizontal .el-menu .el-sub-menu .el-sub-menu__title {
  background: transparent;
  justify-content: center;
  color: #fff;
  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: #fff;
  background: rgba(122, 15, 20, 0.5);
}

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

.el-menu--popup {
  min-width: 130px;
}

.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: #fff;
    background: rgba(122, 15, 20, 0.5);
  }

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

.home-menu {
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background: transparent;
  }

  .el-menu {
    background: #ad1820;
    color: #fff;
  }

  .el-menu-item {
    transition: none;
    &:hover{text-shadow: 1px 1px black;}
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    color: #fff !important;
  }

  .el-sub-menu .el-sub-menu__title {
    color: #fff;
    font-size: 18px;
  }

  .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
    color: #fff;
    border-bottom: none;
    background: #99141B;
  }

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

  .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
    background: #99141B;
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
    color: #fff
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: rgba(202, 23, 29, 0.1);
    color: #fff
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: none;

    &::after {
      content: '';
      width: 40%;
      height: 2px;
      background: #fff;
      position: absolute;
      bottom: 10px;
    }
  }

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

  .el-menu--horizontal > .el-menu-item {
    font-size: 18px;
    color: #fff;
  }

  .el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
    color: #fff;
  }

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

  .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
    background: transparent;
  }
}

@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>