<!-- 前台头部 -->
<template>
  <el-header>
    <div class="header-container">
      <div class="header-left">
        <div class="logo-box">
          <!--     logo     -->
          <img alt="" class="logo" src="@/assets/img/logo-text.png" />
          <!--      菜单    -->
          <div :class="['menu-box']">
            <div class="short-menu">
              <div class="home-icon" @click="menuClick(homePageInfo)">
                <el-tooltip
                  placement="bottom"
                  popper-class="menu-popover"
                  trigger="hover"
                >
                  <span slot="content">{{ homePageInfo.name }}</span>
                  <svgIcon
                    :icon-class="
                      homePageInfo.menuIcon ? homePageInfo.menuIcon : ''
                    "
                    :title="homePageInfo.name"
                    icon-style="icon header-icon"
                  />
                </el-tooltip>
              </div>
              <!-- <div class="more-box" @mousedown.prevent="moreClick">
                <template>
                  <el-tooltip
                    placement="right"
                    trigger="hover"
                    popper-class="menu-popover"
                  >
                    <span slot="content"
                      >{{ showMore ? '收起' : '显示' }}菜单</span
                    >
                    <div
                      v-if="
                        currentMenu === 'homePage' ||
                        customSystemRouter.some((i) => i.path === currentMenu)
                      "
                      :class="[
                        'reference-box-collapse',
                        showMore ? 'expansion' : '',
                      ]"
                    >
                      <span></span>
                    </div>
                    <div
                      v-else
                      :class="['reference-box', showMore ? 'expansion' : '']"
                    >
                      <svgIcon
                        icon-style="icon header-icon"
                        :icon-class="
                          currentMenuInfo.menuIcon
                            ? currentMenuInfo.menuIcon
                            : ''
                        "
                      />
                      <span>{{ currentMenuInfo.name }}</span>
                    </div>
                  </el-tooltip>
                </template>
              </div> -->
            </div>
            <div :class="['all-menu', showMore ? 'all-menu-show' : '']">
              <div
                ref="allNavContent"
                class="all-menu-content"
                tabindex="-1"
                @blur="allMenuBlur"
              >
                <div
                  v-for="item in businessMenu.slice(1)"
                  :key="item.alias"
                  :class="[
                    'menu-btn',
                    item.alias === currentMenu ? 'menu-btn-active' : ''
                  ]"
                  @click="menuClick(item)"
                >
                  <svgIcon
                    :icon-class="item.menuIcon ? item.menuIcon : ''"
                    icon-style="icon header-icon"
                  />
                  <span> {{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-right">
        <div v-if="warningMsg" class="warning-wrapper">
          <div class="warning-bg"></div>
          <img
            class="warning-icon"
            src="@/assets/img/publicLayout/warning_red.png"
          />
        </div>
        <template v-if="isFinishedUserInfo">
          <div class="bell-box" @click="showMsgDrawer = true">
            <el-badge v-model="newMsgNum" :hidden="!newMsgNum" class="bell">
              <el-tooltip
                placement="top-start"
                popper-class="menu-popover"
                trigger="hover"
              >
                <span slot="content">消息中心</span>
                <img alt="" src="@/assets/img/publicLayout/bell.png" />
              </el-tooltip>
            </el-badge>
          </div>
          <!-- <el-tooltip
            class="item"
            effect="dark"
            content="大屏"
            placement="bottom"
            v-if="bigScreenMenus.length"
          >
            <el-popover
              width="100"
              trigger="click"
              placement="top-start"
              popper-class="qr-code-popover"
            >
              <img
                slot="reference"
                class="qr-icon"
                src="@/assets/img/publicLayout/big-screen-icon.png"
              />
              <div>
                <div
                  :key="menu.id"
                  class="screen-menu"
                  v-for="menu in bigScreenMenus"
                  @click="handleScreen(menu)"
                >
                  <i class="el-icon-s-platform"></i>
                  {{ menu.name }}
                </div>
              </div>
            </el-popover>
          </el-tooltip> -->
        </template>
        <HtAvatar :user="currentUser" class="avatar" />
        <el-popover
          placement="bottom"
          popper-class="header-popper"
          trigger="hover"
          width="250"
        >
          <div slot="reference" class="user-box">
            <div class="welcome">
              你好，{{ currentUser && currentUser.user.fullname
              }}<i class="el-icon-caret-bottom" />
            </div>
            <div class="department">{{ companyDepartment }}</div>
          </div>
          <div class="user-box-header">
            <h3 v-if="currentUser">
              {{ currentUser && currentUser.user.fullname }}
            </h3>
          </div>
          <ul class="user-link-ul">
            <li @click="openPersonalCenter">
              <i class="el-icon-user"></i>
              {{ $t('navigator.personalCenter') }}
            </li>
            <li @click="openResetPwdDialog">
              <i class="el-icon-setting"></i>
              {{ $t('navigator.changePsd') }}
            </li>
            <li v-if="userType !== 2" @click="handleSysPlat">
              <i class="el-icon-monitor" />
              {{ $t('navigator.manageSys') }}
            </li>
            <li @click="logout">
              <i class="el-icon-circle-close" />
              {{ $t('navigator.signOut') }}
            </li>
          </ul>
        </el-popover>
      </div>
    </div>

    <!--  消息抽屉组件  -->
    <message-drawer
      :newMsgNum.sync="newMsgNum"
      :showMsgDrawer.sync="showMsgDrawer"
    />
    <audio id="audio" ref="audioPlayer" src="@/assets/music/alert.mp3"></audio>
    <super-dialog
      v-model="centerDialogVisible"
      center
      title="提示"
      top="30vh"
      width="30%">
      <span style="color:#ffffff;font-size:16px">请选择要退出的选项！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="logOutChange">退出到登录页</el-button>
        <!--        <el-button type="primary" @click="closeChange">关闭当前窗口</el-button>-->
        <el-button @click="centerDialogVisible = false">取消</el-button>
      </span>
    </super-dialog>
  </el-header>
</template>

<script>
import HtAvatar from '@/components/common/HtAvatar.vue'
import {mapState} from 'vuex'
import MessageDrawer from '@/components/layout/Navigator/components/MessageDrawer.vue'
import customSystemRouter from '@/router/custom-system-router'
import SuperDialog from '@/components/SuperDialog/index.vue'

export default {
  name: 'Navigator',
  components: {SuperDialog, MessageDrawer, HtAvatar},
  props: {
    currentMenu: {
      default: '',
      type: String
    }
  },
  computed: {
    ...mapState({
      token: state => state.login.currentUser.token,
      currentUser: state => state.user.currentUserDetail,
      isFinishedUserInfo: state => state.login.isFinishedUserInfo,
      // 重构菜单信息
      businessMenu(state) {
        return (
          state.menu.frontMenus.find(i => i.alias === 'normal')?.children || []
        )
      },
      homePageInfo() {
        return this.businessMenu[0] || {}
      },
      userType() {
        if (this.currentUser && this.currentUser.user) {
          return this.currentUser.user.userType
        }
      },
      userInfo: state => state.login.currentUser,
      companyDepartment: state => {
        /*
                    判断isCurrent去找到是否存在1的，则判断是不是所有值都一样，
                    如果有一样的话取第一项。如果没有则去判断isMaster，
                    如果isCurrent，isMaster都不符合条件。取org数组的第一项中的数据
                */
        const org = state.user.currentUserDetail?.org || []
        if (!(Array.isArray(org) && org.length)) return ''

        let resultObj
        const isCurrentArr = org.filter(i => i.isCurrent === 1)
        const isMasterArr = org.filter(i => i.isMaster === 1)
        if (isCurrentArr.length) {
          resultObj = isCurrentArr[0]
          if (isCurrentArr[0].orgPathName) {
            return isCurrentArr[0].orgPathName
          }
        } else if (isMasterArr.length) {
          resultObj = isMasterArr[0]
          if (isMasterArr[0].orgPathName) {
            return isMasterArr[0].orgPathName
          }
        } else {
          resultObj = org[0]
          if (org[0].orgPathName) {
            return org[0].orgPathName
          }
        }
        const {orgName, deptName} = resultObj || {}
        return [orgName, deptName].filter(i => i).join('-') || ''
      }
    }),
    currentMenuInfo() {
      return this.businessMenu.find(i => i.alias === this.currentMenu) || {}
    }
  },
  data() {
    return {
      systemInformation: {},
      showMore: false, // 展示全部菜单
      showMsgDrawer: false, // 是否展示侧边栏消息抽屉
      customSystemRouter, // 自定义后台路由
      newMsgNum: 0, // 新消息数量
      frontBase: `${window.location.origin}`,
      qrCodePort: window.context.apkPort,
      bigScreenMenus: [], // 大屏菜单
      warningMsg: false,
      centerDialogVisible: false
    }
  },
  created() {
  },
  mounted() {
    this.$bus.$on('updataUserInfo', () => {
      this.$store.dispatch('user/loadCurrentUserDetail')
    })
    !this.currentUser && this.$store.dispatch('user/loadCurrentUserDetail')
    this.$store.dispatch('login/checkUserInfoState')
    let url = '${uc}/uc/tenantManage/v1/getTenantByCode?code=platform'
    this.$http.get(url).then(resp => (this.systemInformation = resp.data || {}))
    this.getBigScreenMenus()
    this.$bus.$on('alarm', data => {
      this.authToAlarm(data)
    })
  },
  methods: {
    authToAlarm(data) {
      const {orgId} = data
      const userOrgId = this.currentUser?.org[0]?.orgId || ''
      if (userOrgId === '1766017468444450816' || orgId === userOrgId) {
        this.alarm(data.data)
        this.$bus.$emit('refreashAlarm')
      }
    },
    alarm(data) {
      this.warningMsg = true
      this.$notify({
        title: '异常信息',
        message: data.roadName + ':' + data.inspectInfo,
        duration: 5000,
        type: 'warning'
      })
      this.$nextTick(() => {
        this.$refs.audioPlayer.play()
      })
      setTimeout(() => {
        this.warningMsg = false
        this.stopAlarm()
      }, 5000)
    },
    stopAlarm() {
      this.$refs.audioPlayer.pause()
      this.$refs.audioPlayer.currentTime = 0
    },
    handleScreen(menu) {
      this.$router.push({
        path: '/' + menu.alias
      })
    },
    getBigScreenMenus() {
      let frontMenus =
        JSON.parse(sessionStorage.getItem('currentFrontMenus')) || false
      let bigScreen = frontMenus.filter(item => item.alias === 'bigScreen')
      if (bigScreen && bigScreen.length) {
        this.bigScreenMenus = bigScreen[0]?.children || []
      }
    },
    // 修改密码页面
    openResetPwdDialog() {
      this.$router.push({
        path: '/platLayout/resetPwdView',
        query: {type: 'settings'}
      })
    },

    // 跳转个人中心
    openPersonalCenter() {
      this.$router.push({
        path: '/platLayout/personalInfo'
      })
    },

    // 跳转管理系统
    handleSysPlat() {
      if (this.isFinishedUserInfo) {
        let url = window.context.manage + '/getAuth?token=' + this.token
        window.open(url, '_blank')
      } else {
        this.$message.warning('请完善个人信息！')
      }
    },
    openMobileVue() {
      if (this.isFinishedUserInfo) {
        window.open(window.context.mobile, '_blank')
      } else {
        this.$message.warning('请完善个人信息！')
      }
    },
    // 退出登录
    logout() {
      // let loginRouthPath =
      //   localStorage.getItem(
      //     this.$store.state.login.currentUser.account + 'loginRoutePath'
      //   ) || '/login'
      // console.log(loginRouthPath, '000', this.$store.state.login)
      this.centerDialogVisible = true
    },
    logOutChange() {
      this.$store.dispatch('menu/clearMenus')
      this.$store.dispatch('user/clearUser')
      this.$store.dispatch('menu/setCopyMenus', [])
      // let loginRouthPath =
      //   localStorage.getItem(
      //     this.$store.state.login.currentUser.account + 'loginRoutePath'
      //   ) || '/login'
      this.$store.dispatch('login/logoutAndCleanUp').then(() => {
        switch (window.ssoConfig.mode) {
          case 'cas':
          case 'oauth':
            window.sessionStorage.removeItem('currentUser')
            window.location.href =
              window.ssoConfig.logout +
              '?service=' +
              window.location.href.split('?')[0]
            break
          default:
            // this.$router.push({
            //   path: loginRouthPath
            // })
            window.location.replace(window.context.defaultLoginUrl)
            break
        }
      })
    },
    closeChange() {
      this.centerDialogVisible = false
    },

    // 更多nav点击
    moreClick() {
      if (this.showMore) {
        this.showMore = false
      } else {
        this.showMore = true
        this.$nextTick(_ => {
          this.$refs.allNavContent && this.$refs.allNavContent.focus() //获得焦点
        })
      }
    },

    // 菜单弹出层失焦时间
    allMenuBlur() {
      this.$nextTick(_ => (this.showMore = false))
    },

    // nav菜单导航点击
    menuClick(item) {
      // 判断是否完善个人信息
      if (this.isFinishedUserInfo) {
        this.$router.push(item.routerPath)
        // if (item.routerPath == '/platLayout/patrolAndRescue') {
        //   this.$router.push('/platLayout/patrolAndRescue/infoMgmtPatrolsRescues/routeInfo')
        // } else {
        //   this.$router.push(item.routerPath)
        // }
      } else {
        this.$message.warning('请完善个人信息！')
        this.openPersonalCenter()
      }
      this.showMore = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

.title {
  font-family: STXingkai, serif;
  font-size: 35px !important;

  i {
    font-size: 30px;
  }
}

.el-header {
  padding: 0;
  height: 60px !important;
}

.header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  padding-left: 16px;
  box-sizing: border-box;
  background: url('~@/assets/img/publicLayout/header-bg.png') no-repeat 0 0,
  linear-gradient(180deg, #144871 0%, #144871 100%);
  background-size: 100% 100%;

  > * {
    font-family: Microsoft YaHei, serif;
  }

  .header-left {
    flex: 1;
    display: flex;
    align-items: center;
    column-gap: 60px;
    height: 100%;
    position: relative;

    .logo-box {
      height: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      color: $--menu-text;

      .logo {
        width: 170px;
        margin-right: 180px;
      }

      .logo_title {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        margin-top: -2px;

        .chinese {
          display: inline-block;
          font-size: 18px;
          font-family: SourceHanSerifCN-Medium, serif;
          width: 288px;
          height: 26px;
          color: $--menu-text;
          line-height: 26px;
        }

        .english {
          display: inline-block;
          font-size: 12px;
          height: 14px;
          font-family: Lato-Regular, serif;
          color: $--menu-text;
          line-height: 14px;
        }
      }

      .menu-box {
        padding-left: 20px;
        height: 60px;
        margin: 0 0 0 25px;
        position: relative;
        box-sizing: border-box;

        .short-menu {
          width: 100%;
          height: 100%;
          display: flex;
          //justify-content: space-between;
          align-items: center;
          column-gap: 16px;

          .home-icon {
            cursor: pointer;
            height: 32px;
            position: relative;

            svg {
              user-select: none;
              font-size: 33px;
            }
          }

          .more-box {
            height: 100%;
            cursor: pointer;
            display: flex;
            align-items: center;

            .reference-box-collapse {
              width: 65px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s;
              background-color: transparent;

              span {
                display: inline-block;
                width: 32px;
                height: 32px;
                background: url('~@/assets/img/publicLayout/more-icon.png') no-repeat 50% 70%;
                background-size: 100% 100%;
                transition: all 0.2s;
              }

              &.expansion {
                background-color: $--system-module-color1;
                height: 100%;

                span {
                  background: url('~@/assets/img/publicLayout/more-icon-blue.png') no-repeat 50% 70%;
                  background-size: 100% 100%;
                }
              }
            }

            .reference-box {
              height: 100%;
              display: flex;
              align-items: center;
              user-select: none;
              column-gap: 8px;
              white-space: nowrap;
              padding: 0 16px;
              position: relative;

              //&::before {
              //  content: '';
              //  position: absolute;
              //  width: 1px;
              //  height: 16px;
              //  background-color: $--menu-text;
              //  left: 0;
              //  top: 50%;
              //  transform: translateY(-50%);
              //}

              span {
                font-size: 16px;
                font-family: Microsoft YaHei, serif;
                font-weight: 400;
              }

              svg {
                width: 30px;
                height: 28px;
                margin-top: 1px;
              }

              &.expansion {
                background-color: $--system-module-color1;
                height: 100%;

                span,
                svg {
                  color: $--system-hover-active-text;
                }

                &::before {
                  background-color: $--system-module-color1;
                }
              }
            }
          }
        }

        .all-menu {
          position: absolute;
          left: 69px;
          bottom: 0;
          width: 536px;
          height: 0;
          z-index: 1000;
          transition: height 0.2s, bottom 0.2s, opacity 0.1s;
          opacity: 0;
          pointer-events: none;
          overflow: hidden;
          background: $--system-module-color1;
          border-radius: 0 0 16px 16px;
          box-shadow: 0 4px 10px 0 $--system-box-color3;

          &.all-menu-show {
            bottom: -312px;
            height: 312px;
            opacity: 1;
            pointer-events: auto;
          }

          .all-menu-content {
            width: 100%;
            height: 100%;
            padding: 24px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            column-gap: 8px;
            row-gap: 8px;

            &:focus {
              outline: none;
            }

            .menu-btn {
              width: calc((100% - 24px) / 4);
              height: 130px;
              background: linear-gradient(
                  360deg,
                  $--system-box-color5 0%,
                  $--system-box-color4 100%
              );
              border-radius: 8px;
              display: flex;
              flex-direction: column;
              row-gap: 16px;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              transition: all 1s;
              box-sizing: border-box;

              @mixin hover-active {
                background: linear-gradient(
                    360deg,
                    $--system-box-color1 0%,
                    $--system-box-color3 100%
                );

                span,
                svg {
                  color: $--system-hover-active-text;
                }
              }

              &:hover {
                @include hover-active;
              }

              &.menu-btn-active {
                @include hover-active;
              }

              span {
                display: inline-block;
                height: 24px;
                line-height: 24px;
                font-size: 18px;
                font-family: Microsoft YaHei, serif;
                font-weight: 400;
                color: $--menu-text;
                transition: all 0.3s;
                user-select: none;
              }

              svg {
                font-size: 42px;
                color: $--menu-text;
                transition: all 0.3s;
              }
            }
          }
        }
      }
    }

    .first-menus {
      display: flex;
      column-gap: 30px;
      height: 100%;
      position: absolute;
      left: 58%;
      transform: translateX(-50%);

      .first-menus-item {
        padding-top: 6px;
        height: 100%;
        display: flex;
        align-items: center;
        column-gap: 10px;
        position: relative;
        cursor: pointer;
        transition: all 0.2s;
        color: $--menu-text;
        user-select: none;
        box-sizing: border-box;

        &.active-menu {
          color: #fff;
          transform: scale(1.125) translateY(-5%);

          span {
            font-weight: 700;

            &::after {
              opacity: 1;
              transform: translate(-50%, 0%);
            }
          }
        }

        &:hover {
          color: #fff;

          span {
            color: #fff;
          }
        }

        span {
          display: flex;
          align-items: center;
          height: 100%;
          font-size: 16px;
          color: $--menu-text;
          transition: all 0.15s;
          white-space: nowrap;
          position: relative;

          &::after {
            content: '';
            width: 80%;
            height: 2.5px;
            background-color: #fff;
            border-radius: 5px;
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translate(-50%, 300%);
            opacity: 0;
            transition: all 0.2s;
          }
        }

        .header-icon {
          font-size: 18px;
        }

        .active-line {
          width: 40px;
          height: 4px;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          margin: 5px auto 0;
        }
      }
    }
  }

  .header-right {
    margin-right: 16px;
    display: flex;
    align-items: center;

    .bell-box {
      padding: 5px;
      cursor: pointer;
      user-select: none;

      ::v-deep .bell {
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
          -webkit-user-drag: none;
        }

        .el-badge__content {
          display: flex;
          align-items: center;
          height: 18px;
          border-radius: 100px;
          box-sizing: border-box;
          padding: 0 6px;
          font-size: 12px;
          font-family: Microsoft YaHei, serif;
          font-weight: 400;
          color: $--menu-text;
        }
      }
    }

    .avatar {
      margin: 0 8px 0 40px;
    }

    .input {
      width: 340px;
      height: 40px;
      border-radius: 4px;
      margin: 19px 36px;
      margin-left: 24px;

      ::v-deep .el-input input,
      ::v-deep .el-input-group__append {
        background-color: #f1f1f1;
        border: none;

        .el-icon-search {
          font-size: 18px;
        }
      }

      ::v-deep .el-input-group {
        height: 100%;
      }

      ::v-deep .el-input {
        input {
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          height: 100%;
        }

        input::-webkit-input-placeholder {
          // 针对 谷歌 内核
          font-family: Microsoft YaHei, serif;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          color: #c4c4c4;
        }

        input:-moz-placeholder {
          // 火狐
          font-family: Microsoft YaHei, serif;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          color: #c4c4c4;
        }

        input:-ms-input-placeholder {
          // 微软ie
          font-family: Microsoft YaHei, serif;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0;
          color: #c4c4c4;
        }
      }
    }

    .user-box {
      display: flex;
      flex-direction: column;
      margin-right: 10px;
      row-gap: 2px;

      .welcome {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei, serif;
        color: $--menu-text;
        font-weight: 700;

        i {
          color: $--menu-text;
          font-size: 14px;
          margin-left: 8px;
        }
      }

      .department {
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei, serif;
        font-weight: 400;
        color: $--menu-text;
      }
    }
  }
}

.operation-manual {
  color: #2761ff;
  background: #e9efff;
  padding: 6px 12px;
  border: 1px solid #a9c0ff;
  cursor: pointer;
  margin-right: 20px;
  font-weight: bold;
  border-radius: 5px;

  i {
    color: #2761ff;
    margin-right: 6px;
  }

  .sub-back {
    color: #fff;
  }

  &:first-child {
    color: #fff;
    background: #2761ff;
    border: 1px solid #2761ff;
  }
}

.action-btn {
  width: 100px;
  height: 35px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0;
  margin: 0 10px 0 0;
}

.operation-manual:hover {
  background: #2761ff;
  border-color: #2761ff;
  color: $--menu-text;

  i {
    color: $--menu-text;
  }
}

::v-deep .el-avatar {
  width: 30px;
  height: 30px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.el-avatar i {
  font-size: 16px;
  color: #c0c4cc;
}

.user-box-header {
  padding: 10px;

  h3 {
    font-weight: bold;
    margin: 2px 0;
  }
}

.user-link-ul {
  list-style: none;
  padding: 0;
  margin: 0;

  > li {
    padding: 8px 5px;
    cursor: pointer;
  }

  > li > i {
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
  }

  > li:hover {
    color: $--system-hover-active-text;
    background-color: $--system-box-color3;
  }

  .el-link {
    color: #606266 !important;

    i {
      font-size: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}

.user-box-logout {
  justify-content: center;
  background: $--navigator-main-color;
  // border-top: 1px solid rgba($--navigator-text-color,0.1);
  // border-bottom: 1px solid rgba($--navigator-text-color,0.1);
  // margin-top: 10px;
  color: $--navigator-main-text-color !important;
}

.user-box-logout:hover {
  background: $--navigator-main-text-color;
}

.user-box-logout > .el-link {
  line-height: 46px;
  width: 100%;
  color: $--navigator-main-text-color !important;
  background: $--navigator-main-color;
}

.user-box-logout > .el-link:hover,
.user-box-logout > .el-link:focus {
  color: $--navigator-main-text-color !important;
}

.qr-icon {
  width: 24px;
  height: 24px;
  padding: 5px;
  -webkit-user-drag: none;
}

.qr-tips {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}

.screen-menu {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  cursor: pointer;

  i {
    font-size: 14px;
  }
}

.screen-menu:hover {
  color: $--system-hover-active-text;
  background-color: $--system-box-color3;
}

.warning-wrapper {
  width: 32px;
  height: 32px;
  position: relative;
}

.warning-bg {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  box-sizing: border-box;
  background-color: rgba(255, 103, 136, 0.3);
  border: 1px solid rgba(255, 103, 136, 0.4);
  animation: shine 1s linear infinite;
}

.warning-icon {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 0;
  animation: warning 1s linear infinite;
}

@keyframes shine {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes warning {
  0% {
    transform: rotate(0deg) scale(0.8);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(0.8);
  }
}
</style>

<style lang="scss">
.menu-popover {
  min-width: 0 !important;
}

.header-popper {
  width: 150px !important;
  border-radius: 10px;
  overflow: hidden;
  padding: 8px 12px 16px !important;
  vertical-align: middle;
  right: 50px !important;
  left: initial !important;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 10%);

  * {
    font-size: 13px;
  }
}

.qr-code-popover.el-popper[x-placement^='bottom'] {
  .popper__arrow {
    border-bottom-color: #43a1ff;
    top: -0.355vw;
  }

  .popper__arrow::after {
    border-bottom-color: #43a1ff;
  }
}
</style>
